Rumah > Artikel > hujung hadapan web > HTML5网页版黑白子五子棋游戏的示例代码分享
HTML5网页版黑白子五子棋游戏的示例代码分享
- 黄舟asal
- 2017-04-01 10:57:316949semak imbas
闲来无事做，用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>Atas ialah kandungan terperinci HTML5网页版黑白子五子棋游戏的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html5仿AMD9官网酷炫的下载引导页动画特效的示例代码Artikel seterusnya：基于HTML5的Web SCADA报表图文代码详解