当前位置： 首页 > news >正文

使用js和canvas实现简单的网页贪吃蛇小游戏

news 2025/8/8 17:12:52

玩法介绍

点击开始游戏后，使用键盘上的↑↓←→控制移动，吃到食物增加长度，碰到墙壁或碰到自身就游戏结束
在这里插入图片描述
在这里插入图片描述

代码实现

代码比较简单，直接阅读注释即可，复制即用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Snake Game</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;position: absolute;top: 0;left: 0;z-index: 1;background-color: #000;}.start-screen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);color: white;text-align: center;z-index: 2;display: flex;align-items: center;justify-content: center;font-size: 24px;}button {font-size: 24px;padding: 10px 20px;cursor: pointer;}</style>
</head>
<body><div class="start-screen"><h1>Snake Game</h1><button id="startButton">Start Game</button></div><canvas id="gameCanvas" width="800" height="600"></canvas><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');// 设置 Canvas 为全屏canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 方块大小const blockSize = 20;// 游戏状态let snake = [{ x: 100, y: 100 }];let food = { x: 200, y: 200 };let direction = 'right';let score = 0;let isRunning = false;// 游戏速度const speed = 100;// 绘制蛇function drawSnake() {ctx.fillStyle = '#0f0';snake.forEach(segment => {ctx.fillRect(segment.x, segment.y, blockSize, blockSize);});}// 绘制食物function drawFood() {ctx.fillStyle = '#f00';ctx.fillRect(food.x, food.y, blockSize, blockSize);}// 检查碰撞function checkCollision() {// 检查蛇是否撞墙if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {alert('Game Over!');isRunning = false;return;}// 检查蛇是否撞到自己for (let i = 1; i < snake.length; i++) {if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {alert('Game Over!');isRunning = false;return;}}// 检查蛇是否吃到食物if (snake[0].x === food.x && snake[0].y === food.y) {score++;placeFood();} else {snake.pop();}}// 放置新的食物function placeFood() {food = {x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize,y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize};}// 更新游戏状态function update() {if (!isRunning) return;let newX = snake[0].x;let newY = snake[0].y;if (direction === 'left') newX -= blockSize;if (direction === 'right') newX += blockSize;if (direction === 'up') newY -= blockSize;if (direction === 'down') newY += blockSize;snake.unshift({ x: newX, y: newY });checkCollision();}// 渲染游戏画面function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);drawSnake();drawFood();}// 游戏主循环function gameLoop() {update();draw();setTimeout(gameLoop, speed);}// 键盘事件function handleKeyPress(event) {if (event.key === 'ArrowLeft' && direction !== 'right') direction = 'left';if (event.key === 'ArrowRight' && direction !== 'left') direction = 'right';if (event.key === 'ArrowUp' && direction !== 'down') direction = 'up';if (event.key === 'ArrowDown' && direction !== 'up') direction = 'down';}// 开始按钮事件document.getElementById('startButton').addEventListener('click', () => {const startScreen = document.querySelector('.start-screen');startScreen.style.display = 'none';// 添加键盘事件监听document.addEventListener('keydown', handleKeyPress);isRunning = true;placeFood();gameLoop();});// 游戏结束时移除键盘事件监听window.addEventListener('beforeunload', () => {document.removeEventListener('keydown', handleKeyPress);});</script>
</body>
</html>

相关文章：

使用js和canvas实现简单的网页贪吃蛇小游戏

玩法介绍 点击开始游戏后&#xff0c;使用键盘上的↑↓←→控制移动&#xff0c;吃到食物增加长度&#xff0c;碰到墙壁或碰到自身就游戏结束 代码实现 代码比较简单&#xff0c;直接阅读注释即可&#xff0c;复制即用 <!DOCTYPE html> <html lang"en"…...

编程日记 2024/10/14 10:32:25

Kafka SASL/PLAIN认证模式

Kafka 认证模式命令使用示例 创建Topic 指定用户创建 [rootkafka01 kraft]# /usr/local/kafka3.5-sasl-data/bin/kafka-topics.sh --bootstrap-server x.x.x.11:9092 --create --topic fkaaa35 --replication-factor 3 --partitions 3 --command-config /usr/local/kafka3.…...

编程日记 2024/10/14 10:29:22

