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.rhkb.cn/news/226970.html

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

相关文章

【Java中序列化的原理是什么(解析)】

&#x1f341;序列化的原理是什么&#xff1f; &#x1f341;典型-----解析&#x1f341;拓展知识仓&#x1f341;Serializable 和 Externalizable 接门有何不同? &#x1f341;如果序列化后的文件或者原始类被篡改&#xff0c;还能被反序列化吗?&#x1f341;serialVersionU…

【机组期末速成】指令系统|机器指令概述|操作数类型与操作类型|寻址方式|指令格式

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;计算机组成原理&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 前言&#xff1a; 一、本章考点总览 二、考点分析 1、以下有关指令系统的说法中错误的是&#xff08; &#xff09;。 2…

直方图与均衡化

直方图 统计图像中相同像素点的数量。 使用cv2.calcHist(images, channels, mask, histSize, ranges)函数 images&#xff1a;原图像图像格式为uint8或float32&#xff0c;当传入函数时应用[]括起来&#xff0c;例如[img]。 channels&#xff1a;同样用中括号括起来&#xff…

2011年AMC8数学竞赛中英文真题典型考题、考点分析和答案解析

今天是2023年12月30日&#xff0c;距离2024年元旦新年还有2天时间&#xff0c;先预祝所有的读者和小读者想今年工作、学习进步&#xff01;幸福平安&#xff01; 今天距离2024年1月19日的AMC8正式比赛只有20天的时间&#xff0c;我们继续来看AMC8竞赛的历年真题典型考题和解析…

Android笔记(二十二):Paging3分页加载库结合Compose的实现网络单一数据源访问

Paging3 组件是谷歌公司推出的分页加载库。个人认为Paging3库是非常强大&#xff0c;但是学习难点比较大的一个库。Paging3组件可用于加载和显示来自本地存储或网络中更大的数据集中的数据页面。此方法可让移动应用更高效地利用网络带宽和系统资源。在具体实现上&#xff0c;Pa…

根据文法求对应的语言

技巧&#xff1a;最后得到的是终结符组成的闭包 例题&#xff1a; 文法G[S]: S-->AB A-->aAb|ab B-->Bc|&#xff0c;求对应的语言 ①S-->(aAb|ab)(Bc|) ②我们可以观察到&#xff0c;无论A-->aAb还是A-->ab&#xff0c;都一定会同时出现ab,…

PiflowX组件-WriteToKafka

WriteToKafka组件 组件说明 将数据写入kafka。 计算引擎 flink 有界性 Streaming Append Mode 组件分组 kafka 端口 Inport&#xff1a;默认端口 outport&#xff1a;默认端口 组件属性 名称展示名称默认值允许值是否必填描述例子kafka_hostKAFKA_HOST“”无是逗号…

使用Halcon 采集图像并进行简单处理rgbl_to_gray/threshold/connection/fill_up

使用Halcon 采集图像并进行简单处理 文章目录 使用Halcon 采集图像并进行简单处理 下面介绍一个简单的采集图像的例子。在Halcon中利用图像采集接口&#xff0c;使用USB3.0相机实时拍摄图像。采集到图像后对图像进行简单的阀值分割处理&#xff0c;将有物体的区域标记出来。 &a…

抬头举手阅读YOLOV8NANO

首先用YOLOV8NANO得到PT模型&#xff0c;转换成ONNX,OPENCV调用&#xff0c;PYTHON,C,ANDROID都可以举手写字阅读YOLOV8NANO

基于Freeswitch实现的Volte网视频通知应用

现在运营商的Volte网络已经很好的支持视频通话了&#xff0c;因此在原来的电话语音通知的基础上&#xff0c;可以更进一步实现视频的通知&#xff0c;让用户有更好的体验&#xff0c;本文就从技术角度&#xff0c;基于Freeswitch来实现此类应用&#xff08;本文假设读者已对Fre…

Redis哨兵

