Как сделать так чтобы змейка не образовала бесконечную линию

Question

Я создавал игру змейка. При написании кода столкнулся с проблемой. Змея образовала бескончную линию. Написал snake.pop() для удаления последнего элемента массива но ничего не вышло. Вот код:

var canvas        =document.getElementById('game')
var ctx           =canvas.getContext('2d')
var box           =10
var snake         =[]
var px            =(canvas.width/2)
var py            =(canvas.height/2)
var dir           ='right'
var maxCell       =10

function direction(){
  document.addEventListener("keydown",function(e){
    if(e.keyCode==37){
      dir='left'
      console.log('left')
    }
    else if(e.keyCode==38){
      dir='up'
      console.log('up')
    }
    else if(e.keyCode==39){
      dir='right'
      console.log('right')
    }
    else if(e.keyCode==40){
      dir='down'
      console.log('down')
    }
  })

  if(dir=='right' && dir!=='left'){px+=box }
  else if(dir=='left' && dir!=='right'){px-=box}
  else if(dir=='up' && dir!=='down'){py-=box}
  else if(dir=='down' &&dir!=='up'){py+=box}
}
function Snake(){
  direction()
  snake[0]={
    x:px,
    y:py,
  }
  if(px>canvas.width){
    px=0
  }
  else if(px<0){
    px=canvas.width
  }
  if(py>canvas.height){
    py=0
  }
  else if(py<0){
    py=canvas.height
  }
  snake.forEach( function(element, index) {
    ctx.fillRect(px,py,box,box)
    if(index==0){
      ctx.fllStyle='red'
      ctx.fillRect(px,py,box,box)
    }
  });
  if(snake.length>maxCell){
    snake.shift()
  }
}
function loop(){
  setInterval(()=>{
    Snake()
  },1000/60)
}

loop()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas{
        border: 1px solid #000; /*elevate our canvas and add shadow*/
      }
    </style>
  </head>
  <body>
    <canvas id="game" width="450" height="450">
    </canvas>
    <script src="./snake.js"></script>
  </body>
</html>

Answer 1

Необходимо очищать canvas перед отрисовкой следующего положения ctx.clearRect(0, 0, canvas.width, canvas.height). Слушатель document.addEventListener навешивать вне функции direction()..

var canvas = document.getElementById('game')
var ctx = canvas.getContext('2d')
var box = 10
var snake = []
var px = (canvas.width / 2)
var py = (canvas.height / 2)
var dir = 'right'
var maxCell = 10
var can = canvas.getBoundingClientRect()

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 37) {
    dir = 'left'
    //console.log('left')
  } else if (e.keyCode == 38) {
    dir = 'up'
    //console.log('up')
  } else if (e.keyCode == 39) {
    dir = 'right'
    //console.log('right')
  } else if (e.keyCode == 40) {
    dir = 'down'
    //console.log('down')
  }
})

function direction() {
  if (dir == 'right') {
    px += box;
  } else if (dir == 'left') {
    px -= box;
  } else if (dir == 'up') {
    py -= box;
  } else if (dir == 'down') {
    py += box;
  }
}

function Snake() {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  direction();
  snake[0] = {
    x: px,
    y: py,
  }
  if (px >= canvas.width) {
    px = 0
  } else if (px < 0) {
    px = canvas.width
  }
  if (py >= canvas.height) {
    py = 0
  } else if (py < 0) {
    py = canvas.height
  }
  snake.forEach(function(element, index) {
    ctx.fillRect(px, py, box, box)
    if (index == 0) {
      ctx.fllStyle = 'red'
      ctx.fillRect(px, py, box, box)
    }
  });
  if (snake.length > maxCell) {
    snake.shift()
  }

}

function loop() {
  setInterval(() => {
    Snake()
  }, 1000 / 60)
}

loop()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    canvas {
      border: 1px solid #000;
      /*elevate our canvas and add shadow*/
    }
  </style>
</head>

<body>
  <canvas id="game" width="450" height="450">
    </canvas>
  <script src="./snake.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как сделать так чтобы змейка не образовала бесконечную линию

Ответы (1 шт):