首页 > 其他分享 >贪吃蛇小游戏

贪吃蛇小游戏

时间:2023-06-30 16:34:53浏览次数:36  
标签:gridSize snakeArray food ctx 小游戏 let 贪吃蛇 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
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>

标签:gridSize,snakeArray,food,ctx,小游戏,let,贪吃蛇,gameCanvas
From: https://www.cnblogs.com/kun030729/p/17517170.html

相关文章

  • 贪吃蛇游戏制作(附源码)
    CSS:部分*{margin:0;padding:0;}.wrap{width:600px;margin:0auto;position:relative;}p{position:absolute;left:73%;top:10%;}h1{text-align:center;margin-bottom:20px;}#score{text-a......
  • JavaScript实现Fly Bird小游戏
    1.分析页面结构,理清需求和功能游戏有三个界面,分别是开始界面,游戏界面和游戏结束界面。1.1开始界面 游戏的大背景上下移动的游戏标题和翅膀摆动的小鸟start按钮,点击进入游戏界面一直移动的地面1.2游戏界面显示越过障碍数量的计分器移动的障碍物,分别是上管道和下......
  • 简单的贪吃蛇小游戏
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><h1>画布canvas</h1><canvasid="gameCanvas"width="600"......
  • 小游戏——贪吃蛇案例
    一、案例目的 1、实现贪吃蛇游戏基本功能,屏幕上随机出现一个“食物”,称为豆子,上下左右控制“蛇”的移动,吃到“豆子”以后“蛇”的身体加长一点。2、“蛇”碰到边界或蛇头与蛇身相撞,蛇死亡,游戏结束。3、为游戏设计友好的交互界面;例如欢迎界面,游戏界面,游戏结束界面。要有开始键......
  • 贪吃蛇制作js
    <!DOCTYPEhtml><html><head><title>贪吃蛇游戏</title><style>#game-board{width:400px;height:400px;border:1pxsolid#000;position:relative;}.snake{width:20px;height:20......
  • 我制作的一个简单的跳棋小游戏
    我用虚幻5制作的简单的3D跳棋小游戏,可以本地多人对战以及和AI对战,已经上传到了itch.io。目前跳棋功能已经完善,其他棋类游戏留待以后加入。支持中英文。支持两种棋盘,支持经典玻璃弹珠和其他不透明弹珠。游戏网页链接......
  • 用Python写了一个「拥抱梅西」的小游戏
    大家好,欢迎来到Crossin的编程教室! 最近有个小伙儿因为在比赛中冲进场地拥抱梅西而出名了。 这种行为当然不可取,他也为此付出了代价。但要说我没有一丁点羡慕和佩服那是不可能的。于是,我也尬蹭一下这个热点,用Python写了一个「拥抱梅西」的小游戏。游戏效果是这样的:  游......
  • 数据结构和算法系列课程(02) --- 线性表和贪吃蛇
    线性结构是一种具有以下特点的结构:存在唯一一个被称为“第一个”的数据元素存在唯一一个被称为“最后一个”的数据元素除第一个元素之外,集合中的每个元素均有且仅有一个前驱除最后一个元素之外,集合中的每个元素均有且仅有一个后继那么,线性表、栈、队列、数组、字符串都可以......
  • 贪吃蛇小程序
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <title>Title</title></head><body><h1>画布canvas</h1><canvasid="gameCanvas"width="6......
  • Python实现猜拳小游戏的多种方式
    简介猜拳小游戏是一个经典的小游戏项目,也是初学者学习编程的必要练手题目之一。在Python中,我们可以使用多种方式来实现一个简单的猜拳小游戏。本文将依次介绍六种Python实现猜拳小游戏的方法,包括:使用if-else条件语句、使用random模块、使用字典映射胜负关系、for循环、whi......