HTML实战演练之贪吃蛇美食大作战

导入: 



一 :粉丝要求

今天一位小伙伴私信我说,想玩HTML贪吃蛇美食大作战,自己也是学HTML的,希望我能安排一下,那么好它来了




 需知:


一:别着急先看需要知道的 

要用HTML开发贪吃蛇美食大作战,你需要创建一个HTML文件,然后在其中添加JavaScript代码来实现游戏逻辑。




二:什么是游戏逻辑,今天一起讲讲吧

游戏逻辑是指游戏中的规则、流程和交互方式。它决定了游戏的可玩性和趣味性,是游戏开发中非常重要的一部分,下面是我更具常见的游戏逻辑来定义




1. 规则逻辑:

定义了游戏中各种行为的规则,例如足球比赛中的越位规则、扑克牌游戏中的出牌规则等。

2. 流程逻辑:

决定了游戏的进程和关卡设计,包括起点、终点、障碍物、道具等元素。

3. 交互逻辑:

定义了玩家与游戏之间的互动方式,包括输入、输出、反馈等。

4. 奖励逻辑:

决定了玩家在游戏中获得的奖励和惩罚,包括得分、升级、道具等。

5. AI逻辑:

定义了游戏中非玩家角色的行为和决策方式,例如敌人的行为模式、NPC的交互方式等。




以下是一个简单的案例引导学习

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>贪吃蛇美食大作战</title><style>canvas {border: 1px solid black;}</style>
</head>
<body><canvas id="game" width="400" height="400"></canvas><script>const canvas = document.getElementById('game');const context = canvas.getContext('2d');const box = 20;let snake = [];snake[0] = {x: 9 * box,y: 10 * box};let food = {x: Math.floor(Math.random() * 19 + 1) * box,y: Math.floor(Math.random() * 19 + 1) * box};let d;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() {context.fillStyle = "white";context.fillRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < snake.length; i++) {context.fillStyle = (i == 0) ? "black" : "gray";context.fillRect(snake[i].x, snake[i].y, box, box);}context.fillStyle = "red";context.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() * 19 + 1) * box,y: Math.floor(Math.random() * 19 + 1) * box};} else {snake.pop();}let newHead = {x: snakeX,y: snakeY};if (snakeX < 0 || snakeX > 19 * box || snakeY < 0 || snakeY > 19 * box || collision(newHead, snake)) {clearInterval(game);}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, 100);</script>
</body>
</html>

最后提醒:

将上述代码保存为HTML文件,然后浏览器打开贪吃蛇美食大作战即可玩

拜拜啦小伙伴们

今天的分享就到这里啦

有问题的小伙伴

可以微信呦,也可以进去微信学习群,要是有企业微信的小伙伴可以加入我们总群

下方是二维码

微信名片:

d7e6c510b5a04d3b8f052775e626b71d.png

微信DL编程培训营名片:

633182877ba0493185ffb2e8dc71f3b7.png

 企业微信DL编程培训营总群名片:

1a7345ead50c46649830d6e1ef84867d.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/585077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

很实用的ChatGPT网站——httpchat-zh.com

很实用的ChatGPT网站——http://chat-zh.com/ 今天介绍一个好兄弟开发的ChatGPT网站&#xff0c;网址[http://chat-zh.com/]。这个网站功能模块很多&#xff0c;包含生活、美食、学习、医疗、法律、经济等很多方面。下面简单介绍一些部分功能与大家一起分享。 登录和注册页面…

【Java EE初阶五】wait及notify关键字

1. wait和notify的概念 所谓的wait和notify其实就是等待、通知机制&#xff1b;该机制的作用域join类似&#xff1b;由于多个线程之间是随机调度的&#xff0c;引入wait和notify就是为了能够从应用层面上&#xff0c;干预到多个不同线程代码的执行顺序&#xff0c;此处的干预&a…

使用 Docker Compose 部署 Halo 2.x 与 MySQL

使用 Docker Compose 部署 Halo 2.x 与 MySQL 本文主要介绍使用 Docker Compose 部署 Halo 2.x 和 MySQL&#xff0c; 主要针对小白。 有一定基础的&#xff0c; 可以直接去官网查看。 博主博客 https://blog.uso6.comhttps://blog.csdn.net/dxk539687357 一、Docker 与 Dock…

Java动态代理机制 代码示例demo

文章目录 JDK动态代理代码实现示例1.定义发送短信的接口2.实现发送短信的接口3.定义一个 JDK 动态代理类4.获取代理对象的工厂类5.实际使用 JDK 动态代理只能代理实现了接口的类CGLIB动态代理代码实现示例1.实现一个使用阿里云发送短信的类2.自定义 MethodInterceptor&#xff…

Java——猫猫图鉴微信小程序(前后端分离版)

目录 一、开源项目 二、项目来源 三、使用框架 四、小程序功能 1、用户功能 2、管理员功能 五、使用docker快速部署 六、更新信息 审核说明 一、开源项目 猫咪信息点-ruoyi-cat: 1、一直想做点项目进行学习与练手&#xff0c;所以做了一个对自己来说可以完成的…

HCIP:rip综合实验

实验要求&#xff1a; 【R1-R2-R3-R4-R5运行RIPV2】 【R6-R7运行RIPV1】 1.使用合理IP地址规划网络&#xff0c;各自创建环回接口 2.R1创建环回 172.16.1.1/24 172.16.2.1/24 172.16.3.1/24 3.要求R3使用R2访问R1环回 4.加快网络收敛&#xff0c;减少路由条目数量&#xff0c;增…