1.哨兵介绍 1.1.为何需要哨兵&#xff1f; 为了解决master节点宕机问题&#xff0c;选举salve节点为新的master节点。 1.2.哨兵的作用 1.3.服务状态监控 1.4.选举新的master 1.5.如何实现故障转移 2.搭建哨兵集群 2.1.集群结构 这里我们搭建一个三节点形成的Sentinel集群&…

蓝桥杯-Excel地址[Java]

目录&#xff1a; 学习目标&#xff1a; 学习内容&#xff1a; 学习时间&#xff1a; 题目&#xff1a; 题目描述: 输入描述: 输出描述: 输入输出样例: 示例 1: 运行限制: 题解: 思路: 学习目标&#xff1a; 刷蓝桥杯题库日记 学习内容&#xff1a; 编号96题目Ex…

re:Invent 2023技术上新|Amazon DynamoDB与OpenSearch Service的Zero-ETL集成

Amazon DynamoDB 与 Amazon OpenSearch Service 的 Zero-ETL 集成已正式上线&#xff0c;该服务允许您通过自动复制和转换您的 DynamoDB 数据来搜索数据&#xff0c;而无需自定义代码或基础设施。这种 Zero-ETL 集成减少了运营负担和成本&#xff0c;使您能够专注于应用程序。这…

php获取访客IP、UA、操作系统、浏览器等信息

最近有个需求就是获取下本地的ip地址、网上搜索了相关的教程&#xff0c;总结一下分享给大家、有需要的小伙伴可以参考一下 一、简单的获取 User Agent 信息代码: echo $_SERVER[HTTP_USER_AGENT]; 二、获取访客操作系统信息: /** * 获取客户端操作系统信息,包括win10 * pa…

Adobe 设计精髓:创新的用户体验 | 开源日报 No.130

adobe/react-spectrum Stars: 10.1k License: Apache-2.0 React Spectrum Libraries 是一系列的库和工具&#xff0c;旨在帮助开发者构建适应性强、可访问性好且稳健的用户体验。 核心优势&#xff1a; 提供全面的可访问性和行为支持&#xff0c;符合 WAI-ARIA 编写实践&…

Transformer(seq2seq、self-attention)学习笔记

在self-attention 基础上记录一篇Transformer学习笔记 Transformer的网络结构EncoderDecoder 模型训练与评估 Transformer的网络结构 Transformer是一种seq2seq 模型。输入一个序列&#xff0c;经过encoder、decoder输出结果也是一个序列&#xff0c;输出序列的长度由模型决定…

redis cluster判断key属于那个分片。

一、判断阿里云 redis cluster&#xff0c;的key属于那个分片。 阿里云特有的命令info key 可以查看key属于那个slot&#xff0c;那个分片 命令行查看&#xff1a; xxxx:6379> info key xxxx_compressed_xxx slot:4941 node_index:9 xxxx:6379> cluster keyslot xxxx_…

基于 Webpack 插件体系的 Mock 服务

背景 在软件研发流程中&#xff0c;对于前后端分离的架构体系而言&#xff0c;为了能够更快速、高效的实现功能的开发&#xff0c;研发团队通常来说会在产品原型阶段对前后端联调的数据接口进行结构设计及约定&#xff0c;进而可以分别同步进行对应功能的实现&#xff0c;提升研…

WPF+Halcon 培训项目实战(8):WPF+Halcon初次开发

前言 为了更好地去学习WPFHalcon&#xff0c;我决定去报个班学一下。原因无非是想换个工作。相关的教学视频来源于下方的Up主的提供的教程。这里只做笔记分享&#xff0c;想要源码或者教学视频可以和他联系一下。 相关链接 微软系列技术教程 WPF 年度公益课程 Halcon开发 CSD…

uniapp中uview组件库丰富的Calendar 日历用法

目录 基本使用 #日历模式 #单个日期模式 #多个日期模式 #日期范围模式 #自定义主题颜色 #自定义文案 #日期最大范围 #是否显示农历 #默认日期 基本使用 通过show绑定一个布尔变量用于打开或收起日历弹窗。通过mode参数指定选择日期模式&#xff0c;包含单选/多选/范围…