自制HTML5游戏《贪吃蛇》

一、游戏简介

        贪吃蛇是一款经典的电子游戏,最早在1976年由Gremlin公司推出,名为"Blockade"。游戏的玩法简单却富有挑战性,玩家控制一条蛇在封闭的场地内移动,通过吃食物增长身体,同时避免撞到自己的身体或场地边界。随着时间的推移,贪吃蛇游戏经历了多次演变,但其核心玩法依然受到玩家的喜爱。

二、为什么选择贪吃蛇游戏

  1. 经典性:贪吃蛇是一款历史悠久的游戏,其经典性使得它成为学习编程和游戏开发的理想选择。

  2. 简单性:游戏规则简单,易于理解,适合初学者作为编程练习项目。

  3. 互动性:贪吃蛇游戏具有高度的互动性,玩家需要快速反应和策略思考。

  4. 可扩展性:基础游戏可以扩展多种功能,如增加难度级别、特殊道具等,为学习者提供更多实践机会。

三、游戏目标

        贪吃蛇游戏的主要目标是控制蛇头吃到随机出现在游戏场地的苹果,每吃到一个苹果,蛇的身体就会增长一段。玩家需要避免蛇头撞到自己的身体或游戏场地的边界。游戏的难度会随着蛇身的增长而增加,玩家的目标是尽可能获得更高的分数。

四、游戏界面设计

游戏界面通常由以下几个部分组成:

  1. 游戏画布:一个矩形区域,作为蛇移动和吃苹果的场所。

  2. :由多个小方块组成,每个方块代表蛇的身体部分,蛇头通常有特殊的标识。

  3. 苹果:一个单独的方块,随机出现在游戏画布上,作为蛇的食物。

  4. 得分板:显示玩家当前的得分和游戏等级。

五、游戏逻辑概述

游戏逻辑主要包括以下几个方面:

  1. 初始化:设置游戏初始状态,包括蛇的位置、长度和方向,苹果的位置,以及得分和等级。

  2. 键盘控制:监听键盘按键,根据玩家的输入改变蛇的移动方向。

  3. 移动逻辑:更新蛇的位置,使其按照指定方向移动。

  4. 碰撞检测:检查蛇头是否撞到自己、边界或苹果。

  5. 吃苹果:如果蛇头碰到苹果,更新苹果的位置,增长蛇的身体,并增加得分。

  6. 游戏结束:如果蛇撞到自己或边界,显示游戏结束的提示,并结束游戏循环。

  7. 得分和等级:根据吃到的苹果数量增加得分,并根据得分调整游戏难度。

六、创建基本的HTML5文档结构

        在创建贪吃蛇游戏之前,首先需要构建一个基本的HTML5文档结构。这个结构包括了文档的头部(head)和主体(body),其中头部用于引入CSS样式和JavaScript脚本,而主体则包含了游戏的所有元素。

源代码示例 - HTML5文档结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇游戏</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/snake.css">
</head>
<body><!-- 游戏画布和元素将在此处添加 --><script src="scripts/snake.js"></script>
</body>
</html>
设定游戏画布 (<div id="box">)

游戏画布是一个<div>元素,它作为游戏的容器,包含了蛇、苹果和得分板。这个<div>具有固定的宽度和高度,并且使用CSS样式来设置其位置和外观。

源代码示例 - HTML中的游戏画布
<div id="box"><!-- 蛇的身体由列表项组成,苹果是一个div,得分板将在JavaScript中动态添加 --><ul id="snake"></ul><div id="apple"></div>
</div>
<div id="score">得分: <span id="score-value">0</span> 等级: <span id="level-value">1</span></div>
添加游戏元素(蛇头、蛇身、苹果、得分板)
  1. 蛇头:通常用一个带有图片的<li>元素表示,这个<li><ul id="snake">的第一个子元素。

  2. 蛇身:由多个<li>元素组成,这些元素将通过JavaScript动态添加到蛇的列表中。

  3. 苹果:用一个<div id="apple">表示,它的位置将通过JavaScript动态设置。

  4. 得分板:一个包含得分和等级的<div>元素,位于游戏画布之外。

源代码示例 - JavaScript中添加蛇头和蛇身
window.onload = function() {var snakeList = document.getElementById('snake');var snakeHead = document.createElement('li');snakeHead.innerHTML = '<img src="head.png" alt="蛇头">'; // 假设有一个蛇头图片snakeList.appendChild(snakeHead);
​// 初始蛇身长度,例如5个单位for (var i = 0; i < 5; i++) {var snakeBodyPart = document.createElement('li');snakeList.appendChild(snakeBodyPart);}
​var apple = document.getElementById('apple');// 设置苹果的初始位置apple.style.left = '100px';apple.style.top = '100px';
};

七、效果图

        

