使用HTML制作一个端午赛龙舟小游戏

向右看齐 2023-10-12 18:37 38阅读 0赞

> 在这个信息爆炸的时代，开发者们肩负着前所未有的责任与挑战，以屈原名言 **路漫漫其修远兮，吾将上下而求索** 为指引，使用HTML制作一个赛龙舟小游戏，以此激励广大开发者在技术征途上不断求索，追求极致。

![6c7c8e39810e4aa58161f3e8130bb53a.gif][] ![a9771c0c0eb242fd93040cffdfa72477.png][] ![e586802e56d44a49b310aa4c77f35d53.png][]

###  ###

*  一、前期准备
 *   *  1.1、项目创建
     *   *  HBuilderX
     *  1.2、素材收集
     *  1.3、外部插件
 *  二、开发步骤
 *   *  2.1、HTML
     *  2.2、游戏加载
     *   *  界面设置
         *  进度条动画
         *  背景音乐
     *  2.3、障碍移动
     *  2.4、键盘事件
     *   *  龙舟移动
         *  键盘事件属性
     *  2.5、碰撞检测
     *   *  停止音乐
         *  关闭定时器
         *  分数提示
 *  三、优化
 *   *  3.1、背景切换
     *  3.2、结语

# 一、前期准备 #

## 1.1、项目创建 ##

> 该游戏所涉及到的技术只有HTML、CSS、JS，所以这里只需要用到一些前端开发idea，后端以及数据库都没有用到，使用HBuilderX或者WebStorm都可以，这一小节主要介绍在HBuilderX中创建项目以及开发的过程。

### HBuilderX ###

> 打开开发工具，在左上角点击下图所选择的图标，选择项目

![在这里插入图片描述][6015537354b84b1cb796367d2a7793bc.png]

> 左侧tab选择普通项目，右侧选择空项目或者基本HTML项目均可，输入项目名称以及位置后在右下角点击保存即可创建一个项目。

![在这里插入图片描述][77cdf99e1dd6495fad8b759ec278156c.png]

## 1.2、素材收集 ##

> 准备一些带有端午元素的素材图片，粽子，龙舟等，将素材存放至上述步骤所创建的images文件夹中。

![f2d7fb87489f4e0eb286d9baf003ba0f.png][] ![a37015e23c8348c7bbd43809f1d351bc.png][] ![bfc91712299b4378be9865ad5d353cea.png][] ![48a398d16a374896a3237b429ddbda8b.png][] ![008d3f0811ea4c788777f4383b7b4353.jpeg][]

## 1.3、外部插件 ##

> 分别引入layui以及jqmeter.min.js，前者用于快速构建网页界面的同时将JS动态化渲染；后者则是用于实现进度条加载动画。

![在这里插入图片描述][777523b7775b46e284efd85a127bd89f.png]

# 二、开发步骤 #

## 2.1、HTML ##

> 选中项目，选择新建HTML文件，它会在创建该页面的同时自动默认创建结构标签，只需要在body标签中进行开发即可。

