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

html编写贪吃蛇页面小游戏（可以玩）

news 2026/2/8 16:22:06 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇小游戏</title><style>body {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;margin: 0;}#gameCanvas {border: 1px solid black;}.buttons {margin-top: 20px;}</style>
</head>
<body><canvas id="gameCanvas" width="400" height="400"></canvas><div class="buttons"><button id="startButton">开始游戏</button><button id="endButton" disabled>结束游戏</button></div><script>// 获取画布和上下文const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const boxSize = 20;let snake = [{x: 10, y: 10}];let food = {x: 15, y: 15};let dx = boxSize;let dy = 0;let gameLoop;// 绘制游戏画面function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 移动蛇let head = {x: snake[0].x + dx / boxSize, y: snake[0].y + dy / boxSize};// 检查是否撞墙if (head.x < 0 || head.x >= canvas.width / boxSize || head.y < 0 || head.y >= canvas.height / boxSize) {endGame();return;}// 检查是否撞到自己if (snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {endGame();return;}snake.unshift(head);// 检查是否吃到食物if (head.x === food.x && head.y === food.y) {food = {x: Math.floor(Math.random() * (canvas.width / boxSize)), y: Math.floor(Math.random() * (canvas.height / boxSize))};} else {snake.pop();}// 画蛇snake.forEach(segment => {ctx.fillStyle = 'green';ctx.fillRect(segment.x * boxSize, segment.y * boxSize, boxSize, boxSize);});// 画食物ctx.fillStyle = 'red';ctx.fillRect(food.x * boxSize, food.y * boxSize, boxSize, boxSize);}// 开始游戏function startGame() {snake = [{x: 10, y: 10}];food = {x: 15, y: 15};dx = boxSize;dy = 0;document.getElementById('startButton').disabled = true;document.getElementById('endButton').disabled = false;gameLoop = setInterval(draw, 200); // 增加时间间隔以降低速度}// 结束游戏function endGame() {clearInterval(gameLoop);alert('游戏结束');document.getElementById('startButton').disabled = false;document.getElementById('endButton').disabled = true;}document.getElementById('startButton').addEventListener('click', startGame);document.getElementById('endButton').addEventListener('click', endGame);document.addEventListener('keydown', (e) => {if (e.key === 'ArrowUp' && dy === 0) {dx = 0;dy = -boxSize;} else if (e.key === 'ArrowDown' && dy === 0) {dx = 0;dy = boxSize;} else if (e.key === 'ArrowLeft' && dx === 0) {dx = -boxSize;dy = 0;} else if (e.key === 'ArrowRight' && dx === 0) {dx = boxSize;dy = 0;}});</script>
</body>
</html>

（AI教授的，算是自娱自乐吧。这代码还挺有意思的。）

相关文章：

