画布没有出现在屏幕上

时间:2021-07-21 23:41:42

标签: html canvas html5-canvas

链接地址与项目代码:

`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 做了一个贪吃蛇游戏,但该项目不起作用。我检查了我的代码,但找不到解决方案。你能帮我吗?

0 个答案:

没有答案