<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>画布canvas</h1>
<canvas id="gameCanvas" width="600" height="600" style="">
您的浏览器版本过低，请更新后再试
</canvas>
</body>
</html>
<script>
const gameCanvas = document.getElementById("gameCanvas")//声明变量
const ctx = gameCanvas.getContext("2d")//获取canvas上下文环境，可以理解成获取了canvas功能
const gridSize = 30//方块大小
const bgColor = "#ddbb80", snakeColor = "#3333ff", foodColor = "#00ff00"
//背景颜色 蛇的颜色 食物的颜
let food
let direction = 1
const snakeArray = [45, 44, 43] //蛇初始位置
//snake移动
let snakeMoveTimer = null
// let canChangeDirection = true
/* //绘制一条线
ctx.beginPath()//开始绘制
ctx.moveTo(0,20)//把笔移动到这个点
ctx.lineTo(600,20)//画线到这个点
ctx.stroke()//动手画*/
function drawBoard(){
//绘制一个长方形
ctx.fillStyle = bgColor
ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height) //在0，0这个点，向右向下绘制一个长方形，宽度为width，height
//在画布上画网格
for (let x = 0; x <= gameCanvas.width; x += gridSize) {
ctx.beginPath()
ctx.moveTo(0, x)
ctx.lineTo(600, x)
ctx.stroke()
}//横线
for (let y = 0; y <= gameCanvas.height; y += gridSize) {
ctx.beginPath()
ctx.moveTo(y, 0)
ctx.lineTo(y, 600)
ctx.stroke()
}//竖线
}
function drawSquare(color, number) {
ctx.fillStyle = color
ctx.fillRect(number % (gameCanvas.width / gridSize) * gridSize + 1, Math.floor(number / (gameCanvas.width / gridSize)) * gridSize + 1, 30 - 2, 30 - 2)
}
function gameOver(){
clearInterval(snakeMoveTimer)
onkeydown=null
}
//绘制食物
/* let food
do {
food = Math.floor(Math.random() * gameCanvas.width / gridSize * gameCanvas.height / gridSize)
} while (snakeArray.filter(value => value === food).length > 0)//生成了新数组，导致内存浪费，不建议使用*/
/* let food;
do {
food = Math.floor(Math.random() * (gameCanvas.width / gridSize) * (gameCanvas.height / gridSize));
} while (snakeArray.some(value => value === food))//同上，但不生成新数组*/
function createFood() {
do {
food = Math.floor(Math.random() * (gameCanvas.width / gridSize) * (gameCanvas.height / gridSize));
} while (snakeArray.find(value => value === food))//同上
drawSquare(foodColor, food)
}
function snakeMove() {
const next = snakeArray[0] + direction
if (next < 0 || next > 399 || (snakeArray[0] % 20 === 19 && next % 20 === 0) || (snakeArray[0] % 20 === 0 && next % 20 === 19) ||
snakeArray.find(value => value === next)) {
return gameOver()
}
snakeArray.unshift(next)
let deleteSnakeItem
if (food !== next) deleteSnakeItem = snakeArray.pop()
else createFood()
drawSquare(bgColor, deleteSnakeItem)
snakeArray.forEach(value => drawSquare(snakeColor, value))
}
function init(){
drawBoard()
snakeMoveTimer=setInterval(snakeMove,200)
createFood()
//判断蛇与生成的食物是否重叠，如果当前位置和生成的食物重叠，就继续生成新的食物
onkeydown = function (event) {
//通过event触发键盘事件使蛇移动. 37,38,39,40分别代表左,上,右,下
console.log(event.keyCode)
if (event.keyCode === 37&&direction!==1) {
return direction = -1
}
if (event.keyCode === 38&&direction!==20) {
return direction = -20
}
if (event.keyCode === 39&&direction!==-1) {
return direction = 1
}
if (event.keyCode === 40&&direction!==-20) {
return direction = 20
}
}
}
init()
</script>