snake2.js

<title>hello!!</title>
<canvas
name=canvas 
width=300 height=300 style="border: solid 2px red">

</canvas>
<script>

canvas = document.body.children[0]
context = canvas.getContext('2d')
context.scale(10, 10)

snake = [ 
  [0, 1],
  [0, 2],
  [0, 3],
  [1, 3],
  [1, 4]
]

keyboardState = [ 1, 0 ]

function updateLoop() {
  tail = snake.pop()
  head = snake[0]
  console.log(snake)
  tail[0] = head[0] + keyboardState[0]
  tail[1] = head[1] + keyboardState[1]
  snake.unshift(tail)
  draw()
}

function draw() {
  context.clearRect(0,0, 300, 300)
  snake.forEach(function ([ x, y ]) {
    context.fillRect(x, y, 1, 1)
  })
}


</script>

snake3.js

<title>hello!!</title>
<canvas
name=canvas 
width=240 height=320 style="border: solid 2px red">

</canvas>
<script>

canvas = document.body.children[0]
context = canvas.getContext('2d')
context.scale(10, 10)

document.body.onkeyup = function(e) {
  if (e.which == 38) {
    direction = [0, -1]
  } else if(e.which == 40) {
    direction = [0, 1]
  } else if(e.which == 39) {
    direction = [1, 0]
  } else if (e.which == 37) {
    direction = [-1, 0]
  }
  console.log('dsuadsjksdh', e)
}

snake = [ 
  [0, 1],
  [0, 2],
  [0, 3],
  [1, 3],
  [1, 4]
]

direction = [ 1, 0 ]

function updateLoop() {
  tail = snake.pop()
  head = snake[0]
  console.log(snake)
  tail[0] = head[0] + direction[0]
  tail[1] = head[1] + direction[1]
  snake.unshift(tail)
  draw()
}

function draw() {
  context.clearRect(0,0, 300, 300)
  snake.forEach(function ([ x, y ]) {
    context.fillRect(x, y, 1, 1)
  })
}


setInterval(updateLoop, 300)


</script>

snake4almostfinal.js

<title>hello!!</title>
<canvas
name=canvas 
width=240 height=320 style="border: solid 2px red">

</canvas>
<script>

canvas = document.body.children[0]
context = canvas.getContext('2d')
context.scale(10, 10)

document.body.onkeyup = function(e) {
  if (e.which == 38) {
    direction = [0, -1]
  } else if(e.which == 40) {
    direction = [0, 1]
  } else if(e.which == 39) {
    direction = [1, 0]
  } else if (e.which == 37) {
    direction = [-1, 0]
  }
  console.log('dsuadsjksdh', e)
}

snake = [ 
  [0, 1],
  [0, 2],
  [0, 3],
  [1, 3],
  [1, 4]
]

direction = [ 1, 0 ]
apple = [ 8, 3 ]

function updateLoop() {
  
  console.log(snake)
  snake.unshift([
    snake[0][0] + direction[0],
    snake[0][1] + direction[1]
  ])

  if (snake[0][0] == apple[0] && snake[0][1] == apple[1]) {
    apple = [ 
      (Math.random() * 20) | 0, 
      (Math.random() * 20) | 0
    ]
  } else {
    snake.pop()
  }

  for(i = 1; i< snake.length; i++) {
    if (snake[i][0] == snake[0][0] && snake[i][1] == snake[0][1]) {
      snake = [ [0, 1] ]
    }
  }

  draw()
}

function draw() {
  context.clearRect(0,0, 300, 300)

  context.fillStyle = "red"
  context.fillRect(apple[0], apple[1], 1, 1)

  context.fillStyle = "black"
  snake.forEach(function ([ x, y ]) {
    context.fillRect(x, y, 1, 1)
  })

  
}


setInterval(updateLoop, 300)


</script>