js小游戏：五子棋
使用纯js的小游戏，五子棋
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
canvas{
margin:10px;
border:2px solid #CCCCCC; }
#box{
display:inline-block;
position:absolute;
margin-top: 200px;
margin-left: 100px;
}
span{
font :24px "微软雅黑";
display: inline-block;
height:50px;
}
input{
margin-top:30px;
display:block;
width:100px;
height: 50px;
font:16px "微软雅黑";
color:#fff;
background-color: #0099cc;
} </style> </head>
<body>
<canvas width="640" height="640" id="cas"></canvas>
<div id = "box">
<span id= "txt"></span>
<input type = "button" id = "btn" value="重新开始" />
</div> <script type="text/javascript"> var flag = true;//true代表白棋下的棋子，false 代表黑棋子
var isWin = false;
var step = 40; //设置每个棋子的高度是40
var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); var cas = document.getElementById("cas");//画布 var ctx = cas.getContext("2d");
cas.style.backgroundImage = "url(img/an.jpg)";
var img_b = new Image();
img_b.src = "img/red.png";
var img_w = new Image();
img_w.src = "img/bg.png";
//用二维数组来保存棋盘，0代表没有走过，1代表白棋走过。2代表黑气走过
var arr = new Array(16);//声明一个一维数组；
for(var i= 0;i<=15;i++){
arr[i] = new Array(16);
for(var j= 0;j<=15;j++){
arr[i][j] = 0; }
} //绘制棋盘
function drawLine(){ for(var i= 0;i<cas.width/step;i++){
//画竖线
ctx.moveTo((i+1)*step,0);
ctx.lineTo((i+1)*step,cas.height);
//画横线
ctx.moveTo(0,(i+1)*step);
ctx.lineTo(cas.width,(i+1)*step);
ctx.stroke(); }
}
//获取鼠标点击的位置。
cas.onclick = function(e){
//先判断游戏是否结束
if(isWin){
alert("游戏已经结束，请重新开始");
return 0;
}
//判断棋子显示的地方，四条边上不显示棋子。
//鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20）
// var x = (e.clientX-10-20)/40 +1;
// var y = (e.clientY-10-20)/40 +1;
var x = (e.pageX-10-20)/40 +1;
var y = (e.pageY-10-20)/40 +1; //进行取整来确定棋子最终显示的位置。
x = parseInt(x); y = parseInt(y);
//如果超出棋盘或者在棋盘的边界直接返回，边界上不能画棋子。
if(x<=0||x>15||y<=0||y>15){
alert("不可以在边界下棋子！");
return;
} //判断这个位置是否已经显示过棋子
if(arr[x][y]!=0){
alert("这个地方已经有棋子了，不可以重复棋子");
return;
}
//判断显示黑棋还是白棋
if(flag){
flag= false;//将标志设置为false,表示下次为黑子。
drawChess(1,x,y);//调用函数画棋子
}else{
flag = true;//将标志改为true,表示下次为白棋。
drawChess(2,x,y);
}
} //画棋子
function drawChess(num,x,y){
//根据x和y确定图片显示的位置，让图片显示在十字线的中间。
//一个格子为40，图片大小为30，所以40-30/2等于25，所以加上25
var x0 = x*step ;
var y0 = y*step ;
if(num ==1 ){ ctx.beginPath();
ctx.arc(x0,y0,15,0,2*Math.PI);
ctx.fillStyle ="#ff2233";
//ctx.fillStyle.backgroundImage = "url(img/red.png)";
ctx.fill();
ctx.closePath();
ctx.stroke(); //ctx.drawImage(img_w,x0,y0);
arr[x][y] = 1;//白子
}else if(num==2){
ctx.beginPath();
ctx.arc(x0,y0,15,0,2*Math.PI);
ctx.fillStyle ="#008000";
//ctx.fillStyle.backgroundImage ="url(img/f.png)";
ctx.fill();
ctx.closePath();
ctx.stroke();
//ctx.drawImage(img_b,x0,y0);
arr[x][y] = 2;//黑子
} //调用函数判断输赢
judge(num,x,y);
} function judge(num,x,y){
//左右方向，上下方向，左上右下，左下右上
var n1=0 , n2 = 0, n3= 0, n4 = 0;
//左右方向
for(var i=x ;i>0;i--){
if(arr[i][y]!=num){
break;
}
n1++;
}
for(var i= x+1;i<=15;i++){
if(arr[i][y]!=num){
break;
}
n1++;
}
//上下方向。
for(var j=y ;j>0;j--){
if(arr[x][j]==num){
n2++;
}else{
break;
}
}
for(var j= y+1;j<=15;j++){ if(arr[x][j]==num){
n2++;
}else{
break;
}
}
//左上到右下
for(var i= x,j= y;i>=0,j>=0;i--,j--){
if(i<0||j<0||arr[i][j]!=num){
break;
}
n3++;
}
for(var i= x+1,j=y+1;i<=15,j<=15;i++,j++){
if(i>15||j>15||arr[i][j]!=num){
break;
}
n3++;
}
//左下到右上
for(var i= x,j= y;i>0,j<=15;i--,j++){
if(i<0||j>=15||arr[i][j]!=num){
break;
}
n4++;
}
for(var i= x+1,j=y-1;i<=15,j>=0;i++,j--){
if(i>=15||j<0||arr[i][j]!=num){
break;
}
n4++;
}
//用一个定时器来延时，否则会显示对话框，然后才显示棋子。
//alert(n1+"--"+n2+"--"+n3+"--"+n4);
var str ;
if(n1>=5||n2>=5||n3>=5||n4>=5){
if(num==1){
alert("恭喜白棋夺冠！");
str = "白棋赢了，游戏结束";
}else if(num ==2){
alert("恭喜黑棋夺冠！");
str = "黑棋赢了，游戏结束";
}
txt.innerHTML = str;
isWin = true;
}
} //重新开始
btn.onclick = function(){
falg = true;
isWin = false; for(var i= 0 ;i<=15;i++){
for(var j= 0;j<=15;j++){
arr[i][j] =0;
}
}
ctx.clearRect(0,0,640,640);
txt.innerHTML = "";
drawLine();
}
drawLine();
</script>
</body>
</html>
现在可以开始玩喽！
js小游戏：五子棋的更多相关文章
- 一个js小游戏----总结
花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...
- JS小游戏：贪吃蛇（附源码）
javascript小游戏:贪吃蛇 此小游戏采用的是面向对象的思想,将蛇,食物,和游戏引擎分为3个对象来写的. 为方便下载,我把js写在了html中, 源码中暂时没有注释,等有空我在添加点注释吧. 游 ...
- JS小游戏-蓝色拼图
// a[href=#viewSource]"); //查看源代码标签 viewSourceArr.attr("title", "查看源代码"); v ...
- JS小游戏寻找房祖名
提示:1:先把两个图片放到重命名并放到相应的路径内. 2:本小游戏只为闲事练手,如有小bug自行解决,解决不了的可以留言,我看到后解决. 代码如下: <!DOCTYPE html>< ...
- c++小游戏--五子棋
大家好,我是芝麻狐! 这是我自制的小游戏,目前仅支持devc++. 如果你没有c++软件, 请打开网站GDB online Debugger | Compiler - Code, Compile, R ...
- 【GXZ的原创】C++小游戏——五子棋
前些时候考完试自己编的带有胜负判定的五子棋. 操作方法:WSAD或↑↓←→移动下棋位置,Space或Enter放置. 如果游戏出现bug,欢迎大家在评论区反馈. #include <stdio. ...
- c++小游戏——五子棋
#include<iostream> #include<iomanip> #include<cstring> using namespace std; const ...
- Vue.js小游戏：测试CF打狙速度
此项目只测试反应速度,即手点击鼠标的反应速度 html代码 <div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div> < ...
- js小游戏---智力游戏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
随机推荐
- vue-cli3快速创建项目
文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn ...
- Android打开相机进行人脸识别，使用虹软人脸识别引擎
上一张效果图,渣画质,能看就好 功能说明: 人脸识别使用的是虹软的FreeSDK,包含人脸追踪,人脸检测,人脸识别,年龄.性别检测功能,其中本demo只使用了FT和FR(人脸追踪和人脸识别),封装了开 ...
- 关于ES6的一些新特性的学习
一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) E ...
- Spring Cloud 入门教程(四)： 分布式环境下自动发现配置服务
前一章, 我们的Hello world应用服务,通过配置服务器Config Server获取到了我们配置的hello信息“hello world”. 但自己的配置文件中必须配置config serve ...
- QQ Protect 的删除
删的好费劲,驱动程序,服务,各个东西都在相互保护. 最后总结: 1)进安全模式 2)删除 下面的文件 c:\program files\tencent\qqlite\shellext\qqshelle ...
- 7内存管理-MRC
@0简介 内存管理,即内存里各个对象的管理,即内存里各个对象的生命周期的管理,(从面向对象的角度看) @1引用计数器 默认为1,即有一滴的生命血液,若为0就会死去 @2单个对象的管理 自己管理自己,自 ...
- 质控工具之TrimGalore使用方法
TrimGalore 就是一个简单的perl wrapper,打包了fastqc和cutadapt,但是却非常实用. 因为cutadapt的参数选择实在是有够复杂,光接头类型就有5种,还有各种参数,大 ...
- win下使用VM虚拟机安装Linux系统
自己电脑上还是有个自己的虚拟机比较方便,之前用的Ubuntu,发现卡得不行. 现在装了个轻量级的Lubuntu,速度提升了不少. 1.下载Lubuntu,安装. 2.进入,设置root密码,初始化ro ...
- English trip V1 - 19.Where Am I？ 我在哪里？Teacher:Patrick Key:Ask for and directions
In this lesson you will learn to ask for and give directions. 本节课你将学习到学会问路和指路. 课上内容(Lesson) 人类的几种感: ...
- 20170912多线程Python爬取图片
import threading #导入线程 from urllib import request #导入网页请求模块 import re #导入正则表达式模块 import os # 引入模块 fr ...