JS实现接掉落块游戏

已于 2022-04-29 17:14:16 修改
阅读量2k 收藏 9
点赞数 1
分类专栏： JavaScript 文章标签： javascript
于 2022-04-29 17:05:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A4465643/article/details/124499129
版权
本文介绍了一款H5小游戏的实现过程，玩家需在规定时间内接住掉落的元素，接住特定元素能增加能量，能量满则游戏成功。游戏失败条件包括能量未满或时间耗尽。文章详细讲解了HTML结构、CSS样式和JavaScript逻辑，包括盒子移动、动态生成图片、倒计时和随机数生成等关键功能，并提供了失败和成功的两种情况展示。
摘要由CSDN通过智能技术生成

文章目录

前言 : H5小游戏， 在规定时间内， 接掉落块，接到掉落块1，能量减1。接到掉落块2 ， 能量加1， 能量满， 游戏成功。 规定时间内，能量条未满或时间到则游戏失败

一、效果

接掉落块
失败效果： 在这里插入图片描述
成功效果图：在这里插入图片描述

二、html结构

1.布局

代码如下（示例）：

  <div class="bg">
    </div>
    <div class="date-box">
        <span >10s</span>
    </div>

    <div class="box">
        <img src="./box.jpg" alt="">

    </div>
    <div class="result-box">
        <div class="result-box-img">
            <img src="./gameImg/progress.png" alt="">
        </div>
       
    </div>
    <div class="dialog">
        <div class="img-box">
            <img src="./img2/success.png" alt="">
            <span class="dialog-result"></span>
            <button class="nav-to"></button>
        </div>
    </div>

    <div class="failDialog">
        <div class="img-box">
            <img src="./img2/lose.jpg" alt="">
            <span class="dialog-result"></span>
            <button class="again"></button>
        </div>
    </div>

    <div class="gameOverDialog">
        <div class="img-box">
            <img src="./gameImg/gameOver.png" alt="">
            <span class="dialog-result"></span>
            <button class="back"></button>
        </div>
    </div>

2.样式

代码如下（示例）：

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img {
            vertical-align: middle;
            max-width: 100%;
        }

        .bg img,
        .box img {
            width: 100%;
        }

        .bg {
            width: 100%;
            height: 100vh;
            /* background-image: url('./gameImg/bgIMg.jpg'); */
            background-size: 100% 100%;
        }

        .box {
            width: 25vw;
            position: fixed;
            left: 36%;
            bottom: 28vw;
        }

        .el {
            width: 12vw;
            position: fixed;
            pointer-events: none;
        }

        .date-box {
            position: fixed;
            right: 3vw;
            top: 3vw;
            width: 22vw;
        }

        .date-box span {
            position: absolute;
            width: 13vw;
            height: 6vw;
            line-height: 6vw;
            left: 7vw;
            top: 2vw;
            text-align: center;
            color: #d7574f;
            font-size: 8vw;
        }

        .result-box {
            position: absolute;
            left: 4vw;
            top: 194vw;
            width: 92%;
            height: 18vw;

            background-size: 100% 100%;
        }

        .result-box .result-box-img {
            /* width: 18%; */
            position: absolute;
            left: 25.5%;
            bottom: 10%;
            height: 14vw;
            width: 50%;
            overflow: hidden;
        }
        .result-box .result-box-img img{
            height: 14vw;
            width: 100%;
            position: absolute;
        }
        .dialog {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .6);
        }

        .dialog .img-box {
            width: 70vw;
            position: relative;
        }

        .dialog button {
            position: absolute;
            left: 18vw;
            top: 87vw;
            border: none;
            width: 34vw;
            height: 11vw;
            opacity: 0;
        }

        .dialog .again {
            left: 26vw;
            top: 127vw;
            width: 17vw;
            height: 7vw;
        }

        .dialog-result {
            position: absolute;
            left: 27vw;
            top: 37.3vw;
            width: 8vw;
            font-size: 5vw;
            color: #f1f7ee;
            height: 8vw;
            line-height: 8vw;
            text-align: center;
        }

        .fistDialog {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .6);
        }

        .fistDialog .img-box {
            width: 70vw;
            position: relative;
        }

        .fistDialog button {
            position: absolute;
            left: 18vw;
            top: 101vw;
            border: none;
            width: 34vw;
            height: 11vw;
            opacity: 0;
        }

        .fistDialog .again {
            left: 26vw;
            top: 127vw;
            width: 17vw;
            height: 7vw;
        }

        .fistDialog-result {
            position: absolute;
            left: 27vw;
            top: 37.3vw;
            width: 8vw;
            font-size: 5vw;
            color: #f1f7ee;
            height: 8vw;
            line-height: 8vw;
            text-align: center;
        }

        .failDialog,
        .gameOverDialog {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .6);
        }

        .failDialog .img-box,
        .gameOverDialog .img-box {
            width: 70vw;
            position: relative;
        }

        .failDialog button,
        .gameOverDialog button {
            position: absolute;
            left: 18vw;
            top: 101vw;
            border: none;
            width: 34vw;
            height: 11vw;
            opacity: 0;
        }

        .failDialog .again,
        .gameOverDialog .back {
            position: absolute;
            left: 21vw;
            top: 87.3vw;
            width: 29vw;
            font-size: 5vw;
            color: #f1f7ee;
        }

