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

AI生成移动端贪吃蛇游戏页面，手机浏览器打开即可玩

article 2026/2/27 22:09:43

贪吃蛇游戏可计分，可穿墙，AI生成适配手机浏览器的游戏，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>贪吃蛇游戏</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            touch-action: none; /* 禁用默认触摸行为 */
        }
        canvas {
            background-color: #333;
            border: 2px solid #fff;
            max-width: 100%;
            max-height: 100%;
        }
        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
        }
        #gameOver {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="score">得分: 0</div>
    <div id="gameOver">游戏结束</div>
    <canvas id="gameCanvas"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const gameOverElement = document.getElementById('gameOver');

        const gridSize = 20; // 网格大小
        let tileCount = 20; // 网格数量
        let tileSize; // 每个网格的像素大小
        let snake = [{ x: 10, y: 10 }]; // 蛇的初始位置
        let food = { x: 5, y: 5 }; // 食物的初始位置
        let direction = { x: 0, y: 0 }; // 蛇的移动方向
        let score = 0; // 得分
        let gameOver = false; // 游戏是否结束

        // 初始化画布大小
        function resizeCanvas() {
            const size = Math.min(window.innerWidth, window.innerHeight) * 0.9;
            canvas.width = size;
            canvas.height = size;
            tileSize = canvas.width / tileCount;
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // 游戏主循环
        function gameLoop() {
            if (gameOver) {
                gameOverElement.style.display = 'block';
                return;
            }
    
            setTimeout(function(){
    update();
                draw();
                requestAnimationFrame(gameLoop); // 使用 requestAnimationFrame 实现高性能动画
            }, 100);

        }

        // 更新游戏状态
        function update() {
            const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

            // 边缘穿越逻辑
            if (head.x < 0) head.x = tileCount - 1;
            if (head.x >= tileCount) head.x = 0;
            if (head.y < 0) head.y = tileCount - 1;
            if (head.y >= tileCount) head.y = 0;

            // 吃到食物
            if (head.x === food.x && head.y === food.y) {
                score++;
                scoreElement.textContent = `得分: ${score}`;
                food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
            } else {
                snake.pop(); // 如果没有吃到食物，移除蛇尾
            }

            snake.unshift(head); // 添加新的蛇头

            // 检查是否撞到自己
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    gameOver = true;
                }
            }
        }

        // 绘制游戏画面
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制蛇
            ctx.fillStyle = 'lime';
            snake.forEach(part => ctx.fillRect(part.x * tileSize, part.y * tileSize, tileSize, tileSize));

            // 绘制食物
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
        }

        // 触摸控制逻辑
        let touchStartX = 0;
        let touchStartY = 0;

        canvas.addEventListener('touchstart', (e) => {
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
        });

        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            const touchEndX = e.touches[0].clientX;
            const touchEndY = e.touches[0].clientY;
            const dx = touchEndX - touchStartX;
            const dy = touchEndY - touchStartY;

            if (Math.abs(dx) > Math.abs(dy)) {
                direction = { x: dx > 0 ? 1 : -1, y: 0 }; // 水平移动
            } else {
                direction = { x: 0, y: dy > 0 ? 1 : -1 }; // 垂直移动
            }
        });

        // 启动游戏
        gameLoop();
    </script>
</body>
</html>

相关文章：

AI生成移动端贪吃蛇游戏页面，手机浏览器打开即可玩

贪吃蛇游戏可计分&#xff0c;可穿墙&#xff0c;AI生成适配手机浏览器的游戏&#xff0c;代码如下&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <meta name"viewport" …...

编程日记 2026/2/21 21:07:16

Cursor+Claude-3.5生成Android app

一、Android Studio下载 https://developer.android.com/studio?hlzh-tw#get-android-studio 等待安装完成 二、新建工程 点击new project 选择Empty Activity 起一个工程名 当弹出这个框时 可以在settings里面选择No proxy 新建好后如下 点击右边模拟器&#xff0c…...

编程日记 2026/2/17 19:28:48

NLP高频面试题（九）——大模型常见的几种解码方案

