HTML5网页版黑白子五子棋游戏的示例代码分享

百变鹏仔 2个月前 (10-18) #H5教程

文章标签白子

闲来无事做，用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(&#39;text&#39;);//定义二维数组作为棋盘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(&#39;can&#39;);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(&#39;text&#39;);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; //黑子为2iswin(2,row,col);}else{ctx.drawImage(white,col*40,row*40);isBlack = true;maps[row][col] = 1; //白子为1iswin(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){ //左上1row--;col--;total++;}row = orgrow;col = orgcol;while(row+1<16&&col+1<16&&maps[row+1][col+1]==t){  //右下1row++;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>

文章推荐

HTML5网页版黑白子五子棋游戏的示例代码分享

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集