3.控制盒子移动

盒子左右移动代码如下（示例）：

   var startX, startY, endX, endY, changeX, changeY;
        $('.box').on("touchstart", function (event) {
            event.preventDefault();
            if (!event.touches.length) return;
            var touch = event.touches[0];
            startX = touch.pageX;
            endX = startX;
            startY = touch.pageY;
            endY = startY;
            return false
        });
        $('.box').on("touchmove", function (event) {
            event.preventDefault();
            if (!event.touches.length) return;
            var touch = event.touches[0];
            startX = endX;
            endX = touch.pageX;
            changeX = endX - startX;
            startY = endY;
            endY = touch.pageY;
            changeY = endY - startY;
            var ml = (parseInt($(this).css('left')) + changeX);
            var tl = (parseInt($(this).css('top')) + changeY);
            // console.log(ml)
            // 拖到底就不能再拖动

            if (ml < 0) {
                ml = 0;
            }
            if ((ml + $(this).outerWidth()) > window.innerWidth) {
                ml = window.innerWidth - $(this).outerWidth();
            }
            $(this).css("left", ml);
        });
        $('.box').on("touchend", function (event) {
            event.preventDefault();
        });

3.动态生成图片

 let imgArr = ['./gameImg/boom.png'];
 let imgArr1 = ['./img2/money.png',];



 initElTimer = setInterval(() => {
      // 动态生成img
       if (Math.random() > 0.4) {
       // 增加的
             let src = imgArr1[randomNum(0, 0)];
           new initEl(src, false);
         } else {
             new initEl(imgArr[randomNum(0, 0)], true);
          }
    }, 500)

4.倒计时

            setTimeout(() => {
                dateTimer = setInterval(() => {
                    date--;
                    $('.date-box span').text(date + 's');
                    if (date <= 0) {
                        clearInterval(dateTimer);
                        clearInterval(initElTimer);
                       
                        $('.el').hide();
                    }
                }, 1000);
            }, 1000)

5.生成随机数

        function randomNum(minNum, maxNum) {
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        }

三、JS逻辑

      let result = -47;
        let imgArr = ['./gameImg/boom.png'];
        let imgArr1 = ['./img2/money.png',];

        let date = 10;
        var flag = 1;

        $('.nav-to').on('click', function () {
            console.log("跳转页面");
           
        })

        let initElTimer = null;
        let dateTimer = null

        initPage()

        function initPage() {
            result = -47;
            date = 10;
            $('.box').css('left', '36%');

            $('.result-box img').css('left',"-47vw")
            initElTimer = setInterval(() => {
                // 动态生成img
                if (Math.random() > 0.4) {
                    // 增加的
                    let src = imgArr1[randomNum(0, 0)];

                    new initEl(src, false);
                } else {
                    new initEl(imgArr[randomNum(0, 0)], true);
                }
            }, 500)

            // 倒计时
            setTimeout(() => {
                dateTimer = setInterval(() => {
                    date--;
                    $('.date-box span').text(date + 's');
                    if (date <= 0) {
                        clearInterval(dateTimer);
                        clearInterval(initElTimer);
                        $('.el').hide();
                        if (flag == 1) {
                            console.log('第一次挑战失败');
                            $('.failDialog').css('display', 'flex');
                            $('.failDialog .again').on('click', function () {
                                $('.failDialog').hide();
                                initPage();
                                flag++
                                console.log('flag', flag);
                            })
                        } else if (flag >= 2) {
                            console.log('第二次挑战失败');
                            $('.gameOverDialog').css('display', 'flex');
                            $('.gameOverDialog .back').on('click', function () {
                                $('.gameOverDialog').hide();
                                console.log('回到首页');

                            })
                        }

                    }
                }, 1000);
            }, 1000)
        }


        class initEl {
            constructor(imgSrc, isMinus) {
                this.imgSrc = imgSrc;
                this.isMinus = isMinus;
                this.timer = null;
                this.el = null;
                this.createEl();
            }
            createEl() {
                this.el = document.createElement('img');
                this.el.className = 'el';
                this.el.src = this.imgSrc;
                this.el.setAttribute('style', `left: ${randomNum(0, 80)}vw; top: ${randomNum(0, -40)}vw;`);
                document.body.appendChild(this.el);
                this.setTimer()
            }
            setTimer(el) {
                this.timer = setInterval(() => {
                    this.el.style.top = this.el.offsetTop + 10 + 'px';
                    let bt = $('.box').offset().top,
                        bh = $('.box').outerHeight(),
                        bl = $('.box').offset().left,
                        bw = $('.box').outerWidth();

                    let t = $(this.el).offset().top,
                        h = $(this.el).outerHeight(),
                        l = $(this.el).offset().left,
                        w = $(this.el).outerWidth();

                    if ((t + h) > bt) {
                        // 已超过盒子
                        // 从上往下的临界值为10px
                        if (date > 0 && (t + h) - bt < (h + 10)) {
                            // date 判断是否在有效时间内
                            if (l + w > bl && l < bl + bw) {
                                if (this.isMinus) {
                                    result -= 9.6;
                                } else {
                                    result += 9.6;

                                }
                                if (result >= -2) {
                                    result = 0;
                                    clearInterval(dateTimer);
                                    clearInterval(initElTimer);
                                    $('.el').hide();
                                    $('.dialog').css('display', 'flex');
                                    console.log('挑战成功');
                                    $('.result-box img').css('left', result + 'vw')
                                    clearInterval(this.timer);
                                    document.body.removeChild(this.el);
                                    return
                                }
                                if (result < -47) {
                                    result = -47;
                                }
                                $('.result-box img').css('left', result  + 'vw')
                                // debugger
                                clearInterval(this.timer);
                                document.body.removeChild(this.el);
                                return
                            }
                        }
                        if ((t + h) - bt > window.innerHeight + h) {

                            clearInterval(this.timer);
                            document.body.removeChild(this.el);
                        }
                    }
                }, 20)
            }
        }

        //生成从minNum到maxNum的随机数
        function randomNum(minNum, maxNum) {
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        }