html编写贪吃蛇页面小游戏（可以玩）

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>贪吃蛇小游戏</title><style>body {…...

编程日记 2024/8/14 18:09:04

【淘宝购买的源码靠谱吗】

文章目录 前言一、项目需求二、卖家评价三、价格质量四、源码细节五、技术支持六、合法性七、市场环境八、风险评估总结 前言 在淘宝上购买的源码质量和可靠性存在不确定性。淘宝作为一个综合性电商平台&#xff0c;提供了各种各样的商品和服务&#xff0c;包括源代码。然而&a…...

编程日记 2024/8/14 18:08:03

C++ | list

前言 本篇博客讲解cSTL中的list &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&…...

编程日记 2024/8/14 18:07:00

Vue3 v-bind 指令用法

在 Vue 3 中&#xff0c;v-bind 指令用于将表达式的值绑定到 DOM 元素的属性上。这个指令的语法与 Vue 2 相同&#xff0c;但有一些细微的变化和改进。 以下是 Vue 3 中 v-bind 指令的基本用法&#xff1a; 基本用法: <button v-bind:class"{ active: isActive }"…...

编程日记 2024/8/14 18:04:56

通过Go示例理解函数式编程思维

一个孩子要尝试10次、20次才肯接受一种新的食物&#xff0c;我们接受一种新的范式&#xff0c;大概不会比这个简单。-- 郭晓刚 《函数式编程思维》译者 函数式编程(Functional Programming, 简称fp)是一种编程范式&#xff0c;与命令式编程(Imperative Programming)、面向对象编…...

编程日记 2024/8/14 18:02:51

刷题DAY7

三角形面积 题目&#xff1a;已知三角形的边长a&#xff0c;b和从、&#xff0c;求其面积 输入&#xff1a;输入三个实数a&#xff0c;b&#xff0c;c&#xff0c;表示三边长 输出&#xff1a;输出面积&#xff0c;保留三位小数 输入&#xff1a;1 2 2.5 输出&#xff1…...

编程日记 2024/8/14 18:00:47

离线数据开发流程小案例-图书馆业务数据

参考 https://blog.csdn.net/m53931422/article/details/103633452 https://www.cnblogs.com/jasonlam/p/7928179.html https://cwiki.apache.org/confluence/display/Hive/LanguageManualUDF https://medium.com/jackgoettle23/building-a-hive-user-defined-function-f6abe9…...

编程日记 2024/8/14 17:58:44

GPT-5：未来已来，你准备好了吗

GPT-5&#xff1a;未来已来&#xff0c;你准备好了吗&#xff1f; 在人工智能的浩瀚星空中&#xff0c;自然语言处理&#xff08;NLP&#xff09;技术如同璀璨星辰&#xff0c;不断引领着技术革新的浪潮。而在这股浪潮中&#xff0c;OpenAI的GPT&#xff08;Generative Pre-tr…...

编程日记 2024/8/14 17:57:42

白骑士的Matlab教学高级篇 3.2 并行计算

系列目录 上一篇&#xff1a;白骑士的Matlab教学高级篇 3.1 高级编程技术 并行计算是一种通过同时执行多个计算任务来加速程序运行的方法。在MATLAB中&#xff0c;并行计算工具箱&#xff08;Parallel Computing Toolbox&#xff09;提供了丰富的并行计算功能&#xff0c;使用…...

编程日记 2024/8/14 17:55:37

JS中【解构赋值】知识点解读

解构赋值&#xff08;Destructuring Assignment&#xff09;是 JavaScript 中一种从数组或对象中提取数据的简便方法&#xff0c;可以将其赋值给变量。这种语法可以让代码更加简洁、清晰。下面我会详细讲解解构赋值的相关知识点。 1. 数组解构赋值 数组解构赋值允许你通过位置…...

编程日记 2024/8/14 17:54:34

【Pyspark-驯化】一文搞懂Pyspark中对json数据处理使用技巧：get_json_object

【Pyspark-驯化】一文搞懂Pyspark中对json数据处理使用技巧&#xff1a;get_json_object 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; …...

编程日记 2024/8/14 17:53:32

第10章 无持久存储的文件系统 （1）

目录 前言 10.1 proc文件系统 10.1.1 /proc 内容 本专栏文章将有70篇左右&#xff0c;欢迎关注&#xff0c;查看后续文章。 前言 即存在于内存中的文件系统。如&#xff1a; proc&#xff1a; sysfs&#xff1a; 即/sys目录。 内容不一定是ASCII文本&#xff0c;可能是二进…...

编程日记 2024/8/14 17:50:27

如何把命令行创建python虚拟环境与pycharm项目管理更好地结合起来

1. 问题的提出 我在linux或windows下的某个目录如“X”下使用命令行的方式创建了一个python虚拟环境&#xff08;参考文章&#xff09;&#xff0c;对应的目录为myvenv, 现在我想使用pycharm创建python项目myproject&#xff0c;并且利用虚拟环境myvenv&#xff0c;怎么办&…...

编程日记 2024/8/14 17:48:22

keepalived+lvs高可用负载均衡集群配置方案

配置方案 一、配置主备节点1. 在主备节点上安装软件2. 编写配置文件3. 启动keepalived服务 二、配置web服务器1. 安装并启动http服务2. 编写主页面3.配置虚拟地址4. 配置ARP 三、测试 服务器IP&#xff1a; 主负载均衡服务器 master 192.168.152.71备负载均衡服务器 backup 192…...

编程日记 2024/8/14 17:45:18

Azure OpenAI Swagger Validation Failure with APIM

题意&#xff1a;Azure OpenAI Swagger 验证失败与 APIM 问题背景&#xff1a; Im converting the Swagger for Azure OpenAI API Version 2023-07-01-preview from json to yaml 我正在将 Azure OpenAI API 版本 2023-07-01-preview 的 Swagger 从 JSON 转换为 YAML。 My S…...

编程日记 2024/8/14 17:43:14

haproxy高级功能配置

介绍HAProxy高级配置及实用案例 一.基于cookie会话保持 cookie value:为当前server指定cookie值&#xff0c;实现基于cookie的会话黏性&#xff0c;相对于基于 source 地址hash 调度算法对客户端的粒度更精准&#xff0c;但同时也加大了haproxy负载&#xff0c;目前此模式使用…...

编程日记 2024/8/14 17:42:12

XXL-JOB分布式定时任务框架快速入门

文章目录 前言定时任务分布式任务调度 1、XXL-JOB介绍1.1 XXL-JOB概述1.2 XXL-JOB特性1.3 整体架构 2、XXL-JOB任务中心环境搭建2.1 XXL-JOB源码下载2.2 IDEA导入xxljob工程2.3 初始化数据库2.4 Docker安装任务管理中心 3、XXL-JOB任务注册测试3.1 引入xxl-job核心依赖3.2 配置…...

编程日记 2024/8/14 17:41:08

直流电机及其驱动

直流电机是一种将电能转换为机械能的装置&#xff0c;有两个电极&#xff0c;当电极正接时&#xff0c;电机正转&#xff0c;当电极反接时&#xff0c;电机反转。 直流电机属于大功率器件&#xff0c;GPIO口无法直接驱动&#xff0c;需要配合电机驱动电路来操作 TB6612是一款双…...

编程日记 2024/8/14 17:39:05

Java-判断一个字符串是否为有效的JSON字符串

在 Java 中判断一个字符串是否为有效的 JSON 字符串&#xff0c;可以使用不同的库来进行验证。常见的库 包括 org.json、com.google.gson 和 com.alibaba.fastjson 等。这里我将展示如何使用 com.alibaba.fastjson 库来实现一个简单的工具类&#xff0c;用于判断给定的字符串…...

编程日记 2024/8/14 17:37:01

FPGA开发板的基本知识及应用

FPGA开发板是一种专门设计用于开发和测试现场可编程门阵列(Field-Programmable Gate Array, FPGA)的硬件平台。FPGA是一种高度可配置的集成电路&#xff0c;能够在制造后被编程以执行各种数字逻辑功能。FPGA开发板通常包含一个FPGA芯片以及一系列支持电路和接口&#xff0c;以便…...

编程日记 2024/8/14 17:35:59

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/7 0:37:40

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/31 9:18:40

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31