站長(zhǎng)資訊網(wǎng) 閑來(lái)無(wú)事做，用H5搞了幾個(gè)小游戲，當(dāng)然本人只是菜鳥(niǎo)，搞出來(lái)玩玩，大神莫噴哦，
1、HTML5網(wǎng)頁(yè)版黑白子五子棋游戲代碼，源碼請(qǐng)下載附件！
部分前端代碼：
<!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'); //定義二維數(shù)組作為棋盤(pán) 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"; //棋盤(pán)初始化 var can = document.getElementById('can'); var ctx = can.getContext("2d"); //獲取該canvas的2D繪圖環(huán)境對(duì)象 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); //獲取棋盤(pán)偏移量 var l = this.offsetLeft+20; var t = this.offsetTop+20; //獲取點(diǎn)擊相對(duì)棋盤(pán)坐標(biāo) 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); //判斷每行是否有五個(gè) while(col>0 &&maps[row][col-1]==t){ //當(dāng)前子左邊還有 total++; col--; }; row = orgrow; col = orgcol; while(col+1<16 &&maps[row][col+1]==t){ //當(dāng)前子右邊還有 col++; total++; }; // alert(total); celebrate(); //判斷每列是否有五個(gè) reset(); while(row>0&&maps[row-1][col]==t){ //當(dāng)前子上面還有 total++; row--; } row = orgrow; col = orgcol; while(row+1<16&&maps[row+1][col]==t){ //下面 total++; row++; } celebrate(); //左上 右下有沒(méi)有五個(gè) 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(); //左下 右上有沒(méi)有五個(gè) 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>