总结

以上就是JS实现接掉落块游戏全部代码，添加了两次机会判断，可控制下落速度、时间。

这家伙不愿透露姓名
关注
专栏目录
【经典游戏】JavaScript实现经典的水果忍者小游戏
m0_46013789的博客
06-03 1448
大家还记得水果忍者这个游戏吗？想当年，这也是个风靡全国的游戏，基本每个人都玩过。今天小编就用JavaScript库复刻这一经典游戏，需要的可以参考一下。
前端技术搭建弹珠小游戏（内附源码）
最新发布
官方推荐
05-08 7万+
上周我们实通过前端基础实现了小人逃脱，当然很多伙伴再评论区提出了想法，后续我们会考虑实现的，今天还是继续按照我们原定的节奏来带领大家完成一个弹珠游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。
水果掉落小游戏（原生js+css动画）
qq_45428582的博客
07-20 1266
摘要 水果下落小游戏，采用原生js的dom操作和css的animation，做的比较粗糙，目的是练习原生js的常用操作。游戏功能与界面均为他人设计，本demo具体代码实现由本人独立实现。 样式 demo功能： 水果随机位置下落 水果图片随机 在水果下落至底部前点击它，加 1 分 在水果下落到消失前没有点击到，扣 1 分 随时完成分数的统计 当水果被点击时产生抖动效果，随后消失 点击”开始“进入游戏，再次点击按钮，游戏结束 结束游戏时清空游戏界面，即使还有正在下落的水果 主要实现方式 页面总体布局采用
phaser.js，主要实现了移动底部篮子，接取下落物体
weixin_47164846的博客
02-22 3674
1.我将phaser分为3个文件，资源加载BootScene.js，逻辑处理PlayScene.js，整合game.js加粗样式 1.1资源加载BootScene.js import { Scene } from 'phaser'; // 本地 import bgMusic from '@src/assets/music/bgMusic.mp3'; import bomb from "@src/assets/receiveEuropeanGas/bomb.png" import european_gas
拾取物品怎么实现_H5接住掉落物品小游戏js实现思路（抛砖引玉）
weixin_39908588的博客
01-12 2289
现有一种H5游戏，就是上面一直在掉落物品，下面有一个人或者盆子用手指左右移动来接住，游戏规则是，如果刚好接住掉落物品，那么就接成功。那么怎么去触发这个接到呢，想着要是物品掉落的时候自身监听自己的掉落然后触发一个事件该多好，就可以时时监听自己的坐标然后检查跟接住者的坐标对比即可，但是这个实现可能性有点低，因为要对自己的坐标有监控事件，需要靠轮询，性能耗费太大.方案一、用一个毫秒级的定时器来轮询接住者...
JS面向对象编程-实例（烟花-随机落下）
Smile_mutou的博客
03-08 372
布局和样式代码如下： <style> #container{ width: 80%; height: 600px; border: 2px solid red; background: #000; margin:20px auto; ...
B站学习---js面向对象应用（俄罗斯方块游戏的实现）
belle_mei的博客
01-04 474
这是本人在B站学习上跟着老师做的一个小游戏—俄罗斯方块，里面的内容跟老师的视频几乎一样。 视频来源 https://www.bilibili.com/video/BV1Rv41147GP?p=10 采用的技术主要是JavaScript。 全部代码，本人也放在了gitee上了，这是国内的GitHub，速度比较快。 仓库地址，此地址短期内有效 https://gitee.com/jjm1/tetris 1.1 初始化布局 代码 //采用这样的形式是为了防止全局污染 (function () { wi
VUE+Canvas 实现桌面弹球消砖块小游戏
郊眠寺
10-28 565
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
【前端】使用html+css+js实现的乞丐版跳一跳
weixin_40185666的博客
05-22 2133
【前端】使用html+css+js实现的乞丐版跳一跳前言一些比较有趣的小细节总结 前言 有一年夏天在家无所事事，就在w3school上自学了前端的一些基本内容。那段时间微信跳一跳很火，师兄说我可以试试在网页上写一个跳一跳。说干就干。对于这种小游戏，比较好的设计思路是：前台动画与后台逻辑分离以及面向对象的设计。这对于当时的我来说还是比较抽象的，好在编写这么一个小程序的过程中稍微理解了其中的含义。整个...
COCOS2d_js三消项目基本功能实现
LingXi__Y的博客
02-02 2313
三消项目相比之前的拼图项目,逻辑上要稍微复杂一些.拓展方面的难度也更大.拆解开来看,主要需要搞清楚五个逻辑: 一,数据与显示分离逻辑: 俗话说万事开头难,是因为想把事儿办成,想让路走的更远,就需要前期做好十足的准备,确保万无一失;三消游戏的开局很好的说明了这样一点. a,首先需要搭建界面,首先加载一张背景图片作为背景,然后给每个方块添加一个透明方框.这个过程当中需要注意精灵的加载
HTML5——canvas制作游戏接住小球
11-10
一个经典的游戏，左右箭头可以控制垫子的移动
接金币游戏源代码
06-11
Flash小游戏接金币源代码，详细明function Game():void { txtScore.text=score.toString (); stage.addEventListener(Event.ENTER_FRAME ,onFrameHandler); stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDownHandler); myTimer.addEventListener(TimerEvent.TIMER ,onTimerHandler); myTimer.start(); gameTimer.addEventListener(TimerEvent.TIMER ,onGameTimerHandler);了，
基于html5 canvas实现聚宝盆接金币游戏特效源码.zip
11-21
基于html5 canvas实现聚宝盆接金币游戏特效源码.zip
H5 接红包游戏
09-07
分类：手机特效 > 动画效果 难易：初级 PHP H5 接红包游戏 这是一款手机端红包雨特效PC端也能演示，实用实用实用！懂的赶紧下载吧。
java接金币小游戏
06-26
包含游戏界面代码和数据库
利用js写一个简单的接金币小游戏(要用到碰撞检测)
个人笔记
03-31 4789
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; -webkit-user-select: none; } html, body{ width: 100%; heigh
Web前端学习笔记——JavaScript之面向对象游戏案例：贪吃蛇
唯恋殊雨的博客
09-24 1601
面向对象游戏案例：贪吃蛇 案例相关源码以上传到 GitHub ：https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址：贪吃蛇 案例目标 游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力，使用面向对象的方式分析问题，需要一个漫长的过程。 功能实现 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { ...
js高级（一）
tianpeiwen的专栏
11-13 321
1,解释型   vs  编译型 解释型，php  javascript 解释型，就是先翻译成计算机能够认识的二进制语言，解释一行代码就执行， 编译型 语言：先把代码翻译成计算机能够认识的语言之后，要生成一个二进制文件，exe，以后等再去执行代码的时候就。。。   基本数据类型： 1， 基本数据类型是值传递 2， 引用数据类型是引用传递   Undefined，首先他就是一个值，声明
实现简易版方块掉落
C的博客
10-15 326
原生JS 实现方块掉落 效果图 <!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">
原生JS实现经典踩白块游戏教程
本文将详细介绍如何使用原生JavaScript实现一款经典的小游戏——"别踩白块"。这款游戏曾风靡一时，凭借其简单的操作和娱乐性深受用户喜爱。本文将通过HTML结构和JavaScript代码的交互，逐步构建出游戏的基本框架和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值