链接地址与项目代码:
`https://codepen.io/BarisKarapelit/pen/PomJPMb`
<canvas id="game" width="400" height="400"></canvas>
<script>
class SnakeGame{
constructor()
{
this.canvas= document.getElementById('game');
this.context = this.canvas.getContext('2d');
document.addEventListener('keydown',this.onKeyPress.bind(this));
}
init()
{
this.positionX =this.positionY=10;
this.appleX=this.positionY=5;
this.tailSize=5;
this.trail=[];
thisçgridSize=this.tileCount=20;
this.velocityX=this.velocityY=0;
this.timer=setInterval(this.loop.bind(this),1000/15);
}
reset()
{
clearInterval(this.timer);
this.init();
}
loop()
{
this.update();
this.draw();
}
}
update()
{
this.positionX += this.velocityX;
this.positionY += this.velocityY;
if(this.positionX <0)
{
this.positionX=this.tileCount-1;
}
if(this.positionY <0)
{
this.positionY=this.tileCount-1;
}
if(this.positionX > this.tileCount-1)
{
this.positionX=0;
}
if(this.positionY > this.tileCount-1)
{
this.positioYX=0;
}
this.trail.forEach( t =>
if(this.positionX === t.positionX && this.positionY===t.positionY)
{
this.reset();
});
this.trail.push({positionX: this.positionX, positionY: this.positionY});
while(this.trail.length > this.tailSize)
{
this.trail.shift();
}
if(this.appleX===this.positionX && this.appleY === this.positionY)
{
this.tailSize++;
this.appleX=Math.floor(Math.random()*this.tileCount);
this.appleY=Math.floor(Math.random()*this.tileCount);
}
}
draw()
{
this.context.fillStyle='black';
this.context.fillRect(0,0, this.canvas.width, this.canvas.heigth);
this.context.fillStyle='white';
this.context.font='20px Arial';
this.context.fillText(this.tailSize-5, 20, 40);
this.trail.forEach(t => {
this.contetxt.fillRect(t.positinX*this.gridSize, t.positionY*this.gridSize, this.gridSize-5, this.gridSize-5);
});
this.context.fillStyle ='pink';
this.contetxt.fillRect(this.appleX*this.gridSize, this.appleY*this.gridSize, this.gridSize-5, this.gridSize-5);
}
onKeyPress(e)
{
if(e.keyCode ===37 && this.velocityX !== 1)
{
this.velocityX = -1;
this.velocityY =0;
}
if(e.keyCode===38 && this.velocityY !== 1 )
{
this.velocityX = 0;
this.velocityY = -1;
}
if(e.keyCode===39 && this.velocityX !== -1 )
{
this.velocityX = 1;
this.velocityY = 0;
}
if(e.keyCode===4 && this.velocityY !== -1 )
{
this.velocityX = 0;
this.velocityY = 1;
}
}
const game =new SnakeGame();
window.onload=() => game.init();
</script>
错误:
<块引用>{ "message": "Uncaught SyntaxError: Unexpected token 'if'",
“文件名”:“https://stacksnippets.net/js”,“lineno”:65,“colno”:
6 }
我用 Canvas 做了一个贪吃蛇游戏,但该项目不起作用。我检查了我的代码,但找不到解决方案。你能帮我吗?