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

自制HTML5游戏《贪吃蛇》

news 来源：原创 2024/9/29 12:18:48

一、游戏简介

        贪吃蛇是一款经典的电子游戏，最早在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);}}
}

相关文章：

  • 【无需任何插件】将VOS录音文件REC转MP3，REC转WAV或MP3的具体流程
  • win10 安装openssl并使用openssl创建自签名证书
  • python flask配置邮箱发送功能，使用flask_mail模块
  • shell的正则表达式
  • java实现持续集成
  • 使用 C++11 Lambda 表达式在 Qt 中连接信号与槽
  • MySQL中的系统变量权限
  • 字节跳动：从梦想之芽到参天大树
  • 二叉树经典OJ练习
  • Webfunny【用户细查】七项功能升级更新：大幅提升用户排查效率！
  • CLIP-ReID代码解读七——model.py上
  • gitee添加别人的仓库后，在该仓库里添加文件夹/文件
  • 协程执行顺序引发的问题
  • 如何配置taro
  • C++STL 初阶（5）vector的简易实现（上）
  • 【140天】尚学堂高淇Java300集视频精华笔记（86-87）
  • Gradle 5.0 正式版发布
  • iOS小技巧之UIImagePickerController实现头像选择
  • JavaScript学习总结——原型
  • JavaScript异步流程控制的前世今生
  • java多线程
  • Mysql数据库的条件查询语句
  • Phpstorm怎样批量删除空行？
  • Python进阶细节
  • Python中eval与exec的使用及区别
  • 给github项目添加CI badge
  • 聊聊hikari连接池的leakDetectionThreshold
  • 山寨一个 Promise
  • 实战｜智能家居行业移动应用性能分析
  • 在weex里面使用chart图表
  • Nginx实现动静分离
  • #《AI中文版》V3 第 1 章 概述
  • #include到底该写在哪
  • #systemverilog# 之 event region 和 timeslot 仿真调度（十）高层次视角看仿真调度事件的发生
  • #微信小程序：微信小程序常见的配置传旨
  • （1/2）敏捷实践指南 Agile Practice Guide （[美] Project Management institute 著）
  • （顶刊）一个基于分类代理模型的超多目标优化算法
  • （附源码）spring boot车辆管理系统 毕业设计 031034
  • （附源码）spring boot校园拼车微信小程序 毕业设计 091617
  • （牛客腾讯思维编程题）编码编码分组打印下标题目分析
  • （七）c52学习之旅-中断
  • （四）模仿学习-完成后台管理页面查询
  • (算法)硬币问题
  • （五）c52学习之旅-静态数码管
  • （学习日记）2024.04.10：UCOSIII第三十八节：事件实验
  • （一）Dubbo快速入门、介绍、使用
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .net dataexcel 脚本公式 函数源码
  • .NET Framework 4.6.2改进了WPF和安全性
  • .NET 中创建支持集合初始化器的类型
  • .NET企业级应用架构设计系列之开场白
  • .NET设计模式（7）：创建型模式专题总结（Creational Pattern）
  • .net中应用SQL缓存（实例使用）
  • .vue文件怎么使用_vue调试工具vue-devtools的安装
  • @JoinTable会自动删除关联表的数据