闲来无聊，花了2小时做了个html版的五子棋
还有个bug,
当屏幕放缩的时候：放子的位置和实际放子的位置不同
解决方案，当屏幕放缩时更改单元格的值（源码中全局变量 var w=25;）
标签：
<无>
代码片段(4)
[全屏查看所有代码]
1. [文件]
index.html ~ 3KB
下载(0)
跳至
[1]
[全屏预览]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=3, minimum-scale=1.0, maximum-scale=3.0">
<title>在线五子棋</title>
</head>
<body>
<canvas></canvas>
<script type="text/javascript">
var w=25;//方格宽度
var cxt=null,myCanvas=null;//
var arrays=new Array();
window.onload=function(){
myCanvas=document.getElementById("myCanvas");
cxt=myCanvas.getContext("2d");
cxt.translate(0.5,0.5);
init();
};
function init(){
cxt.strokeStyle="#666";
for(var i = 0;i<16;i++){
cxt.moveTo(w*i,0);
cxt.lineTo(w*i,14*w);
cxt.stroke();
cxt.restore();
}
for(var i = 0;i<16;i++){
cxt.moveTo(0,w*i);
cxt.lineTo(14*w,w*i);
cxt.stroke();
cxt.restore();
}
initDrawPoint();
initArray();
}
function initDrawPoint(){
cxt.fillStyle="#000";
for(var i=3;i<15;){
for(var j=3;j<15;){
cxt.beginPath();
cxt.arc(w*i,w*j,2,0,Math.PI*2,true);
cxt.fill();
j=j+8;
}
i=i+8;
}
cxt.beginPath();
cxt.arc(w*7,w*7,3,0,Math.PI*2,true);
cxt.fill();
}
function initArray(){
for(var i=0;i<16;i++){
arrays[i]=new Array();
for(var j=0;j<16;j++){
arrays[i][j]=0;
}
}
}
function drawChessman(i,j,type){
var img = new Image();
img.onload = function(){
cxt.drawImage(img, w*i-10,w*j-10);
//检查是否已经赢了
checkWin();
};
if(type){//是黑子
img.src="b.png";
}else{
img.src="w.png";
}
}
var type=false;
function downChessman(e){
type = !type;
var ox = myCanvas.offsetLeft,oy=myCanvas.offsetTop;
var x = Math.round((e.clientX-ox) / w);
var y = Math.round((e.clientY-oy) / w);
//console.log("cx="+(e.clientX-ox)+",cy="+(e.clientY-oy));
//console.log("x="+x+",y="+y);
var val = arrays[x][y];
if(val==0){//没有棋子
if(type){//黑子
arrays[x][y]=1;
}else{
arrays[x][y]=2;//白子
}
drawChessman(x,y,type);
}
}
function checkWin(){
var b0=b1=w0=w1=0;
for(var x=0;x<16;x++){
for(var y=0;y<16;y++){
var val = arrays[x][y];
if(val>0){//有棋子
if(y<16-5&&val==arrays[x][y+1]&&val==arrays[x][y+2]&&val==arrays[x][y+3]&&val==arrays[x][y+4]){//y轴连续5颗相同棋子
alert(val==1?"黑子获胜":"白子获胜");
return;
}
if(x<16-5&&y<16-5&&val==arrays[x+1][y+1]&&val==arrays[x+2][y+2]&&val==arrays[x+3][y+3]&&val==arrays[x+4][y+4]){//西北->东南方向连续5颗相同棋子
alert(val==1?"黑子获胜":"白子获胜");
return;
}
if(x<16-5&&val==arrays[x+1][y]&&val==arrays[x+2][y]&&val==arrays[x+3][y]&&val==arrays[x+4][y]){//x轴连续5颗相同棋子
alert(val==1?"黑子获胜":"白子获胜");
return;
}
if(x-4>=0&&val==arrays[x-1][y+1]&&val==arrays[x-2][y+2]&&val==arrays[x-3][y+3]&&val==arrays[x-4][y+4]){
alert(val==1?"黑子获胜":"白子获胜");
return;
}
}
}
}
}
</script>
</body>
</html>
2. [图片] b.png
“一个五子棋的代码”的相关内容有:
一个多功能自动检测内容，支持灯箱/模态窗口,图片画廊，视频等等功能。
Echarts柱状图Legend点击事件（网址）标签：<无>-->-->-->1.
Grid的单元格对数据显示都是采用省略的办法来处理的，即内容长度超过单元格长度时自动隐藏超过的部分并使用省略号...来显示，这样虽然也很好，但有时我们可能还是希望它能完全的显示出来，即采用换行显示。
相关文章
精彩导读
热门资讯
关注我们
