HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:10:08

HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享

HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享:閑來無事做，用H5搞了幾個小游戲，當(dāng)然本人只是菜鳥，搞出來玩玩，大神莫噴哦， 1、HTML5網(wǎng)頁版黑白子五子棋游戲代碼，源碼請下載附件！部分前端代碼： <!DOCTYPE html> <html> <head> <meta charset="

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享:閑來無事做，用H5搞了幾個小游戲，當(dāng)然本人只是菜鳥，搞出來玩玩，大神莫噴哦， 1、HTML5網(wǎng)頁版黑白子五子棋游戲代碼，源碼請下載附件！部分前端代碼： <!DOCTYPE html> <html> <head> <meta charset="

閑來無事做，用H5搞了幾個小游戲，當(dāng)然本人只是菜鳥，搞出來玩玩，大神莫噴哦，
1、HTML5網(wǎ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ù)組作為棋盤
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繪圖環(huán)境對象
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;
//獲取點擊相對棋盤坐標(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);

//判斷每行是否有五個
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();

//判斷每列是否有五個
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();

//左上 右下有沒有五個
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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：游戲五子棋代碼

熱門焦點

HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享

HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享

HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享

最新推薦

猜你喜歡

熱門推薦