使用单个HTML实现贪吃蛇游戏:方向键(左、上、右、下)控制,碰壁不会结束

devtools/2024/9/24 5:30:04/
htmledit_views">

html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇html" title=游戏>游戏</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;margin: 0;}#score {font-size: 24px;color: #319403;}#gameCanvas {border: 1px solid black;}</style>
</head>
<body><div id="score">得分: 0</div><canvas id="gameCanvas" width="600" height="600"></canvas><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const box = 20;let snake = [];snake[0] = { x: 10 * box, y: 10 * box };let food = {x: Math.floor(Math.random() * 20) * box,y: Math.floor(Math.random() * 20) * box};let d;let score = 0; // 初始化得分const scoreElement = document.getElementById('score'); // 获取得分显示元素document.addEventListener('keydown', direction);function direction(event) {if (event.keyCode == 37 && d != 'RIGHT') {d = 'LEFT';} else if (event.keyCode == 38 && d != 'DOWN') {d = 'UP';} else if (event.keyCode == 39 && d != 'LEFT') {d = 'RIGHT';} else if (event.keyCode == 40 && d != 'UP') {d = 'DOWN';}}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < snake.length; i++) {ctx.fillStyle = i == 0 ? 'green' : 'white';ctx.fillRect(snake[i].x, snake[i].y, box, box);ctx.strokeStyle = 'black';ctx.strokeRect(snake[i].x, snake[i].y, box, box);}ctx.fillStyle = 'red';ctx.fillRect(food.x, food.y, box, box);let snakeX = snake[0].x;let snakeY = snake[0].y;if (d == 'LEFT') snakeX -= box;if (d == 'UP') snakeY -= box;if (d == 'RIGHT') snakeX += box;if (d == 'DOWN') snakeY += box;if (snakeX == food.x && snakeY == food.y) {food = {x: Math.floor(Math.random() * 20) * box,y: Math.floor(Math.random() * 20) * box};score += 1; // 每次吃到食物得分增加scoreElement.textContent = '得分: ' + score; // 更新得分显示} else {snake.pop();}if (snakeX < 0) {snakeX = canvas.width - box;} else if (snakeX >= canvas.width) {snakeX = 0;}if (snakeY < 0) {snakeY = canvas.height - box;} else if (snakeY >= canvas.height) {snakeY = 0;}let newHead = {x: snakeX,y: snakeY};snake.unshift(newHead);}function collision(head, array) {for (let i = 0; i < array.length; i++) {if (head.x == array[i].x && head.y == array[i].y) {return true;}}return false;}let game = setInterval(draw, 200);</script>
</body>
</html>


http://www.ppmy.cn/devtools/96044.html

相关文章

【ARM+Codesys 客户案例 】RK3568/A40i/STM32+CODESYS在工厂自动化中的应用:PCB板焊接机

现代化生产中&#xff0c;电子元件通常会使用自动化设备来进行生产&#xff0c;例如像PCB&#xff08;印刷电路板&#xff09;的组装。但是生产过程中也会面临一些问题&#xff0c;类似于如何解决在PCB板上牢固、精准地安装各种组件呢&#xff1f;IBL Lttechnik GmbH公司的CM80…

雨云美国二区E5v2服务器测评(非广告)

注&#xff1a;本文非广告&#xff0c;非推广 本文长期更新地址&#xff1a; 雨云美国二区E5v2服务器测评&#xff08;非广告&#xff09;-星零岁的博客https://blog.0xwl.com/13594.html 今天来测评一下雨云美国二区v2服务器。我测试的这台配置是4-8&#xff0c; 35 M上传&a…

小白零基础学数学建模应用系列(五):任务分配问题优化与求解

文章目录 一. 分配问题1.1 问题背景1.2 假设条件1.3 问题要求1.4 数学建模二. 实际案例2.1 问题背景2.2 假设条件2.3 问题要求2.4 模型建立2.5 求解代码2.6 结果分析2.6.1 分配方案的解释2.6.2 总时间的优化2.6.3 潜在的现实应用一. 分配问题 1.1 问题背景 分配问题(Assignm…

并行程序设计基础——MPI通信模式

目录 一、标准通信模式 二、缓存通信模式 1、MPI_BUFFER_ATTACH 2、MPI_BUFFER_DETACH 三、同步通信模式 四、就绪通信模式 五、小结 MPI是消息传递接口的简称,顾名思义,通信是MPI并行程序中的关键所在。MPI共有四种通信模式:标准通信模式(standard mode)、…

django之select_related 与 prefetch_related用法

在 Django 中&#xff0c;select_related 和 prefetch_related 是用于优化查询的两个重要方法。它们通过减少数据库查询次数来提高性能&#xff0c;但它们的工作方式有所不同。 select_related select_related 使用 SQL 的 JOIN 操作来获取相关对象。它适用于一对一和多对一的…

[Meachines] [Medium] solidstate Apache JAMES RCE+POP3邮件泄露+定时任务权限提升

信息收集 IP AddressOpening Ports10.10.10.51TCP:22&#xff0c;25&#xff0c;80&#xff0c;110&#xff0c;119&#xff0c;4555 $ nmap -p- 10.10.10.51 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 7.4p1 Debian 10deb9u…

C语言 | Leetcode C语言题解之第345题反转字符串中的元音字母

题目&#xff1a; 题解&#xff1a; char vowel[] "aeiouAEIOU";bool isVowel(char ch) {for (int i 0; vowel[i]; i) {if (vowel[i] ch) {return true;}}return false; };char* reverseVowels(char* s) {int n strlen(s);int i 0, j n - 1;while (i < j) …

【Docker】如何更简单的做一个dockerfile文件?

一&#xff0c;介绍 Dockerfile 是用来定义 Docker 镜像构建过程的文本文件。它包含了一系列的指令和参数&#xff0c;告诉 Docker 如何组装一个镜像。一个基本的 Dockerfile 通常包含以下几个部分&#xff1a; 1.基础镜像指令&#xff08;FROM&#xff09;&#xff1a; 指定…