<!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 canChangDirection = true
// 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, gridSize - 2, gridSize - 2)
}
function gameOver() {
clearInterval(snakeMoveTimer)
document.removeEventListener('keydown', handleKeyDown)
}
//绘制食物
/* 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))
canChangDirection = true
}
function handleKeyDown(event) {
if (!canChangDirection) {
return
}
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
}
}
function init() {
drawBoard()
snakeMoveTimer = setInterval(snakeMove, 200)
createFood()
document.addEventListener('keydown', handleKeyDown)
}
init()
</script>
<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 canChangDirection = true
// 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, gridSize - 2, gridSize - 2)
}
function gameOver() {
clearInterval(snakeMoveTimer)
document.removeEventListener('keydown', handleKeyDown)
}
//绘制食物
/* 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))
canChangDirection = true
}
function handleKeyDown(event) {
if (!canChangDirection) {
return
}
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
}
}
function init() {
drawBoard()
snakeMoveTimer = setInterval(snakeMove, 200)
createFood()
document.addEventListener('keydown', handleKeyDown)
}
init()
</script>
