html


<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Score: 0</p>
  <div style="margin-bottom: 10px;"><button>reset</button></div>
  <canvas width="400" height="400" style="border: 1px solid;"></canvas>
</body>
<script src="script.js"></script>
</html>

javscript

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const scoreElem = document.querySelector('p')
const reset = document.querySelector('button')
const mapWidth = canvas.width
const mapHeight = canvas.height
const speed = 100

let snakeDirection_x = 0, snakeDirection_y = 0
let food, snake
let score  = 0
let gameOver = false
let timer

class Food {
  constructor(position) {
    this.x = position.x
    this.y = position.y
    this.size = 20
  }
  draw() {
    ctx.fillStyle = 'greenyellow'
    ctx.fillRect(this.x, this.y, this.size, this.size)
  }
}

class Snake {
  constructor() {
    this.x = 40
    this.y = 0
    this.size = 20
    this.body = [ { x: this.x, y: this.y }]
  }
  draw() {
    ctx.fillStyle = 'red'
    this.body.forEach(body => {
      ctx.fillRect(body.x, body.y, this.size - 1, this.size - 1)
    });
    ctx.fillStyle = 'blue'
    ctx.fillRect(this.body[score].x, this.body[score].y, this.size-1,this.size-1)
  }
  move() {
    if(!snakeDirection_x && !snakeDirection_y) return false 
    this.x += snakeDirection_x
    this.y += snakeDirection_y
    console.log(this.x);
    this.body.shift()
    this.body.push({ x: this.x, y: this.y })
  }
}

setup()
function setup() {
  snake = new Snake()
  food = new Food(randomFoodPosition())
  update()
}

function checkEatFood() {
  if(snake.x === food.x && snake.y === food.y) {
    snake.body.unshift(food.x, food.y)
    snake.body.shift()
    food = new Food(randomFoodPosition())
    score += 1
    updateScore()
  }
}

function randomFoodPosition() {
  const x = Math.floor(Math.random() * (mapWidth / 20)) * 20
  const y = Math.floor(Math.random() * (mapWidth / 20)) * 20
  // 防止food与snake重合
  for (let i = 0; i < snake.body.length; i++) {
    const body = snake.body[i];
    if(body.x === x && body.y === y) {
      return randomFoodPosition()
    }
  }
  return {x,y}
}

function checkSnakeBorder() {
  const head = snake.body[score]
  if (head.x < 0) {
    snake.x = mapWidth
  }else if(head.x >= mapWidth) {
    snake.x = -20
  }else if(head.y < 0) {
    snake.y = mapHeight
  }else if(snake.y >= mapHeight) {
    snake.y = -20
  }
}

function checkSnakeHeadEatBody() {
  const head = snake.body[score]
  for (let i = score-1; i >= 0; i--) {
    const body = snake.body[i];
    if (head.x === body.x && head.y === body.y) {
      gameOver = true
    }
  }
}

function updateScore() {
  scoreElem.innerHTML = `Score: ${score}`
}

function update() {
  if(gameOver) return false
  ctx.clearRect(0, 0, mapWidth, mapHeight)
  food.draw()
  snake.move()
  snake.draw()
  checkEatFood()
  checkSnakeBorder()
  checkSnakeHeadEatBody()
  timer = setTimeout(update, speed);
}

window.addEventListener('keydown', keyDown)
const keyUp = 87
const keyRight = 68
const keyBottom = 83
const keyLeft = 65
let keyFlag = false
function keyDown(e) {
  // console.log(e.keyCode);
  switch (e.keyCode) {
    case keyUp:
      if(snakeDirection_y === 20 || keyFlag) return
      snakeDirection_x = 0
      snakeDirection_y = -20
      keyFlag = true
      setTimeout(() => {
        keyFlag = false
      }, speed);
      break;
    case keyRight:
      if(snakeDirection_x === -20 || keyFlag) return
      snakeDirection_x = 20
      snakeDirection_y = 0
      keyFlag = true
      setTimeout(() => {
        keyFlag = false
      }, speed);
      break;
    case keyBottom:
      if(snakeDirection_y === -20 || keyFlag) return
      snakeDirection_x = 0
      snakeDirection_y = 20
      keyFlag = true
      setTimeout(() => {
        keyFlag = false
      }, speed);
      break;
    case keyLeft:
      if(snakeDirection_x === 20 || keyFlag) return
      snakeDirection_x = -20
      snakeDirection_y = 0
      keyFlag = true
      setTimeout(() => {
        keyFlag = false
      }, speed);
      break;
    default:
      break;
  }
}

reset.onclick = () => {
  clearTimeout(timer)
  score = 0
  updateScore()
  gameOver = false
  snakeDirection_x = 0
  snakeDirection_y = 0
  setup()
}
版权声明：本文为d浩然原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/codehaoran/p/16858984.html