站长资讯网 闲来无事做，用H5搞了几个小游戏，当然本人只是菜鸟，搞出来玩玩，大神莫喷哦，
1、HTML5网页版黑白子五子棋游戏代码，源码请下载附件！
部分前端代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五子棋</title> <style type="text/css"> *{ 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; } </style> </head> <body> <canvas>PK</canvas> <div> <canvas id="can" width="640" height="640"> 您的浏览器不支持canvas </canvas> </div> <script> var text = document.getElementsByClassName('text'); //定义二维数组作为棋盘 var maps = new Array(16); var len = maps.length; // alert(len) for(var i=0;i<len;i++){ maps[i] = new Array(); for(var j = 0;j<len;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 = document.getElementById('can'); var ctx = can.getContext("2d"); //获取该canvas的2D绘图环境对象 ctx.strokeStyle = "#333"; for(var m=0;m<len-1;m++){ for(var n=0;n<len-1;n++){ ctx.strokeRect(m*40+20,n*40+20,40,40); //绘制40的小正方形 } } //绘制文字 var can1 = document.getElementsByClassName('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.onclick=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++; } // alert(total); celebrate(); function celebrate(){ //显示哪边赢 if(total>=5){ if(t==1){ // alert("白子赢"); // text[0].innerHTML="白子赢"; // cxt1.clearRect(0,0,can1.width,can1.height); ctx1.clearRect(0,0,can1[0].width,can1[0].height); ctx1.fillText("白子赢",0,100); }else{ // alert("黑子赢"); // text[0].innerHTML="黑子赢"; // cxt1.clearRect(0,0,can1.width,can1.height); ctx1.clearRect(0,0,can1[0].width,can1[0].height); ctx1.fillText("黑子赢",0,100); } } } function reset(){ orgrow = row; orgcol = col; total = 1; } } } </script> </body> </html>
