Web开发---幽灵保卫战

最新推荐文章于 2024-09-09 21:14:24 发布

Dusk_L&U

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量817

点赞数 19

分类专栏： web开发文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_74299308/article/details/135876237

版权

web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个简单的万圣节游戏，包括代码实现、效果展示、遇到的问题以及解决方案，如音频处理、碰撞检测和游戏积分功能。作者还分享了JavaScript单线程编程和事件处理的知识。

摘要由CSDN通过智能技术生成

前言

万圣节即将到来，快快提着小篮子去捕获幽灵吧~

一、代码

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元素

,在css中box里面插入图片
在这里插入图片描述

2）js里面直接插入图片并且设置大小
在这里插入图片描述
③如何插入背景音乐并且设置播放和暂停按钮？

src属性指定音频文件的路径，autoplay属性用于自动播放音频，loop属性用于循环播放音频。

④拓展：怎样实行游戏积分功能，成功躲避一个加50分？

四、收获

学会了怎样在html中插入音频，怎样在js中设置html的属性。
JavaScript是单线程运行的，没有内置的sleep函数，使用睡眠函数模拟方块掉落的频率，直接使用setTimeout实现sleep()的方法，兼容性最好。
关于addEventListener()方法–它用于向指定元素添加事件句柄。该方法添加的事件句柄不会覆盖已存在的事件句柄。可以向一个元素添加多个事件句柄。当使用addEventListener()方法时,JavaScript从HTML标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。可以使用removeEventListener()方法来移除事件的监听。

最后，码字不易，如果觉得对你有帮助的话请点个赞吧，关注我，一起学习，一起进步！

Dusk_L&U

关注

19
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
Web开发---幽灵保卫战

万圣节即将到来，快快提着小篮子去捕获幽灵吧~首先设置可以反弹的方块，在将方块变成数组，这样可以有多个方块随机出现在屏幕上，再给出睡眠函数控制出现的频率，然后加入控制角色elf，取方块坐标与elf的坐标相比较（碰撞检测），发生碰撞则游戏结束，出现弹窗game over。基本框架做好后，可以插入直接想要的背景，更换喜欢的角色。
复制链接

扫一扫

专栏目录