1.只能下21颗棋子,然后无法增加棋子,不久后页面奔溃
2.代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
}
</style>
</head>
<body>
<canvas width="800" height="800" style="background-color:#EFD6A8" id="can">
</canvas>
</body>
</html>
<script>
window.onload = function() {
var x;
var y;
var s = 0;
var q;
var l = [];
var l1 = [];
var l2 = [];
var s4 = 0;
var can = document.getElementById('can');
var ctx = can.getContext('2d');
for (var i = 0; i < 15; i++) {
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.moveTo( 10+i * 20, 10);
ctx.lineTo(10+ i * 20, 290);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.moveTo(10, 10+i * 20);
ctx.lineTo( 290,10+ i * 20);
ctx.stroke();
ctx.closePath();
}
function qizi(imgSrc, x, y) {
this.img = imgSrc;
this.x = x;
this.y = y;
this.draw = function () {
var img = new Image();
img.src = this.img;
img.onload=function(){
ctx.drawImage(img, 0, 0, 36, 36, x, y, 20, 20);
}
}
}
var b1 = new zuobiao(-1, -1);
l.push(b1);
function zuobiao(x, y) {
this.x = x;
this.y = y;
}
can.onclick = function (e) {
var dd=0;
var ddd=0;
x = e.clientX-10;
y = e.clientY-10;
var ss = 1;
var s13= l.length;
if(x % 20 >= 12){
dd=1;
}
if(y % 20 >= 12){
ddd=1;
}
var x1 = x - x % 20+dd*20;
var y1 = y - y % 20+ddd*20;
if ((x % 20 >= 12 || x % 20 <= 8) && (y % 20 >= 12 || y % 20 <= 8)
&& (x >=-10 && x <= 290) && (y >=-10 && y <= 290)) {
for (i = 0; i < s13; i++) {
if (l[i].x == x1 && l[i].y == y1) {
ss = 0;
}
else {
var bb = new zuobiao(x1, y1);
l.push(bb);
}
}
if (ss==1) {
s++;
q = s % 2;
var b = new qizi('' + q + '.png', x1, y1);
b.draw();
if (q == 1) {
var bb1 = new zuobiao(x1, y1);
l1.push(bb1);
}
else {
var bb2 = new zuobiao(x1, y1);
l2.push(bb2);
}
var s2 = l1.length;
var s3 = l2.length;
var s5 = 1;
var s6 = 1;
var s7 = 1;
var s8 = 1;
var s9 = 1;
var s10 = 1;
var s11 = 1;
var s12 = 1;
var mm = false;
for (s4 = 0; s4 < s2; s4++, s5 = 1, s6 = 1, s7 = 1, s11 = 1, s8 = 1, s9 = 1, s10 = 1, s12 = 1) {
for (var l3 = 0; l3 < s2; l3++) {
if (l1[s4].y == l1[l3].y) {
if (l1[s4].x == l1[l3].x - 20 || l1[s4].x == l1[l3].x - 40
|| l1[s4].x == l1[l3].x - 60 || l1[s4].x == l1[l3].x - 80
) {
s5++;
if (s5 == 5) {
alert('游戏结束:黑棋胜利');
mm = true;
}
}
}
if (l1[s4].x == l1[l3].x) {
if (l1[s4].y == l1[l3].y - 20 || l1[s4].y == l1[l3].y - 40
|| l1[s4].y == l1[l3].y - 60 || l1[s4].y == l1[l3].y - 80
) {
s6++;
if (s6 == 5) {
alert('游戏结束:黑棋胜利');
mm = true;
break;
}
}
}
if ((l1[s4].x == l1[l3].x - 20 && l1[s4].y == l1[l3].y - 20 ) || (l1[s4].x == l1[l3].x - 40 &&
l1[s4].y == l1[l3].y - 40 )
|| (l1[s4].x == l1[l3].x - 60 && l1[s4].y == l1[l3].y - 60 ) || (l1[s4].x == l1[l3].x - 80
&& l1[s4].y == l1[l3].y -80 )
) {
s7++;
if (s7 == 5) {
alert('游戏结束:黑棋胜利');
mm = true;
break;
}
}
if ((l1[s4].x == l1[l3].x + 20 && l1[s4].y == l1[l3].y - 20 ) || (l1[s4].x == l1[l3].x + 40 &&
l1[s4].y == l1[l3].y - 40 )
|| (l1[s4].x == l1[l3].x + 60 && l1[s4].y == l1[l3].y - 60 ) || (l1[s4].x == l1[l3].x + 80
&& l1[s4].y == l1[l3].y - 80 )
) {
s11++;
if (s11 == 5) {
alert('游戏结束:黑棋胜利');
mm = true;
break;
}
}
if (mm==true) {
break;
}
}
for (var l3 = 0; l3 < s3; l3++) {
if (l2[s4].y == l2[l3].y) {
if (l2[s4].x == l2[l3].x - 20 || l2[s4].x == l2[l3].x - 40
|| l2[s4].x == l2[l3].x - 60 || l2[s4].x == l2[l3].x - 80
) {
s8++;
if (s8 == 5) {
alert('游戏结束:白棋胜利');
mm = true;
break;
}
}
}
if (l2[s4].x == l2[l3].x) {
if (l2[s4].y == l2[l3].y - 20 || l2[s4].y == l2[l3].y - 40
|| l2[s4].y == l2[l3].y - 60 || l2[s4].y == l2[l3].y - 80
) {
s9++;
if (s9 == 5) {
alert('游戏结束:白棋胜利');
mm = true;
break;
}
}
}
if ((l2[s4].x == l2[l3].x - 20 && l2[s4].y == l2[l3].y - 20 ) || (l2[s4].x == l2[l3].x -40 &&
l2[s4].y == l2[l3].y - 40 )
|| (l2[s4].x == l2[l3].x - 60 && l2[s4].y == l2[l3].y - 60 ) || (l2[s4].x == l2[l3].x - 80
&& l2[s4].y == l2[l3].y -80 )
) {
s10++;
if (s10 == 5) {
alert('游戏结束:白棋胜利');
mm = true;
break;
}
}
if ((l2[s4].x == l2[l3].x + 20 && l2[s4].y == l2[l3].y - 20 ) || (l2[s4].x == l2[l3].x + 40 &&
l2[s4].y == l2[l3].y - 40 )
|| (l2[s4].x == l2[l3].x + 60 && l2[s4].y == l2[l3].y - 60 ) || (l2[s4].x == l2[l3].x + 80
&& l2[s4].y == l2[l3].y - 80 )
) {
s12++;
if (s12 == 5) {
alert(1);
alert('游戏结束:白棋胜利');
mm = true;
break;
}
}
}
if (mm==true) {
break;
}
}
}
}
}
}
</script>