八、完整代码

        HTML

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="base.css" /><link rel="stylesheet" href="snake.css" /><script src="snake.js"></script>
</head><body><div id="score">得分: <span>0</span>等级: <span>1</span></div><div id="box"><ul id="snake"><li class="heihei" id="head"><img src="right.png" alt="" /></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li><li class="heihei"></li></ul><div id="apple"></div></div><script></script>
</body></html>

        snake.css

#box{width: 800px;height: 600px;position: relative;background-color: #d5e3bd;border: 1px solid #000;margin: 30px auto;
}
#snake{/*position: absolute;*//*top: 200px;*//*left: 350px;*/
}
.heihei{width: 20px;height: 20px;/*border: 1px solid #000;*/border-radius: 10px;background-color: rgb(13, 113, 85);position: absolute;text-align: center;line-height: 20px;position: absolute;top: 200px;left: 350px;color: white;
}
#head img{width: 20px;
}
#apple{width: 20px;height: 20px;background-color: darkred;position: absolute;top: 140px;left: 400px;
}
#score{width: 100px;height: 100px;border: 1px solid #000;position: absolute;text-align: center;line-height: 100px;left: 1100px;z-index: 1;
}

        base.css

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {margin: 0;padding: 0;
}/*各浏览器显示不同,去掉蓝色边框*/
fieldset, img, input, button {border: none;padding: 0;margin: 0;outline-style: none;
}ul, ol {list-style: none;
}/*统一组合框的默认样式*/
input {padding-top: 0;padding-bottom: 0;font-family: "sums-song", "宋体";
}select, input, button {vertical-align: middle;
}select, input, textarea {font-size: 12px;margin: 0;
}/*防止拖动 影响布局*/
textarea {resize: none;
}/*去掉行内替换元素空白缝隙*/
img {border: 0;vertical-align: middle;
}table {border-collapse: collapse;
}body {font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*宋体 unicode */color: #666;background: #fff;
}/*清除浮动*/
.clearfix:before, .clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1; /*IE/7/6*/
}a {color: #666;text-decoration: none;
}a:hover {color: #C81623;
}h1, h2, h3, h4, h5, h6 {text-decoration: none;font-weight: normal;font-size: 100%;
}s, i, em {font-style: normal;text-decoration: none;
}/*京东色*/
.col-red {color: #C81623 !important;
}/*公共类*/
.w {/*版心 提取 */width: 1210px;margin: 0 auto;
}.fl {float: left;
}.fr {float: right;
}.al {text-align: left;
}.ac {text-align: center;
}.ar {text-align: right;
}.hide {display: none;
}

        js代码

