html五子棋游戏制作原理,html 五子棋游戏页面奔溃

1.只能下21颗棋子,然后无法增加棋子,不久后页面奔溃

2.代码:

*{

margin: 0px;

}

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.οnlοad=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;

}

}

}

}

}

}