苹果AI科学家研究证明基于LLM的模型存在缺陷 因为它们无法推理

苹果公司人工智能科学家的一篇新论文发现&#xff0c;基于大型语言模型的引擎&#xff08;如 Meta 和 OpenAI 的引擎&#xff09;仍然缺乏基本的推理能力。该小组提出了一个新的基准–GSM-Symbolic&#xff0c;以帮助其他人衡量各种大型语言模型&#xff08;LLM&#xff09;的推…...

编程日记 2024/10/14 10:25:17

鸿蒙NEXT开发-页面路由（基于最新api12稳定版）

注意&#xff1a;博主有个鸿蒙专栏&#xff0c;里面从上到下有关于鸿蒙next的教学文档&#xff0c;大家感兴趣可以学习下 如果大家觉得博主文章写的好的话&#xff0c;可以点下关注&#xff0c;博主会一直更新鸿蒙next相关知识 专栏地址: https://blog.csdn.net/qq_56760790/…...

编程日记 2024/10/14 10:15:04

asp.net Core MVC 内容协商

内容协商 内容协商是Asp.Net Core 控制器的一项功能&#xff0c;而Asp.Net MVC5 控制器并不支持它。 引入内容协商是为了满足 Web API 框架的需要。 在 Asp.net Core 中&#xff0c;内容协商 被内置到引擎中&#xff0c;供开发人员使用。 顾名思义&#xff0c;内容协商指的是…...

编程日记 2024/10/14 10:14:02

智能EDA小白从0开始 —— DAY10 Yosys

Yosys 概述 工作原理 Yosys的工作原理深入来讲&#xff0c;是一个复杂但有序的硬件设计自动化流程&#xff0c;其核心在于将高级硬件描述语言&#xff08;HDL&#xff09;如Verilog或VHDL编写的代码&#xff0c;通过一系列精细的步骤转换为门级网表。这一流程首先涉及对HDL代…...

编程日记 2024/10/14 10:12:00

《OpenCV计算机视觉》—— 人脸检测

文章目录 一、人脸检测流程介绍二、用于人脸检测的关键方法1.加载分类器&#xff08;cv2.CascadeClassifier()&#xff09;2.检测图像中的人脸&#xff08;cv2.CascadeClassifier.detectMultiscale()&#xff09; 三、代码实现 一、人脸检测流程介绍 下面是一张含有多个人脸的…...

编程日记 2024/10/14 10:08:57

【unity框架开发12】从零手搓unity存档存储数据持久化系统，实现对存档的创建，获取，保存，加载，删除，缓存，加密，支持多存档

文章目录 前言一、Unity对Json数据的操作方法一、JsonUtility方法二、Newtonsoft 二、持久化的数据路径三、数据加密/解密加密方法解密方法 四、条件编译指令限制仅在编辑器模式下进行加密/解密四、数据持久化管理器1、存档工具类2、一个存档数据3、存档系统数据类4、数据存档存…...

编程日记 2024/10/14 10:04:53

YOLOv11进行图像与视频的目标检测

一、AI应用系统实战项目 项目名称项目名称1.人脸识别与管理系统2.车牌识别与管理系统...

编程日记 2024/10/14 10:01:49

SpinalHDL之错误集（一）

本文作为SpinalHDL学习笔记第七十六篇&#xff0c;作为错误集使用&#xff0c;类似高中生的错题集&#xff0c;记录使用SpinalHDL过程中遇到的问题&#xff0c;小到语法错误、版本兼容问题&#xff0c;大到SpinalHDL库函数错误等等&#xff0c;持续更新。 SpinalHDL学习笔记总…...

编程日记 2024/10/14 9:57:43

【arcgis】ArcGIS中如何避免标注压盖要素

ArcGIS中如何避免标注压盖要素 在制图工作中&#xff0c;标注&#xff08;Label&#xff09;是传达地理信息的重要方式。然而&#xff0c;在复杂的地图上&#xff0c;标注容易出现压盖要素的情况&#xff0c;影响地图的美观性和信息的准确传达。ArcGIS提供了Maplex标注引擎&am…...

编程日记 2024/10/14 9:56:42

数通--3