大模型常见的几种解码方案 在自然语言生成任务中&#xff0c;如何从模型生成的概率分布中选择合适的词汇&#xff0c;是影响文本质量的关键问题。常见的解码方法包括贪心搜索&#xff08;Greedy Search&#xff09;、束搜索&#xff08;Beam Search&#xff09;、随机采样&…...

编程日记 2026/2/15 6:17:03

QT Quick（C++）跨平台应用程序项目实战教程 3 — 项目基本设置（窗体尺寸、中文标题、窗体图标、可执行程序图标）

目录 1. 修改程序界面尺寸和标题 2. 窗体图标 3. 修改可执行程序图标 上一章创建好了一个初始Qt Quick项目。本章介绍基本的项目修改方法。 1. 修改程序界面尺寸和标题 修改Main.qml文件&#xff0c;将程序宽度设置为1200&#xff0c;程序高度设置为800。同时修改程序标题…...

编程日记 2026/2/15 23:41:35

Transformers x SwanLab:可视化NLP模型训练（2025最新版）

HuggingFace 的 Transformers 是目前最流行的深度学习训框架之一&#xff08;100k Star&#xff09;&#xff0c;现在主流的大语言模型&#xff08;LLaMa系列、Qwen系列、ChatGLM系列等&#xff09;、自然语言处理模型&#xff08;Bert系列&#xff09;等&#xff0c;都在使用T…...

编程日记 2026/2/15 19:25:54

VSCode 抽风之 两个conda环境同时在被激活

出现了神奇的(toolsZCH)(base) 提示符&#xff0c;如下图所示&#xff1a; 原因大概是&#xff1a;conda 环境的双重激活&#xff1a;可能是 conda 环境没有被正确清理或初始化&#xff0c;导致 base 和 toolsZCH 同时被激活。 解决办法就是 &#xff1a;conda deactivate 两次…...

编程日记 2026/2/14 20:50:58

Android项目实战搭建 MVVM架构

View层 具体代码&#xff1a; activity: /*** description:* 普通Activity基类&#xff0c;不带ViewModel,显示基本加载状态* 需要获取到子类的布局id用于databinding的绑定* author YL Chen* date 2024/9/4 21:34* version 1.0*/ abstract class BaseActivity<VB : ViewD…...

编程日记 2026/2/26 23:05:56

Mybatis的基础操作——03

写mybatis代码的方法有两种&#xff1a; 注解xml方式 本篇就介绍XML的方式 使用XML来配置映射语句能够实现复杂的SQL功能&#xff0c;也就是将sql语句写到XML配置文件中。 目录 一、配置XML文件的路径&#xff0c;在resources/mapper 的目录下 二、写持久层代码 1.添加mappe…...

编程日记 2026/2/15 12:39:36

React：React主流组件库对比

1、Material-UI | 官网 | GitHub | GitHub Star: 94.8k Material-UI 是一个实现了 Google Material Design 规范的 React 组件库。 Material UI 包含了大量预构建的 Material Design 组件&#xff0c;覆盖导航、滑块、下拉菜单等各种常用组件&#xff0c;并都提供了高度的可定制…...

编程日记 2026/2/18 18:46:20

奇迹科技：蓝牙网关赋能少儿篮球教育的创新融合案例研究

一、引言 本文研究了福建奇迹运动体育科技有限公司&#xff08;简称‘奇迹科技’&#xff09;如何利用其创新产品体系和桂花网蓝牙网关M1500&#xff0c;与少儿篮球教育实现深度融合。重点分析其在提升教学效果、保障训练安全、优化个性化教学等方面的实践与成效&#xff0c;为…...

编程日记 2026/2/13 8:23:01

分享最近前端面试遇到的一些问题

前情提要&#xff08;分享个人情况&#xff0c;可以直接跳过&#xff09; 先说一下我的个人情况&#xff0c;我是2026届的&#xff0c;目前是在找前端实习。 3月初&#xff0c;从3月3日开始在Boss上投简历。 分享我的个人故事&#xff0c;不想看可以直接滑到下面&#xff0c;…...

编程日记 2026/2/26 4:33:21

嵌入式基础知识学习：SPI通信协议是什么？