go mod 命令详解

文章目录 1.关于模块2.关于 go mod3.格式4.示例参考文献 1.关于模块 模块&#xff08;Modules&#xff09;是 Go 1.11 版本引入的一依赖管理机制。 一个模块是 Go packages 的集合&#xff0c;定义在项目根目录下的 go.mod 文件。go.mod 文件定义了模块的路径&#xff0c;这也…

Linux let命令教程:如何有效地进行算术运算(附实例教程和注意事项)

Linux let命令介绍 let命令是Linux系统中的内置命令&#xff0c;用于评估算术表达式。与其他算术评估和扩展命令不同&#xff0c;let是一个简单的命令&#xff0c;具有自己的环境。let命令还允许进行算术扩展。 Linux let命令适用的Linux版本 let命令在所有主流的Linux发行版…

Unity中URP下的添加雾效支持

文章目录 前言一、URP下Shader支持雾效的步骤1、添加雾效变体2、在Varying结构体中添加雾效因子3、在顶点着色器中&#xff0c;我们使用内置函数得到雾效因子4、在片元着色器中&#xff0c;把输出颜色 和 雾效因子混合输出 二、在Unity中打开雾效三、测试代码 前言 我们使用之…

ubuntu20部署Bringing-Old-Photos-Back-to-Life

环境准备&#xff1a; ubuntu20.04 Python 3.8.10 首先将微软的「Bringing-Old-Photos-Back-to-Life」库 clone 到本地&#xff1a; git clone https://github.com/microsoft/Bringing-Old-Photos-Back-to-Life.git cd Face_Enhancement/models/networks/ git clone https:/…

Python 爬虫 教程

python爬虫框架&#xff1a;Scrapyd&#xff0c;Feapder&#xff0c;Gerapy 参考文章&#xff1a; python爬虫工程师&#xff0c;如何从零开始部署ScrapydFeapderGerapy&#xff1f; - 知乎 神器&#xff01;五分钟完成大型爬虫项目 - 知乎 爬虫框架-feapder - 知乎 scrap…

NFC物联网智慧校园解决方案

近场通信(Near Field Communication&#xff0c;NFC)又称近距离无线通信&#xff0c;是一种短距离的高频无线通信技术&#xff0c;允许电子设备之间进行非接触式点对点数据传输交换数据。这个技术由免接触式射频识别(RFID)发展而来&#xff0c;并兼容 RFID&#xff0c;主要用于…

解决VNC连接Ubuntu服务器打开终端出现闪退情况

服务器环境 阿里云ECS服务器 操作系统&#xff1a;Ubuntu 20.0.4 如何使用VNC连接阿里云ECS服务器 1.阿里云官方指导&#xff1a;通过VNC搭建Ubuntu 18.04和20.04图形界面 2.新手入门ECS——ubuntu 20.04安装图形化界面和本地VNC连接 问题描述 使用VNC连接上新申请阿里云服…

leetcode每日一题41

99. 恢复二叉搜索树 中序遍历树&#xff0c;找到逆序的两个数&#xff0c;交换 有两种情况 如果是像示例1一样的&#xff0c;中序遍历后是3&#xff0c;2&#xff0c;1 是连续的两个逆序&#xff0c;那么交换第一&#xff0c;第三个数 如果是像示例2一样&#xff0c;中序遍历后…

Debezium发布历史35

原文地址&#xff1a; https://debezium.io/blog/2018/07/19/advantages-of-log-based-change-data-capture/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. 基于日志的变更数据捕获的五个优点 七月 19, 2018 作…

github鉴权失败

问题&#xff1a; 如上图所示 git push 时发生了报错&#xff0c;鉴权失败&#xff1b; 解决方案 Settings->Developer settings->Personal access tokens->Generate new token。创建新的访问密钥&#xff0c;勾选repo栏&#xff0c;选择有效期&#xff0c;为密钥命…

【C#与Redis】--高级主题--Redis 管道

一、引言 1.1 概念介绍 Redis管道是一种用于优化多个命令执行的机制&#xff0c;允许客户端将多个命令一次性发送给服务器&#xff0c;然后一次性接收所有命令的返回结果。这种机制可以减少客户端与服务器之间的网络往返次数&#xff0c;从而提高性能。 1.2 作用 提高性能&…

java 对数转换log_a {c}

1、换底公式 l o g a c l o g x c l o g x a log_a c \frac{log_x c}{log_x a} loga​clogx​alogx​c​ 2、推理过程 有&#xff1a; a b c &#xff0c;证明 l o g a c l o g x c l o g x a 取对数 ( l o g x ) &#xff1a; l o g x a b l o g x c l o g x a b b ∗ …

鸿蒙HarmonyOS-图表应用

简介 随着移动应用的不断发展&#xff0c;数据可视化成为提高用户体验和数据交流的重要手段之一。在HarmonyOS应用开发中&#xff0c;一个强大而灵活的图表库是实现这一目标的关键。而MPChart就是这样一款图表库&#xff0c;它为开发者提供了丰富的功能和灵活性&#xff0c;使得…

【持续更新ing】uniapp+springboot实现个人备忘录系统【前后端分离】

目录 &#xff08;1&#xff09;项目可行性分析 &#xff08;2&#xff09;需求描述 &#xff08;3&#xff09;界面原型 &#xff08;4&#xff09;数据库设计 &#xff08;5&#xff09;后端工程 接下来我们使用uniappspringboot实现一个简单的前后端分离的小项目----个…