![在这里插入图片描述][431942c39c5c43d3b735b13a1adc5468.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    </html>

## 2.2、游戏加载 ##

### 界面设置 ###

> 在body中新建一个div，设置唯一ID，同时通过css设置其背景图

> 增加一个开始游戏的按钮，通过设置定位的方式将其固定在界面上实现效果如下。

![在这里插入图片描述][29b2f065a9174d7286122c0e3eb97c75.png]

.start{
                width: 310px;
                height: 120px;
                position: absolute;
                left: 50%;
                top: 200px;
                margin-left: -155px;
                padding: .3em .8em;
                border: 1px solid rgba(0,0,0,.1);
                background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
                border-radius: .2em;
                box-shadow: 0 .05em .25em rgba(0,0,0,.5);
                outline: none;
                color: white;
                text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
                font-size: 60px;
                line-height: 1.5;
                cursor: pointer;
                z-index: 999;
                background-color: #6b0;
            }

### 进度条动画 ###

> 使用script标签引入外部插件，同时在js中给开始按钮增加对应的点击事件

> jqmeter使用起来非常简单，在HTML结构中增加一个div标签，同时在点击按钮后调用该进度条插件。注意：该进度条插件有两个必填的参数：goal和raised。此外还有一些可用的参数，其中一些参数也可以使用css来实现，如颜色参数；

![在这里插入图片描述][7929f8de05a64875ab72a756bbdb96d5.gif]

$('#jqmeter-container').jQMeter({
               goal:'$100',
               raised:'$100',
               animationSpeed :5000,
               counterSpeed: 5000
           });

### 背景音乐 ###

> 设置audio标签，当点击开始时自动进行播放

## 2.3、障碍移动 ##

> 设置定时函数随机生成障碍物，通过变量控制所生成的坐标。

![在这里插入图片描述][1163bbfdeb8c40da9fc7f4562e66f505.gif]

## 2.4、键盘事件 ##

### 龙舟移动 ###

> 通过操作dom元素的方式获取keydown键盘事件，这里有针对性的写一些常用的按键即可，如A、D、方向键等。**KeyDown()功能:检查用户是否按了键盘上指定的键。语法:KeyDown ( keycode )参数 keycode：KeyCode枚举类型或integer类型，指明要检测的按键或某个键的ASCII值返回值Boolean。如果用户按了keycode参数指定的按键，函数返回TRUE，否则返回FALSE。**

![在这里插入图片描述][9393d4a38d294b889cb3b44c18983c84.gif]

$(document).keydown(function (ev) {
    		var left=$(".car").offset().left;
    		var top=$(".car").offset().top;
    		//龙舟移动
    		switch (ev.which) {
    		case 65://a
    		$(".car").offset({left:Math.max(left-10,$(".box").offset().left)});
    		break;
    		case 68://d
    		$(".car").offset({left:Math.min(left+10,
    		$(".box").offset().left+$(".box").width()-$(".car").width())});
    		break;
    		case 37:
    		$(".car").offset({left:Math.max(left-10,$(".box").offset().left)});
    		break;
    		case 39:
    		$(".car").offset({left:Math.min(left+10,
    		$(".box").offset().left+$(".box").width()-$(".car").width())});
    		break;
    });

### 键盘事件属性 ###

> 键盘事件定义的属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>keyCode</td> 
   <td>该属性包含键盘中对应键位的键值</td> 
  </tr> 
  <tr> 
   <td>charCode</td> 
   <td>该属性包含键盘中对应键位的Unicode编码，仅DOM支持</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>发生事件的节点(包含元素),仅DOM支持</td> 
  </tr> 
  <tr> 
   <td>srcElement</td> 
   <td>发生事件的元素，仅IE支持</td> 
  </tr> 
  <tr> 
   <td>shiftKey</td> 
   <td>是否按下Shift键，如果按下返回true，否则为false</td> 
  </tr> 
  <tr> 
   <td>ctrlKey</td> 
   <td>是否按下Ctrl键，如果按下返回true，否则为false</td> 
  </tr> 
  <tr> 
   <td>altKey</td> 
   <td>是否按下Alt键，如果按下返回true，否则为false</td> 
  </tr> 
  <tr> 
   <td>metaKey</td> 
   <td>是否按下Meta键，如果按下返回true，否则为false，仅DOM支持</td> 
  </tr> 
 </tbody> 
</table>

> 键位和码值对照表

<table> 
 <thead> 
  <tr> 
   <th>键位</th> 
   <th>码值</th> 
   <th>键位</th> 
   <th>码值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0~9(数字键)</td> 
   <td>48~57</td> 
   <td>A~Z(字母键)</td> 
   <td>65~90</td> 
  </tr> 
  <tr> 
   <td>Backspace(退格键)</td> 
   <td>8</td> 
   <td>Tab(制表键)</td> 
   <td>9</td> 
  </tr> 
  <tr> 
   <td>Enter(回车键)</td> 
   <td>13</td> 
   <td>Space(空格键)</td> 
   <td>32</td> 
  </tr> 
  <tr> 
   <td>Left arrow(左箭头键)</td> 
   <td>37</td> 
   <td>Top arrow(上箭头键)</td> 
   <td>38</td> 
  </tr> 
  <tr> 
   <td>Rigth arrow(右箭头键)</td> 
   <td>39</td> 
   <td>Down arrow(下箭头键)</td> 
   <td>40</td> 
  </tr> 
 </tbody> 
</table>

> 代码示例：演示了如何使用方向键控制页面元素的移动效果

<div id="box"></div>
    <script>
    	var box = document.getElementById("box"); //获取页面元素的引用指针
    	box.style.position = "absolute"; //色块绝对定位
    	box.style.width = "20px"; //色块宽度
    	box.style.height = "20px"; //色块高度
    	box.style.backgroundColor = "red"; //色块背景
    	document.onkeydown = keyDown;//在Document对象中注册keyDown事件处理函数
    </script>

## 2.5、碰撞检测 ##

### 停止音乐 ###

> 通过操作dom元素的方式获取audio标签

var explodeAudio=document.getElementById("explode");

> 设置为play

explodeAudio.play();
    explodeAudio.currentTime=0;

### 关闭定时器 ###

> 使用clearInterval清除全局定义的定时器

clearInterval(blockInter);
    clearInterval(scoreInter);
    clearInterval(backInter);
    clearInterval(colorInter);

### 分数提示 ###

> 通过layui弹出层将最终分数进行提示

![在这里插入图片描述][8ed291e66fef49aea6241688e26228d7.png]

$(".box .block").css("background","url(\"images/explode.png\")")
     var index =layer.alert("<br>"+"<br>"+"失败!最终得分："+score,{
         title:false,
         closeBtn:0,
         btn: ['重来']
    
     },function () {
         window.location.reload();
     });

# 三、优化 #

## 3.1、背景切换 ##

> 设置定时器，根据所获取的分数加载不同的关卡背景

![在这里插入图片描述][8a5a6656c3e24c9f9d832762236de129.png]

var colorInter= setInterval(colorFn,10000);
    function colorFn() {
           color>50?color-=10:color=50;
           lv+=1;
           backColor="rgb("+color+','+color+','+color+')';
           //speed值
           speed<=100?speed=100:speed-=100;
           $(".speed").text("speed:"+speed);
           $(".box").css("background",backColor);
        
       }

> 根据不同的分数提示不同的级别

![在这里插入图片描述][9f7b0bcb93a24878b34187108b67adaa.png]

$(".lv").text("Lv"+lv);
           var index= layer.open({
               type:1,
               content:$(".lv"),
               time:1000,
               scrollbar:false,
               move:false,
               title:false,
               closeBtn:false,
               shade:0,
               offset: '100px'
    
           });
           layer.style(index, {
               background:"rgba(0,0,0,0)",
               border: "none",
               boxShadow: "none"
           });

## 3.2、结语 ##

> **因外部JS较大，就没有全部通过代码块的方式放在文章中，这里主要讲解了一下实现思路跟部分关键代码，对游戏感兴趣的可以直接在文章里下载代码包。**  
> 最后祝大家端午安康，记得吃粽子，无论咸甜，都是粽情粽义。

[6c7c8e39810e4aa58161f3e8130bb53a.gif]: https://img-blog.csdnimg.cn/6c7c8e39810e4aa58161f3e8130bb53a.gif
[a9771c0c0eb242fd93040cffdfa72477.png]: https://img-blog.csdnimg.cn/a9771c0c0eb242fd93040cffdfa72477.png
[e586802e56d44a49b310aa4c77f35d53.png]: https://img-blog.csdnimg.cn/e586802e56d44a49b310aa4c77f35d53.png
[6015537354b84b1cb796367d2a7793bc.png]: https://img-blog.csdnimg.cn/6015537354b84b1cb796367d2a7793bc.png
[77cdf99e1dd6495fad8b759ec278156c.png]: https://img-blog.csdnimg.cn/77cdf99e1dd6495fad8b759ec278156c.png
[f2d7fb87489f4e0eb286d9baf003ba0f.png]: https://img-blog.csdnimg.cn/f2d7fb87489f4e0eb286d9baf003ba0f.png
[a37015e23c8348c7bbd43809f1d351bc.png]: https://img-blog.csdnimg.cn/a37015e23c8348c7bbd43809f1d351bc.png
[bfc91712299b4378be9865ad5d353cea.png]: https://img-blog.csdnimg.cn/bfc91712299b4378be9865ad5d353cea.png
[48a398d16a374896a3237b429ddbda8b.png]: https://img-blog.csdnimg.cn/48a398d16a374896a3237b429ddbda8b.png
[008d3f0811ea4c788777f4383b7b4353.jpeg]: https://img-blog.csdnimg.cn/008d3f0811ea4c788777f4383b7b4353.jpeg
[777523b7775b46e284efd85a127bd89f.png]: https://img-blog.csdnimg.cn/777523b7775b46e284efd85a127bd89f.png
[431942c39c5c43d3b735b13a1adc5468.png]: https://img-blog.csdnimg.cn/431942c39c5c43d3b735b13a1adc5468.png
[29b2f065a9174d7286122c0e3eb97c75.png]: https://img-blog.csdnimg.cn/29b2f065a9174d7286122c0e3eb97c75.png
[7929f8de05a64875ab72a756bbdb96d5.gif]: https://img-blog.csdnimg.cn/7929f8de05a64875ab72a756bbdb96d5.gif
[1163bbfdeb8c40da9fc7f4562e66f505.gif]: https://img-blog.csdnimg.cn/1163bbfdeb8c40da9fc7f4562e66f505.gif
[9393d4a38d294b889cb3b44c18983c84.gif]: https://img-blog.csdnimg.cn/9393d4a38d294b889cb3b44c18983c84.gif
[8ed291e66fef49aea6241688e26228d7.png]: https://img-blog.csdnimg.cn/8ed291e66fef49aea6241688e26228d7.png
[8a5a6656c3e24c9f9d832762236de129.png]: https://img-blog.csdnimg.cn/8a5a6656c3e24c9f9d832762236de129.png
[9f7b0bcb93a24878b34187108b67adaa.png]: https://img-blog.csdnimg.cn/9f7b0bcb93a24878b34187108b67adaa.png