SPI&#xff08;Serial Peripheral Interface&#xff09;是串行外设接口的缩写&#xff0c;是一种广泛应用于嵌入式系统的高速同步串行通信协议&#xff0c;由摩托罗拉公司于20世纪80年代提出。以下是其核心要点&#xff1a; 一、SPI的核心定义与特点 基本特性 全双工同步通信…...

编程日记 2026/2/16 17:39:26

python每日十题(6)

】函数定义&#xff1a;函数是指一组语句的集合通过一个名字&#xff08;函数名&#xff09;封装起来&#xff0c;要想执行这个函数&#xff0c;只需要调用其函数名即可。函数能提高应用的模块性和代码的重复利用率 在Python语言中&#xff0c;用关键字class来定义类 在Python语…...

编程日记 2026/2/14 22:46:13

1.Go - Hello World

1.安装Go依赖 https://go.dev/dl/ 根据操作系统选择适合的依赖&#xff0c;比如windows&#xff1a; 2.配置环境变量 右键此电脑 - 属性 - 环境变量 PS&#xff1a; GOROOT&#xff1a;Go依赖路径&#xff1b; GOPATH&#xff1a;Go项目路径&#xff1b; …...

编程日记 2026/2/15 9:43:56

优先队列 priority_queue详解

说到&#xff0c;priority_queue优先队列。必须先要了解啥是堆与运算符重载(我在下方有解释)。 否则只知皮毛&#xff0c;极易忘记寸步难行。 但在开头&#xff0c;还是简单的说下怎么用 首先&#xff0c;你需要调用 #include <queue> 在main函数中&#xff0c;声明…...

编程日记 2026/2/27 19:38:21

《信息系统安全》（第一次上机实验报告）

实验一 &#xff1a;网络协议分析工具Wireshark 一 实验目的 学习使用网络协议分析工具Wireshark的方法&#xff0c;并用它来分析一些协议。 二实验原理 TCP/IP协议族中网络层、传输层、应用层相关重要协议原理。网络协议分析工具Wireshark的工作原理和基本使用规则。 三 实…...

编程日记 2026/2/19 7:33:16

C++实现求解24点游戏

力扣原题&#xff1a;679. 24 点游戏 - 力扣&#xff08;LeetCode&#xff09; 判断四个数字能否通过加减乘除得到24点 使用回溯遍历四个数字的每一种组合&#xff0c;具体来说&#xff0c;每次从数组中选取两个数字以加减乘除四种方式得到一个新的数字&#xff0c;这样数组的…...

编程日记 2026/2/25 9:21:24

Java-腾讯云短信模板兼容阿里云短信模板-短信模板参数生成

最新版本更新 https://code.jiangjiesheng.cn/article/362?fromcsdn 模板 腾讯云&#xff1a;您好&#xff01;{}的${}&#xff0c;有{}发生{} 阿里云&#xff1a;您好&#xff01;${orgName}的${monitorName}&#xff0c;有${equipName}发生${status} 原腾讯云短信发送的代码…...

编程日记 2026/2/14 12:43:34

简要分析IPPROTO_TCP参数

IPPROTO_TCP是操作系统或网络编程中定义的一个 协议号常量&#xff0c;用于标识 传输控制协议&#xff08;TCP&#xff09;。其核心作用是 在传输层指定使用TCP协议&#xff0c;确保数据通过TCP的可靠传输机制进行通信。 一、定义与值 头文件&#xff1a;定义在<netinet/in.…...

编程日记 2026/2/27 9:26:25

SOFABoot-06-健康检查

前言 大家好&#xff0c;我是老马。 sofastack 其实出来很久了&#xff0c;第一次应该是在 2022 年左右开始关注&#xff0c;但是一直没有深入研究。 最近想学习一下 SOFA 对于生态的设计和思考。 sofaboot 系列 SOFABoot-00-sofaboot 概览 SOFABoot-01-蚂蚁金服开源的 s…...

编程日记 2026/2/22 23:18:43

如何理解java中Stream流？

