課程
/前端開發(fā)
/JavaScript
/JS實現(xiàn)人機大戰(zhàn)之五子棋(UI篇)
為什么我的只有黑棋子,沒有白旗?。。z查不到錯誤啊
2016-03-28
源自:JS實現(xiàn)人機大戰(zhàn)之五子棋(UI篇) 2-5
正在回答
好吧,自己粗心了,點打成了逗號
var chessBoard=[];
var me=true;
for(var i=0;i<15;i++)
{
chessBoard[i]=[];
for(var j=0;j<15;j++)
chessBoard[i][j]=0;
}
var chess = document.getElementById('chess');
var context=chess.getContext('2d');
context.strokeStyle="#BFBFBF";
var logo=new Image();
logo.src="image/logo.jpg";
logo.onload=function(){
context.drawImage(logo,0,0,450,450);
drawChessBoard();
var drawChessBoard=function()
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);
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,"#000000");
? ? gradient.addColorStop(1,"#F9F9F9");
context,fileStyle=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;
context.moveTo(0,0);
context.LineTo(450,450);
舉報
利用js及canvas繪圖知識,實現(xiàn)程序界面編寫和交互邏輯處理
1 回答為啥不管輸入黑棋白棋,都是黑棋
1 回答其他都沒問題,就是點黑子還是成白子,點黑子成白子啊?。。。。。。?/p>
3 回答為什么我的棋子從來都是黑的,并且沒有漸變
1 回答為什么棋子全是黑的
4 回答canvas畫15條線最后一條顏色淺
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2016-03-28
好吧,自己粗心了,點打成了逗號
2016-03-28
var chessBoard=[];
var me=true;
for(var i=0;i<15;i++)
{
chessBoard[i]=[];
for(var j=0;j<15;j++)
{
chessBoard[i][j]=0;
}
}
var chess = document.getElementById('chess');
var context=chess.getContext('2d');
context.strokeStyle="#BFBFBF";
var logo=new Image();
logo.src="image/logo.jpg";
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,"#000000");
? ? gradient.addColorStop(1,"#F9F9F9");
}
context,fileStyle=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;
}
context.moveTo(0,0);
context.LineTo(450,450);
context.stroke();