前言
万圣节即将到来,快快提着小篮子去捕获幽灵吧~
一、代码
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幽灵大作战</title>
<link rel="stylesheet" href="game.css">
</head>
<body>
<div class="bg">
<audio src="DJ KN - メインBGM (バルガス).mp3" hidden="false" autostart="true" loop="true"></audio>
<button οnclick="document.getElementsByTagName('audio')[0].play()">播放</button>
<button οnclick="document.getElementsByTagName('audio')[0].pause()">暂停</button>
<div class="elf"></div>
</div>
<script src="game.js"></script>
</body>
</html>
CSS代码:
body{
margin: 0;
padding: 0;
}
.bg{
background-image: url('万圣节2.jpg');
border: solid 1px;
width:1800px;
height: 700px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
padding: 0;
margin: auto;
}
.box{
background: url('可爱鬼.jpg');
background-size: 100% 100%;
width:40px;
height:40px;
position: absolute;
}
.elf{
background: url('篮子.png');
background-size: 100% 100%;
width:130px;
height:130px;
position: absolute;
}
JS代码:
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
let width = 900;
let height = 734;
let aBullets = [];
let container = document.getElementsByClassName("bg")[0];
let elf = document.getElementsByClassName("elf")[0];
let isOver = false;
async function main(){
deltaTime = 0;
bid = 0;
while (!isOver) {
//(1)每3秒钟,加入一个新的子弹到数组中
if (deltaTime > 40 * 3) {
bid++;
aBullets.push({ "Id": bid, "x": Math.random() * width, "y": 0, "dx": 2, "dy":
2, "domObj": null });
console.log('已经过了3秒了!');
deltaTime = 0;
}
//(2)计算数组中出现过的子弹的新位置
for (var index = 0; index < aBullets.length; index++) {
var element = aBullets[index];
if (element.x < 0 || element.x > width) {
element.dx = -element.dx;
}
if (element.y < 0 || element.y > height) {
element.dy = -element.dy;
}
element.x += element.dx;
element.y += element.dy;
if (element.domObj == null) {
//新建子弹的dom对象
var newEle = document.createElement("div");
newEle.className = "box";
container.appendChild(newEle);
element.domObj = newEle;
}
//(3.1)将每颗子弹的新位置展示出来
element.domObj.style.left = element.x + "px";
element.domObj.style.top = element.y + "px";
//(3.2)将子弹的位置与elf的位置相比较
var elfX1 = parseInt(elf.style.left);
var elfY1 = parseInt(elf.style.top);
var elfX2 = elfX1 + 60;
var elfY2 = elfY1 + 60;
if ((element.x > elfX1 && element.x < elfX2) &&
(element.y > elfY1 && element.y < elfY2)) {
isOver = true;
break;
}
}
//(4)睡眠一小段时间
await sleep(20);
deltaTime++;
}
container.removeEventListener("mousemove",mouseTrack,false);
alert("game over !");
}
function mouseTrack(event){
console.log("mouse move ..."+event.offsetX+","+event.offsetY);
curX = event.clientX;//event.offsetX;
curY = event.clientY;//offsetY;
elf.style.left = curX + "px";
elf.style.top = curY+ "px";
}
container.addEventListener("mousemove", mouseTrack);
main();
二、效果展示
三、总结
实验思路
根据老师给的视频学习,首先设置可以反弹的方块,在将方块变成数组,这样可以有多个方块随机出现在屏幕上,再给出睡眠函数控制出现的频率,然后加入控制角色elf,取方块坐标与elf的坐标相比较(碰撞检测),发生碰撞则游戏结束,出现弹窗game over。
基本框架做好后,可以插入直接想要的背景,更换喜欢的角色。
遇到的问题
①box并未在html和css中设置,他是如何存在的?
js通过document.createElement方法创建HTML元素,然后再通过appenChild方法添加进去的。
②怎样将方块更改为自己想要的角色?
答:最初是想将方块变为上次作业的卡通形象,方块的产生是在js里面完成的,要替换为自己的动画形象的话,就要在那里面改,并且要把动画形象的最外面的div盒子设置为绝对定位,考虑到比较麻烦,直接插入图片。
有两种方式–
1)js创建html元素
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d426303def32d62ab87d977658d6e6de.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8df7a8c017078468bd1fa1527e1f6cf4.png)
2)js里面直接插入图片并且设置大小
③如何插入背景音乐并且设置播放和暂停按钮?
src属性指定音频文件的路径,autoplay属性用于自动播放音频,loop属性用于循环播放音频。
④拓展:怎样实行游戏积分功能,成功躲避一个加50分?
四、收获
- 学会了怎样在html中插入音频,怎样在js中设置html的属性。
- JavaScript是单线程运行的,没有内置的sleep函数,使用睡眠函数模拟方块掉落的频率,直接使用setTimeout实现sleep()的方法,兼容性最好。
- 关于addEventListener()方法–它用于向指定元素添加事件句柄。该方法添加的事件句柄不会覆盖已存在的事件句柄。可以向一个元素添加多个事件句柄。当使用addEventListener()方法时,JavaScript从HTML标记中分离开来,可读性更强,在没有控制HTML标记时也可以添加事件监听。可以使用removeEventListener()方法来移除事件的监听。
最后,码字不易,如果觉得对你有帮助的话请点个赞吧,关注我,一起学习,一起进步!