一、动态路由 内部 路由器之间要互联互通&#xff0c;必须遵循相同的协议 企业内部用 IGP&#xff0c;企业之间用BGP RIP&#xff08;已淘汰&#xff0c;不考&#xff09; 距离就是长短&#xff0c;矢量就是方向&#xff0c;即路由的出接口 一台路由器 A 配好RIP&#xff0c;…...

编程日记 2024/10/14 9:54:39

SpringBoot基础(五)：集成JUnit5

SpringBoot基础系列文章 SpringBoot基础(一)&#xff1a;快速入门 SpringBoot基础(二)&#xff1a;配置文件详解 SpringBoot基础(三)&#xff1a;Logback日志 SpringBoot基础(四)&#xff1a;bean的多种加载方式 SpringBoot基础(五)&#xff1a;集成JUnit5 目录 一、JUnit…...

编程日记 2024/10/14 9:52:36

正点原子学习笔记之汇编LED驱动实验

1 汇编LED原理分析 为什么要写汇编     需要用汇编初始化一些SOC外设     使用汇编初始化DDR、I.MX6U不需要     设置sp指针&#xff0c;一般指向DDR&#xff0c;设置好C语言运行环境 1.1 LED硬件分析 可以看到LED灯一端接高电平&#xff0c;一端连接了GPIO_3上面…...

编程日记 2024/10/14 9:50:35

网络学习第二篇

认识网关和路由器 这里大家先了解一下什么三层设备。 三层设备 三层设备是指在网络架构中能够工作在第三层&#xff08;网络层&#xff09;的设备&#xff0c;通常包括三层交换机和路由器。这些设备可以根据IP地址进行数据包的转发和路由选择&#xff0c;从而在不同的网络之间…...

编程日记 2024/10/14 9:48:32

一些小结汇总

1.常用浏览器及对应内核 Safari浏览器&#xff08;苹果浏览器&#xff09;:Webkit内核 Google浏览器&#xff1a;Blink内核 Firefox&#xff1a;Gecko内核 Edge浏览器&#xff1a;Chromium内核 IE浏览器&#xff1a;Trident内核 2.10个块标签和10个行标签 …...

编程日记 2024/10/14 9:42:25

20240720 科大讯飞 笔试

文章目录 1、选择题1.11.21.31.41.51.61.71.81.91.101.111.122、编程题2.12.22.33、选择题（Linux 选做）3.13.23.34、选择题（C++ 选做）4.14.24.34.44.54.64.75、选择题（数据库选做）5.15.25.3岗位：嵌入式开发工程师 题型： 必做：12 道选择题，3 道编程题 选做：Linux（3…...

编程日记 2024/10/14 9:41:24

【AIGC】寻找ChatGPT最佳推理步骤：CoT思维链技术的探索与应用

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;CoT思维链概述&#x1f4af;CoT思维链在大型语言模型中的应用&#x1f4af;CoT思维链改变对模型推理能力的理解和改进方式多样化应用场景挑战与未来发展总结 &#x1f4a…...

编程日记 2024/10/14 9:39:22

一、安装VMWARE和CentOS

一、安装VMware 1、基本说明 学习Linux需要一个环境&#xff0c;我们需要创建一个虚拟机&#xff0c;然后在虚拟机上安装一个Centos系统来学习 先安装virtual machine 15.5再安装Linux(CentOS 7.6/centos8.1)原理示意图 2、vmware15.5下载 官方地址:https://www.vmware.com/…...

编程日记 2024/10/14 9:38:21

岩石分类检测数据集 4700张 岩石检测 带标注 voc yolo 9类

岩石分类检测数据集 4700张 岩石检测 带标注 voc yolo 9类 岩石分类检测数据集 (Rock Classification and Detection Dataset) 描述: 本数据集旨在支持对不同类型的岩石进行自动分类和检测&#xff0c;特别适用于地质勘探、矿物识别、环境监测等领域。通过使用该数据集训练的模…...

编程日记 2024/10/14 9:31:12

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/8/8 8:47:16

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/8/4 4:01:31

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/7/8 22:45:33

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/8/5 22:33:40

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/7/12 5:42:38

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/8/7 20:44:32

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/8/1 7:53:11

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/8/4 7:43:04

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/7/12 0:11:18

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2025/8/4 13:57:53