⽹页游戏五⼦棋php,HTML5⽹页版⿊⽩⼦五⼦棋游戏的⽰例代
码分享
闲来⽆事做，⽤H5搞了⼏个⼩游戏，当然本⼈只是菜鸟，搞出来玩玩，⼤神莫喷哦，
1、HTML5⽹页版⿊⽩⼦五⼦棋游戏代码，源码请下载附件！
部分前端代码：
五⼦棋
*{
margin:0;
padding:0;
}
.gobang{
margin:10px auto;
width:642px;
height: 642px;
/*border:1px solid;*/
background: url(picture/bak.jpg);
overflow: hidden;
}
.text{
margin:0 auto;
width:100px;
height:40px;
text-align: center;
color:#f00;
border:1px solid red;
line-height: 40px;
display: block;
}
#can{
margin:0px auto;
border:1px solid green;
display: block;
}
PK
您的浏览器不⽀持canvas
var text = ElementsByClassName('text');
//定义⼆维数组作为棋盘
var maps = new Array(16);
var len = maps.length;
// alert(len)
for(var i=0;i
maps[i] = new Array();
for(var j = 0;j
maps[i][j] = 0;
/
/ console.log(maps[i][j]);
}
}
//初始化棋⼦
var black = new Image();
var white = new Image();
var clientWidth = document.documentElement.clientWidth; black.src = "picture/black.png";
white.src = "picture/white.png";
//棋盘初始化
var can = ElementById('can');
var ctx = Context("2d"); //获取该canvas的2D绘图环境对象ctx.strokeStyle = "#333";
for(var m=0;m
for(var n=0;n
ctx.strokeRect(m*40+20,n*40+20,40,40); //绘制40的⼩正⽅形}
}
//绘制⽂字
var can1 = ElementsByClassName('text');
var ctx1 = can1[0].getContext("2d");
ctx1.beginPath();
ctx1.font=("100px Georgia");
ctx1.fillStyle="#F70707";
// ctx1.fillText("Hello",40,100);
var isBlack = true;
//下⼦
can.οnclick=function play(e){
// alert(e.clientX);
//获取棋盘偏移量
var l = this.offsetLeft+20;
var t = this.offsetTop+20;
//获取点击相对棋盘坐标
var x =e.clientX - l;
var y = e.clientY -t;
// alert(x);
var row,col,index = 0;
if(x%40 < 20){
col = parseInt(x/40);
}else{
col = parseInt(x/40)+1;
}
row = y%40<20 ? parseInt(y/40) : parseInt(y/40)+1; // alert(row+"⾏"+col+"⾏"); //第⼏列⾏第⼏列
if(maps[row][col]===0){
if(isBlack){
ctx.drawImage(black,col*40,row*40); //下⿊⼦
isBlack = false;
maps[row][col] = 2; //⿊⼦为2
iswin(2,row,col);
}else{
ctx.drawImage(white,col*40,row*40);
isBlack = true;
maps[row][col] = 1; //⽩⼦为1
iswin(1,row,col);
}
}
function iswin(t,row,col){
var orgrow,orgcol,total;
reset();
// alert(total);
//判断每⾏是否有五个
while(col>0 &&maps[row][col-1]==t){ //当前⼦左边还有
total++;
col--;
};
row = orgrow;
col = orgcol;
while(col+1<16 &&maps[row][col+1]==t){ //当前⼦右边还有col++;
total++;
};
// alert(total);
celebrate();
//判断每列是否有五个
reset();
while(row>0&&maps[row-1][col]==t){ //当前⼦上⾯还有
total++;
row--;
}
row = orgrow;
col = orgcol;
while(row+1<16&&maps[row+1][col]==t){ //下⾯
total++;
row++;
}
celebrate();
//左上 右下有没有五个
reset();
while(row>0&&col>0&&maps[row-1][col-1]==t){ //左上1 row--;
col--;
total++;
}
row = orgrow;
col = orgcol;
while(row+1<16&&col+1<16&&maps[row+1][col+1]==t){ //右下1 row++;
col++;
total++;
}
// alert(total)
celebrate();
//左下 右上有没有五个
reset();
// alert(total);
while(row>0&&col+1<16&&maps[row-1][col+1]==t){ //右上
row--;
col++;
total++;
}
row = orgrow;
col = orgcol;
while(row+1<16&&col>0&&maps[row+1][col-1]==t){ //左下
row++;
col--;
total++;php手机版下载
}
// alert(total);
celebrate();
function celebrate(){ //显⽰哪边赢
if(total>=5){
if(t==1){
// alert("⽩⼦赢");
// text[0].innerHTML="⽩⼦赢";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。