「canvas」用 100 多行 js 代码实现贪吃蛇

最新推荐文章于 2024-08-11 18:40:36 发布

K_null.

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量539

点赞数

本文链接：https://blog.csdn.net/m0_56732260/article/details/121802994

版权

当做练习还是可以的源码奉上

HTML

CSS

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>贪吃蛇</title>
  <!-- 引入css -->
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <canvas id="canvas"></canvas>

  <!-- 引入js -->
  <script src="./js/main.js"></script>
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #222;
}

#canvas {
  display: block;
  margin: 50px auto;
  filter: drop-shadow(0 0 6px rgb(207, 37, 179));
}

JS

const canvas = document.querySelector('#canvas')
// 设置画布的长和宽
canvas.width = 600
canvas.height = 600
// 创建2d画布
let ctx = canvas.getContext('2d')
// 创建一个默认的方向
let head = {
  x: 1,
  y: 0
}
// 蛇
let snake = []
// 蛋
let egg = {}

function newGame() {
  // 每次先把蛇清空
  snake = []
  // 默认3个身子
  for (let i = 0; i < 3; i++) {
    // 默认从3，3个格子出发
    snake.push({
      x: 3,
      y: 3
    })
  }
  // 创建蛋的默认位置
  egg = {
    x: parseInt(Math.random() * 20),
    y: parseInt(Math.random() * 20)
  }
}

function show() {
  // 每次调用都要清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // 格子的颜色
  ctx.fillStyle = 'rgba(241, 242, 246,0.8)'
  // 画格子
  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 20; j++) {
      ctx.fillRect(i * 30, j * 30, 28, 28)
    }
  }
  // 创建蛇的颜色
  ctx.fillStyle = 'blue'
  // 渲染蛇
  for (let i = 0; i < snake.length; i++) {
    ctx.fillRect(snake[i].x * 30, snake[i].y * 30, 28, 28)
    // 判断蛇是否撞到自己
    if (snake[0].x === snake[i].x && snake[0].y === snake[i].y && i !== 0) {
      alert('你撞到自己了，游戏结束')
      newGame()
    }
  }
  // 蛋的颜色
  ctx.fillStyle = 'red'
  // 渲染蛋
  ctx.fillRect(egg.x * 30, egg.y * 30, 28, 28)
}

function move() {
  // 定义一个新的蛇头
  let newHead = {}
  // 判断蛇的x坐标
  switch (snake[0].x + head.x) {
    case 20:
      newHead.x = -1
      break;
    case -1:
      newHead.x = 19
      break;
    default:
      newHead.x = snake[0].x + head.x
      break;
  }
  // 判断蛇的y坐标
  switch (snake[0].y + head.y) {
    case 20:
      newHead.y = -1
      break;
    case -1:
      newHead.y = 19
      break;
    default:
      newHead.y = snake[0].y + head.y
      break;
  }
  // 添加到数组里面
  snake.unshift(newHead)
  // 判断蛇是否吃到蛋
  if (egg.x === snake[0].x && egg.y === snake[0].y) {
    // 重新更新蛋的坐标
    egg = {
      x: parseInt(Math.random() * 20),
      y: parseInt(Math.random() * 20)
    }
    // 如果吃到了就添加一个 underfund
    snake.push(snake[-1])
  }
  // 删除尾部的坐标
  snake.pop()

  show()
}

window.addEventListener('keydown', e => {
  if ((e.key == 'w' || e.key == 'ArrowUp') && head.y != 1) {
    head.x = 0
    head.y = -1
  } else if ((e.key == 'd' || e.key == 'ArrowRight') && head.x != -1) {
    head.x = 1
    head.y = 0
  } else if ((e.key == 's' || e.key == 'ArrowDown') && head.y != -1) {
    head.x = 0
    head.y = 1
  } else if ((e.key == 'a' || e.key == 'ArrowLeft') && head.x != 1) {
    head.x = -1
    head.y = 0
  }
})

newGame()

setInterval(() => {
  move()
}, 200)