window.onload = function() {var ul = document.getElementById("snake");var lis = ul.children;var head = lis[0];var img = head.getElementsByTagName("img")[0];var box = document.getElementById("box");var apple = document.getElementById("apple");var score = document.getElementById("score").getElementsByTagName("span")[0];var level = document.getElementById("score").getElementsByTagName("span")[1];var gameOver;var square = 20;var dirArr = {left: { name: "left", key: 65, point: { x: -1, y: 0 }, img: "left.png" },right: { name: "right", key: 68, point: { x: 1, y: 0 }, img: "right.png" },up: { name: "up", key: 87, point: { x: 0, y: -1 }, img: "up.png" },down: { name: "down", key: 83, point: { x: 0, y: 1 }, img: "down.png" }};var dirList = [];var currentDir = dirArr["right"];document.onkeydown = function(event) {var event = event || window.event;addDirection(event.keyCode);}function addDirection(key) {var dir;// 获取方向for (k in dirArr) {if (dirArr[k].key == key) {dir = dirArr[k];}}if (!dir) {return;}//获取上一次的方向var lastDirection = dirList[dirList.length - 1];if (!lastDirection) { lastDirection = currentDir }if (lastDirection.name == dir.name) {return;} else if (lastDirection.point.x + dir.point.x == 0 && lastDirection.point.y + dir.point.y == 0) {return;}if (dirList.length > 3) {return;}dirList.push(dir);}function getDirection(arr) {if (arr.length != 0) {currentDir = arr.shift();}return currentDir;}function point(x, y) {this.x = x;this.y = y;}function move() {//处理按键队列var d = getDirection(dirList);img.src = d.img;//下一个要走的点var pre = new point(head.offsetLeft + d.point.x * square, head.offsetTop + d.point.y * square);//死亡判定机制if (die(pre)) {clearInterval(timer)alert("GAME_OVER");return;}//吃的机制if (eat(pre)) {console.log("eat");}//移动身子for (var i = lis.length - 1; i > 0; i--) {lis[i].style.left = lis[i - 1].offsetLeft + "px";lis[i].style.top = lis[i - 1].offsetTop + "px";}head.style.left = pre.x + "px";head.style.top = pre.y + "px";}var timer = setInterval(move, 300);function die(p) {var left = p.x;var right = p.x + head.offsetWidth;var toper = p.y;var bottom = p.y + head.offsetHeight;for (var i = 1; i < lis.length - 1; i++) {if (left == lis[i].offsetLeft && toper == lis[i].offsetTop)return 1;}if (left < 0 || toper < 0 || right > box.offsetWidth || bottom > box.offsetHeight) {console.log(1)return 1;}}//初始化for (var i = 0; i < lis.length; i++) {lis[i].idx = i;lis[i].style.left = -square * i + "px";var backgroundColor = parseInt(255 * 255 * 255 * Math.random());lis[i].style.backgroundColor = "#" + backgroundColor.toString(16);}//吃function eat(p) {if (p.x == apple.offsetLeft && p.y == apple.offsetTop) {apple.style.left = 20 * Math.floor(Math.random() * 39) + "px";apple.style.top = 20 * Math.floor(Math.random() * 29) + "px";var li = document.createElement("li");li.className = "heihei";var backgroundColor = parseInt(255 * 255 * 255 * Math.random());li.style.backgroundColor = "#" + backgroundColor.toString(16);ul.appendChild(li);score.innerHTML++;clearInterval(timer);var scoreLevel = Math.floor(score.innerHTML / 4);level.innerHTML = scoreLevel + 1;var timeLevel = scoreLevel > 7 ? 7 : scoreLevel;timer = setInterval(move, 250 - timeLevel * 25);}}
}

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

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

相关文章

第3章 小功能大用处-Bitmaps、HyperLogLog、GEO

1.Bitmaps 1.1数据结构模型 现代计算机用二进制&#xff08;位&#xff09;作为信息的基础单位&#xff0c;1个字节等于8位&#xff0c;例 如“big”字符串是由3个字节组成&#xff0c;但实际在计算机存储时将其用二进制表 示&#xff0c;“big”分别对应的ASCII码分别是98、10…

22.智能指针(下)

标题 五、引用计数智能指针5.1 共享引用计数智能指针共享数据5.2 使用Box定义三个共享链表5.3 使用Rc代替Box5.4 引用计数增加实验 六、RefCell和内部可变性模式6.1 通过RefCell在运行时检查借用规则6.2 内部可变性&#xff1a;不可变值的可变借用1&#xff09;内部可变性的用例…

mysql数据库中模拟程序循环执行sql命令快速造数命令

解决复杂问题不可能通过一个 SQL 语句完成&#xff0c;我们需要执行多个 SQL 操作。流程控制语句的作用就是控 制存储过程中 SQL 语句的执行顺序&#xff0c;是我们完成复杂操作必不可少的一部分。只要是执行的程序&#xff0c;流程 就分为三大类&#xff1a; 顺序结构 &#x…

论文《Universal Graph Convolutional Networks》笔记

【UGCN】论文提出一个基本问题&#xff0c;即是否不同的网络结构属性应该采用不同的传播机制。通过实验发现&#xff0c;对于完全同配性、完全异配性和随机性的网络&#xff0c;1-hop、2-hop和k-nearest neighbor&#xff08;kNN&#xff09;邻居分别更适合作为信息传播的邻域。…

maven的安装以及配置

前言&#xff1a; Maven是一个强大的构建自动化工具&#xff0c;主要用于Java项目。它解决了软件开发中的两个方面&#xff1a; 构建和依赖管理&#xff1a;Maven通过在项目对象模型&#xff08;POM&#xff09;文件中指定依赖关系&#xff0c;简化了项目构建和依赖管理的过程…

【笔记】事务隔离级别以及MVCC解决幻读

事务提交可能碰到的问题&#xff1a; &#xff08;1&#xff09;脏读&#xff1a;事务1对数据进行修改但还没提交&#xff0c;事务2读取修改后的数据&#xff0c;之后事务1执行错误&#xff0c;回滚了&#xff0c;此时事务2的数据是错误的脏数据。 &#xff08;2&#xff09;不…

数学建模系列(2/4):建模入门

目录 引言 1. 如何开始数学建模 1.1 选择和描述问题 1.2 提出基本假设 1.3 确定模型类型 2. 建模的数学基础 2.1 线性代数基础 矩阵运算 线性方程组的解法 2.2 微分方程基础 常微分方程 偏微分方程 2.3 统计与概率基础 描述性统计 概率基础 3. 模型的求解方法 …

Linux中rm命令删除特定文件

在 Linux 中&#xff0c;你可以使用 rm 命令结合通配符来删除具有特定模式的文件&#xff0c;而不必输入完整的文件名。以下是一些常见的方法&#xff1a; 使用通配符&#xff1a; 使用星号&#xff08;*&#xff09;通配符可以匹配任意数量的字符。例如&#xff0c;如果你想要…

将Vite添加到您现有的Web应用程序

Vite&#xff08;发音为“veet”&#xff09;是一个新的JavaScript绑定器。它包括电池&#xff0c;几乎不需要任何配置即可使用&#xff0c;并包括大量配置选项。哦——而且速度很快。速度快得令人难以置信。 本文将介绍将现有项目转换为Vite的过程。我们将介绍别名、填充webp…

基于CSDN的Markdown文本编辑器的博客界面优化 | HTML | 文本标签 | 图像标签 | 个人主页引导

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 今天毛毛张分享的内容是如何在CSDN的Markdown编辑器中实现上图的效果&#xff0c;如果觉得能帮助到你的话就点击个人主页点点关注吧❗ 文章目录 1.前言2.基础知识3.字…

8、PHP 实现二进制中1的个数、数值的整数次方

题目&#xff1a; 二进制中1的个数 描述&#xff1a; 输入一个整数&#xff0c;输出该数二进制表示中1的个数。其中负数用补码表示。 <?phpfunction NumberOf1($n) {$count 0;if($n < 0){$n $n & 0x7FFFFFFF;$count;}while($n ! 0){$count;$n $n & ($n - 1…

(南京观海微电子)——DC-DC和LDO的原理及应用区别

LDO: 低压差线性稳压器&#xff0c;故名思意为线性的稳压器&#xff0c;仅能使用在降压应用中&#xff0c;也就是输出电压必需小于输入电压。 优点&#xff1a;稳定性好&#xff0c;负载响应快&#xff0c;输出纹波小。 缺点&#xff1a; 效率低&#xff0c;输入输出的电压…

直流电机双闭环控制仿真设计

1.设计题目 转速、电流双闭环直流调速系统的设计 2.设计任务 某晶闸管供电的双闭环直流调速系统&#xff0c;整流装置采用三相桥式电路&#xff0c; 基本数据为&#xff1a; 直流电动机&#xff1a;Unom220V&#xff0c;Inom136A&#xff0c;nnom1460r/min&#xff0c;Ra0…

[C++][设计模式][模板方法]详细讲解

目录 1.动机2.理解1.设计流程对比1.结构化软件设计流程2.面向对象软件设计流程 2.早绑定与晚绑定 3.模式定义4.要点总结5.代码感受1.代码一 -- 结构化1.lib.cpp2.app.cpp 2.代码二 -- 面向对象1.lib.cpp2.app.cpp 1.动机 在软件构建过程中&#xff0c;对于某一项任务&#xff…

readv() 和 writev()

Linux IO 高级函数&#xff1a;readv() 和 writev() 在Linux系统中&#xff0c;处理文件读写时&#xff0c;我们通常会用到 read() 和 write() 函数。但是&#xff0c;当我们需要处理的内存分散在多个不同的缓冲区中时&#xff0c;传统的读写函数就显得有些力不从心。这时&…

国产化平替

国产化替代&#xff0c;即国产替代&#xff0c;是指在关键技术和产品领域减少对外依赖&#xff0c;推动国内产业自主创新和升级&#xff0c;以实现关键技术和产品的国产化。在中国&#xff0c;国产化替代是国家战略的重要组成部分&#xff0c;旨在提高国家的自主创新能力和保障…

红队内网攻防渗透:内网渗透之内网对抗:信息收集篇SPN扫描DC定位角色区域定性服务探针安全防护凭据获取

红队内网攻防渗透 1. 内网信息收集1.1 域渗透的信息收集1.2域渗透的思路问题1.3 网络架构1.3.1 基本信息1.3.2 域内定位1.3.3 域内角色1.3.4 其他信息1.3.5 安全防护:1.3.6 凭据口令:1. 内网信息收集 #知识点: 1、基石框架篇-单域架构-权限控制-用户和网络 2、基石框架篇-…

Nginx负载均衡之Memcached缓存模块

Nginx 的 ngx_http_memcached_module 模块本身并没有提供缓存功能&#xff0c;它只是一个将用户请求转发到 Memcached 服务器的代理模块。 在以 Memcached 服务器为缓存应用的方案中&#xff0c;Memcached 作为内容缓存的存储服务器&#xff0c;用户通过 URL 为 Memcac…

古文字识别笔记

前置知识 部件&#xff1a;大部分的汉字是由若干组笔画结构拼合而成的&#xff0c;这些相对独立的笔画结构称为「部件」。 部件是大于基本笔画&#xff08;例如&#xff1a;点、横、撇、捺等&#xff09;而小于或等同于 偏旁 的结构单位。 例如「测」字有三个部件&#xff1a;…

Ubuntu换源

查看发行版本&#xff0c;记下来 cat /etc/issue 根据发行版本找到对应的配置文件copy起来 清华源 ubuntu | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 阿里源 ubuntu镜像_ubuntu下载地址_ubuntu安装教程-阿里巴巴开源镜像站 (aliyun.com…