在这个信息爆炸的时代，开发者们肩负着前所未有的责任与挑战，以屈原名言 路漫漫其修远兮，吾将上下而求索 为指引，使用HTML制作一个赛龙舟小游戏，以此激励广大开发者在技术征途上不断求索，追求极致。
- 一、前期准备
- 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
打开开发工具，在左上角点击下图所选择的图标，选择项目
左侧tab选择普通项目，右侧选择空项目或者基本HTML项目均可，输入项目名称以及位置后在右下角点击保存即可创建一个项目。
1.2、素材收集
准备一些带有端午元素的素材图片，粽子，龙舟等，将素材存放至上述步骤所创建的images文件夹中。
1.3、外部插件
分别引入layui以及jqmeter.min.js，前者用于快速构建网页界面的同时将JS动态化渲染；后者则是用于实现进度条加载动画。
二、开发步骤
2.1、HTML
选中项目，选择新建HTML文件，它会在创建该页面的同时自动默认创建结构标签，只需要在body标签中进行开发即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
2.2、游戏加载
界面设置
在body中新建一个div，设置唯一ID，同时通过css设置其背景图
<style>
#backShadow{
position: absolute;
width: 100%;
height: 100%;
background: url("images/back.jpg") no-repeat top;
background-size: cover;
z-index: 222;
}
</style>
<div id="backShadow"></div>
增加一个开始游戏的按钮，通过设置定位的方式将其固定在界面上实现效果如下。
.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中给开始按钮增加对应的点击事件
<script src="js/jquery-3.4.1.min.js"></script>
<script src="lib/layer/layer.js"></script>
<script src="scrollBar/jqmeter.min.js"></script>
/*******************点击开始按钮*****************************/
$(".start").on("click",function () {
});
jqmeter使用起来非常简单，在HTML结构中增加一个div标签，同时在点击按钮后调用该进度条插件。注意：该进度条插件有两个必填的参数：goal和raised。此外还有一些可用的参数，其中一些参数也可以使用css来实现，如颜色参数；
$('#jqmeter-container').jQMeter({
goal:'$100',
raised:'$100',
animationSpeed :5000,
counterSpeed: 5000
});
背景音乐
设置audio标签，当点击开始时自动进行播放
<audio src="source/explode.mp3" id="explode"></audio>
2.3、障碍移动
设置定时函数随机生成障碍物，通过变量控制所生成的坐标。
var leftSkip=0,speed=2000;
var target=$(window).height(),skip=0,score=0;
var blockInter= setInterval(blockFn,speed);
function blockFn() {
$(".block").animate({
top:target
},speed,"linear",function () {
leftSkip=Math.random()*250;
$(".block").css({"top":-70, "left":leftSkip});
});
};
2.4、键盘事件
龙舟移动
通过操作dom元素的方式获取keydown键盘事件，这里有针对性的写一些常用的按键即可，如A、D、方向键等。KeyDown()功能:检查用户是否按了键盘上指定的键。语法:KeyDown ( keycode )参数 keycode：KeyCode枚举类型或integer类型，指明要检测的按键或某个键的ASCII值返回值Boolean。如果用户按了keycode参数指定的按键，函数返回TRUE，否则返回FALSE。
$(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;
});
键盘事件属性
键盘事件定义的属性
| 属性 | 说明 |
|---|---|
| keyCode | 该属性包含键盘中对应键位的键值 |
| charCode | 该属性包含键盘中对应键位的Unicode编码，仅DOM支持 |
| target | 发生事件的节点(包含元素),仅DOM支持 |
| srcElement | 发生事件的元素，仅IE支持 |
| shiftKey | 是否按下Shift键，如果按下返回true，否则为false |
| ctrlKey | 是否按下Ctrl键，如果按下返回true，否则为false |
| altKey | 是否按下Alt键，如果按下返回true，否则为false |
| metaKey | 是否按下Meta键，如果按下返回true，否则为false，仅DOM支持 |
键位和码值对照表
| 键位 | 码值 | 键位 | 码值 |
|---|---|---|---|
| 0~9(数字键) | 48~57 | A~Z(字母键) | 65~90 |
| Backspace(退格键) | 8 | Tab(制表键) | 9 |
| Enter(回车键) | 13 | Space(空格键) | 32 |
| Left arrow(左箭头键) | 37 | Top arrow(上箭头键) | 38 |
| Rigth arrow(右箭头键) | 39 | Down arrow(下箭头键) | 40 |
代码示例：演示了如何使用方向键控制页面元素的移动效果
<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弹出层将最终分数进行提示
$(".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、背景切换
设置定时器，根据所获取的分数加载不同的关卡背景
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);
}
根据不同的分数提示不同的级别
$(".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较大，就没有全部通过代码块的方式放在文章中，这里主要讲解了一下实现思路跟部分关键代码，对游戏感兴趣的可以直接在文章里下载代码包。
最后祝大家端午安康，记得吃粽子，无论咸甜，都是粽情粽义。