在Java中&#xff0c;Stream 是 Java 8 引入的一个强大API&#xff0c;用于处理集合&#xff08;如 List、Set、Map 等&#xff09;数据的流式操作。它提供了一种声明式、函数式的编程风格&#xff0c;可以高效地进行过滤、映射、排序、聚合等操作。 Stream 的核心概念 流&…...

编程日记 2026/2/14 1:15:45

Android使用RxHttp进行国密4加密解密

国密SM4加解密问题汇总 前言国密4加解密工具类RxHttp统一加解密处理解密前言 为了网络安全需要对app内请求数据接口使用SM4国密4进行加解密操作，在实施的过程中遇到了些问题 也收获颇丰，特此记录 在线SM4加密测试网址: 点击此进入网址. 国密4加解密工具类 这里我使用的是b…...

编程日记 2026/2/15 6:43:11

【自学笔记】Linux基础知识点总览-持续更新

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Linux 基础知识点总览目录Linux 简介文件和目录结构常用命令文件操作目录操作权限管理文本处理 Shell 脚本基础进程管理用户和组管理网络配置 总结 Linux 基础知识点…...

编程日记 2026/2/26 10:45:46

JavaScript与客户端开发

1、简介 简单的讲&#xff0c;JavaScript是一种脚本语言&#xff0c;为网站提供了一种在客户端运行程序的手段&#xff0c;通过它可以实现客户端数据验证、网页特效等功能。 JavaScript是一种基于对象和事件驱动&#xff08;不懂啥意思&#xff0c;暂不管它&#xff09;&…...

编程日记 2026/2/16 4:34:22

基于CNN的FashionMNIST数据集识别5——GoogleNet模型

源码 import torch from torch import nn from torchsummary import summaryclass Inception(nn.Module):def __init__(self, in_channels, c1, c2, c3, c4):super().__init__()self.ReLu nn.ReLU()#路径1self.p1_1 nn.Conv2d(in_channelsin_channels, out_channelsc1, kern…...

编程日记 2026/2/26 5:33:53

JVM垃圾回收笔记01-垃圾回收算法

文章目录 前言1. 如何判断对象可以回收1.1 引用计数法1.2 可达性分析算法查看根对象哪些对象可以作为 GC Root ?对象可以被回收&#xff0c;就代表一定会被回收吗&#xff1f; 1.3 引用类型1.强引用&#xff08;StrongReference&#xff09;2.软引用&#xff08;SoftReference…...

编程日记 2026/2/20 23:38:59

【初探数据结构】树与二叉树

&#x1f4ac; 欢迎讨论&#xff1a;在阅读过程中有任何疑问&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;如果你觉得这篇文章对你有帮助&#xff0c;记得点赞、收藏&#xff0c;并分享给更多对数据结构感…...

编程日记 2026/2/13 23:55:58

numpy学习笔记10：arr *= 2向量化操作性能优化

numpy学习笔记10&#xff1a;arr * 2向量化操作性能优化 在 NumPy 中&#xff0c;直接对整个数组进行向量化操作&#xff08;如 arr * 2&#xff09;的效率远高于显式循环&#xff08;如 for i in range(len(arr)): arr[i] * 2&#xff09;。以下是详细的解释&#xff1a; 1. …...

编程日记 2026/2/15 4:57:21

蓝桥杯备考：二分答案之路标设置

最大距离&#xff0c;找最小空旷指数值&#xff0c;我们是很容易想到用二分的&#xff0c;我们再看看这个答案有没有二段性 是有这么个二段性的&#xff0c;我们只要二分就行了&#xff0c;但是二分的check函数是有点不好想的&#xff0c;我们枚举空旷值的时候&#xff0c;为了…...

编程日记 2026/2/18 9:33:42

回调方法传参汇总

文章目录 0. 引入问题1. 父子组件传值1.1 父传子&#xff1a;props1.2 子传父&#xff1a;$emit1.3 双向绑定&#xff1a;v-model 2. 多个参数传递3. 父组件监听方法传递其他值3.1 $event3.2 箭头方法 4. 子组件传递多个参数&#xff0c;父组件传递本地参数4.1 箭头函数 … 扩…...

编程日记 2026/2/15 5:44:35