var chessBoard=[];
var me=true;
for (var i = 0; i < 15; i++) {
chessBoard[i]=[];
for (var j = 0; j < chessBoard.length; j++) {
chessBoard[i][j]=0;
};
};
var chess=document.getElementById('chess');
var context=chess.getContext('2d');
context.strokeStyle="#bfbfbf";
var logo=new Image();
logo.src="images/logo.png";
logo.onload=function(){
context.drawImage(logo,0,0,450,450);
drawChessBoard();
}
var drawChessBoard=function(){
for (var i = 0; i < 15; i++) {
context.moveTo(15+i*30,15);
context.lineTo(15+i*30,435);
context.stroke();
context.moveTo(15,15+i*30);
context.lineTo(435,15+i*30);
context.stroke();
};
}
var oneStep=function(i,j,me){
context.beginPath();
context.arc(15+i*30,15+j*30,13,0,2*Math.PI);
context.closePath();
var gradient=context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);
if(me){
gradient.addColorStop(0,"#0a0a0a");
gradient.addColorStop(1,"#636766");
}else{
gradient.addColorStop(0,"#d1d1d1");
gradient.addColorStop(1,"#f9f9f9");
}
context.fillStyle=gradient;
context.fill();
}
chess.onclick=function(e){
var x=e.offsetX;
var y=e.offsetY;
var i=Math.floor(x/30);
var j=Math.floor(y/30);
if(chessBoard[i][j]==0){
oneStep(i,j,me);
if(me){
chessBoard[i][j]=1;
}else{
chessBoard[i][j]=2;
}
me=!me;
}
}
1 回答
已采纳
十二维生物
TA贡献13条经验 获得超9个赞
我也是按着教程敲的，没什么问题你看看吧
var chess = document.getElementById("chess");
var context = chess.getContext('2d');
var me = true;
var cheseBoard = [];
context.strokeStyle = "#bfbfbf"
for (var i = 0; i < 15; i++) {
cheseBoard[i] = [];
for (j = 0; j < 15; j++) {
cheseBoard[i][j] = 0;
}
}
for (var i = 0; i < 15; i++) {
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 435);
context.stroke();
context.moveTo(15, 15 + i * 30);
context.lineTo(435, 15 + i * 30);
context.stroke();
}
var oneStep = function(i, j, me) {
context.beginPath();
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
context.closePath();
var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 50, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
if (me) {
gradient.addColorStop(0, "#0a0a0a");
gradient.addColorStop(1, "#636766");
} else {
gradient.addColorStop(0, "#d1d1d1");
gradient.addColorStop(1, "#f9f9f9");
}
context.fillStyle = gradient;
context.fill();
context.stroke();
}
chess.onclick = function(event) {
var x = event.offsetX;
var y = event.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
if (cheseBoard[i][j] == 0) {
oneStep(i, j, me);
if (me) {
cheseBoard[i][j] = 1;
} else {
cheseBoard[i][j] = 2;
}
me = !me;
}
}添加回答
举报
0/150
提交
取消