标签：gridSize 20 snakeArray food ctx 小游戏 简单 gameCanvas 贪吃蛇
<!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
/* //绘制一条线
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()
}
}
drawBoard()
//这段代码用于绘制网格，通过循环遍历画布的宽度和高度，依次绘制网格线。
const snakeArray = [45, 44, 43] //蛇初始位置
function drawSquare(color, number) {
ctx.fillStyle = color
ctx.fillRect(number % (gameCanvas.width / gridSize) * gridSize + 1, Math.floor(number / (gameCanvas.width / gridSize)) * gridSize + 1, gridSize - 2, gridSize - 2)
}
function gameOver(){
clearInterval(snakeMoveTimer)
onkeydown=null
}
//snake移动
const snakeMoveTimer = setInterval(() => {
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()
}0
snakeArray.unshift(next)
let deleteSnakeItem
if (food!==next) deleteSnakeItem = snakeArray.pop()
else createFood()
drawSquare(bgColor, deleteSnakeItem)
snakeArray.forEach(value => drawSquare(snakeColor, value))
},200)
/*这段代码使用setInterval定时器，每200毫秒更新一次蛇的位置。如果贪吃蛇与食物位置相同，就创建一个新的食物。
如果蛇吃到了食物，同时重新生成一个食物。*/
//绘制食物
/* 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)
}
// 通过do while循环随机生成一个位置，直到该位置不在蛇的身体中，然后使用drawSquare方法绘制食物。
createFood()
onkeydown = function (event) {
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
}
}
// 通过键盘事件，当按下键盘时改变蛇的移动方向。左箭头键对应的方向是 -1，上箭头键对应的方向是 -20，右箭头键对应的方向是 1，下箭头键对应的方向是 20。
</script>
标签：gridSize,
20,
snakeArray,
food,
ctx,
小游戏,
简单,
gameCanvas,
贪吃蛇
From： https://www.cnblogs.com/ckyjbd/p/17516439.html