原生js写简易别踩白块儿

最新推荐文章于 2023-02-07 10:22:04 发布
最新推荐文章于 2023-02-07 10:22:04 发布
阅读量573 收藏 3
点赞数 1
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43314846/article/details/100085945
版权
简易别踩白块儿

注意事项：① 在一个元素未生成前不可对其添加事件
② 当数组中有元素为空时：即""，将其转换成字符串时，该字符串中只有不为空的元素。

效果图

在这里插入图片描述

步骤：
① 分别为最初始的九个瓷片添加点击事件。若用户点击非黑色瓷片，则点击瓷片的背景变为红色，清除计时器，提示用户游戏结束，用户可选择重新开始游戏（该提示内容在未清除计时器前透明度为0，且z-index较低。当计时器被清除时，该提示内容透明度为1，且z-index变大）。
② 完成基础的无限加载瓷片：每隔一段时间改变一次整体的margin-top值（利用定时器来实现）。当整体对象的offsetTop>对象的本身的高度-offset，其中offset为自定义值时，创建3个瓷片（可不一定为3）。在创建时并为每个瓷片添加点击事件。
③ 完成一行中随机一个瓷片的背景为黑色，即可正确点击瓷片。（getRandomColor()方法，该方法的基本思想是：生成1~3任意一个整数，若为1，则将某一行的第一个瓷片的背景变为黑色，其余同理。在该方法中，1代表背景为黑色，0代表无背景色）
④ 在①中，若用户选择重新开始游戏，则瓷片的数量变为初始值，即9。黑瓷片重新随机生成。
⑤ 在margin-top改变过程中，移动速度会随着其绝对值的增大而增大：当新的offsetTop>oldOffsetTop+1000时，改变oldOffsetTop为当前offsetTop,并将速度适当增大。
⑥ 当某一个用户未点击的黑瓷片移动到不可见区域时，也自动判断为游戏结束：在随机生成瓷片颜色时，将每个瓷片的颜色记录到color数组中。在移动过程，Math.ceil(当前offsetTop绝对值/每个瓷片的高)*3(3为一行的瓷片个数)为遍历的临界条件，若遍历color数组未发现为1的元素，则游戏继续，若有，则游戏结束。在此处，可加一个延迟判断，否则在一个瓷片还未移动到不可见区域，该判断就执行，这样是不可取的
⑦ 用户不可跨越点击黑色瓷片：可判断当前点击瓷片以前的所有瓷片是否还有黑色瓷片，若没有则可点击，若有，则不可点击。

完整代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .all{
        width: 216px;
        height:auto;
        margin: auto;
        /*border: 1px solid silver;*/
        font-size: 0;
    }
    .all>div{
        position: relative;
        height: 200px;
        width: 70px;
        display: inline-block;
        border: 1px solid silver;
        text-align:center;
        line-height: 200px;
        font-size: 20px;
        color: white;
    }
.meng{
    z-index:-1;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.5);
    height: 420px;
}
    .meng>div{
        border: 1px solid silver;
        background: rgba(255,255,255,.9);
        height: 200px;
        width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
    }
    .all>div>span{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }
    .button{
        margin-top:25px;
    }
    .button button{
        width: 90px;
        margin-right: 10px;
    }
    .tran{
        transition: margin-top .5s linear;
    }
</style>
<body>
<div class="all tran">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

</div>
<div class="meng">
    <div>
        <span>游戏结束啦！</span>
        <div class="button">
            <button class="confirm">确定</button>
            <button class="again">再来一次！</button>
        </div>
    </div>
</div>
</body>
<script>
    var all = document.getElementsByClassName("all")[0];
    var confirm = document.getElementsByClassName("confirm")[0];
    var again = document.getElementsByClassName("again")[0];
    var meng = document.getElementsByClassName("meng")[0];
    var speed=1;
    var column = 3;
    var moduleWidth = 70;
    var moduleHeight = 200;
    var offset = 1000;
    all.style.marginTop=0;
    var color = [];
    var beConfirm = false;
    var beginArray = all.innerHTML;
    var oldOffsetTop=0;
    var allHeight = document.documentElement.clientHeight;
    meng.style.height = allHeight+"px";
    console.log(meng.style.height)
    getRandomColor(0);
    var begin = document.getElementsByClassName("begin")[0];//必须在begin创建后才能获取到
    var timer ;
    var time = 400;
    confirm.onclick = function () {
        beConfirm=true;
        meng.style.opacity = 0;
        meng.style.zIndex=-1;
    };
    again.onclick = function () {
        oldOffsetTop=0;
        speed=1;
        all.className="all";
        meng.style.opacity = 0;
        meng.style.zIndex=-1;
        all.innerHTML = beginArray;
        all.style.marginTop=0;
        color=[];
        getRandomColor(0);
        setBeginChildrenClick();
    };
    function getRandomColor(start) {
        var divLength = all.children.length;
        for(var i= start;i<divLength;i++){
            //一行中的三个任意之一为1，为1的元素的背景色为黑色
            var randomChoose = Math.ceil(Math.random()*3);
            color[randomChoose+i-1] = 1;
            if(i==0){
                var span = document.createElement("span");
                span.className="begin";
                span.innerHTML="开始";
                span.onclick=function (ev) {
                        timer = getTimer()
                }
                all.children[randomChoose+i-1].appendChild(span);
            }
                if(i<(divLength-3)){
                    i=(randomChoose+i-1)+(column-(randomChoose+i-1)%column)-1
                }else{
                    break;
                }
        }
        for(var i=0;i<divLength;i++){
            if(color[i]==1){
                all.children[i].style.background = "black"
            }else{
                color[i]=0;
            }
        }
    }
    function  failFun(that){
        clearInterval(timer);
        if(that){
            that.style.background="red";
        }else{
            for(var i=0;i<color.length;i++){
                if(color[i]==1){
                    all.children[i].style.background="red";
                    break;
                }
            }
        }

        setTimeout(function () {
            if(that){
                that.style.background="";
            }else{
                all.children[i].style.background=""
            }
            meng.style.zIndex = 10;
            meng.style.opacity = 1;

        },500);
    }
    function moduleClick(e) {
            var that = e;
            if(that.style.background=="" || that.style.background=="red"){
                failFun(that);
            }else {
                    if(that.index==0 || color.slice(0,that.index).join("").indexOf("1")==-1){
                        that.style.background="rgba(100,100,100,.4)";
                        for(var i=0;i<color.length;i++){
                            if(i==that.index){
                                color[i] = 0;
                                break;
                            }
                        }
                    }
            }
    }
    function getAllHeight(){
        //得到当前的all的高
        for(var i=0;i<all.children.length;i++){
            var num = Math.ceil(all.children.length/column);
            return num*moduleHeight+"px"
        }
    }

    function getTimer() {
       var timer =  setInterval(function () {
           var overColumn = Math.ceil(Math.abs(all.offsetTop)/moduleHeight);
           var moduleNumber = overColumn*column;
           setTimeout(function () {
               //延迟400ms执行 比下一次执行该方法早100ms，将时间错开
               for(var k = 0;k<moduleNumber;k++){
                   if(color[k]==1){
                       clearInterval(timer);
                       failFun("");
                       break;
                   }
               }
           },time);
           all.className="all tran";
           if(Math.abs(all.offsetTop)>Math.abs(oldOffsetTop)+1000){
               speed +=0.1;
               time = 400-(speed-1)*10;
               oldOffsetTop = all.offsetTop;
           }
           all.style.marginTop =parseInt(all.style.marginTop)-100*speed+"px";
        var allHeight = getAllHeight();
        if(Math.abs(all.offsetTop)> parseInt(allHeight)-offset){
            var start = all.children.length;
            for(var j=0;j<3;j++){
                var divEle = document.createElement("div");
                divEle.index = all.children.length;
                divEle.onclick = function () {
                    if(!beConfirm){
                        moduleClick(this)
                    }
                };
                all.appendChild(divEle);
            }
            getRandomColor(start);
        }
    },400);
        return timer;
    }

   function setBeginChildrenClick() {
       for(var j=0;j<all.children.length;j++){
           all.children[j].index = j;
           all.children[j].onclick = function () {
               if(!beConfirm){
                   moduleClick(this)
               }
           };
       }
   }
    setBeginChildrenClick();
</script>
</html>
Lemon
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现别踩白块
08-31
"原生JS实现别踩白块"是一款基于JavaScript、HTML和CSS构建的纯网页游戏，其核心在于通过JavaScript实现游戏逻辑，HTML布局游戏界面，以及CSS美化视觉效果。接下来，我们将详细探讨这些关键技术点。 首先，...
原生JS实现别踩白块小游戏.zip
05-15
在这个名为"原生JS实现别踩白块小游戏.zip"的压缩包中，包含了三份关键文件，用于构建一个基于原生JavaScript的“别踩白块”小游戏。这个游戏旨在帮助学习者掌握JavaScript的基础语法、事件处理、DOM操作以及游戏...
JavaScript别踩白块
weixin_45146319的博客
11-08 788
js-别踩白块 简单面向过程别踩白块 看图 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> &lt
微信小程序项目实例——别踩白块
最新发布
ws15168689087的博客
02-07 7768
别踩白块是一款微信小游戏。分为无尽模式、计时模式、急速模式三种模式。用户需要点击不断移动的黑色方块。具体的代码和实现效果可以看资源。若点击到白色方块则游戏结束。无尽模式下可以一直进行游戏。用户将在指定时间内点击黑块。有兴趣的同学可以继续研究。具体的介绍就到这里了。代码放到下面链接里了。
js小游戏-别踩白块儿
Welcome to my csdn!
02-10 1477
js+jq面向对象编程-别踩白块儿之别踩川建国同志。 一个非常简单的小游戏。点击拜登会变成特朗普,点击特朗普或者特朗普碰到下边框游戏结束。 排版比较简单，js代码也非常好理解。 首先是css部分 图片自行保存。 Biden.png Donald.png die.png <style> *{ margin: 0; padding: 0; } #app{ width: 40
H5+js实现别踩白块儿
weixin_34187862的博客
06-04 543
项目地址 -&gt; 已上传github 项目地址 -&gt; 码云 项目演示地址 先画ui界面 function draw_line() { ctx.strokeStyle = 'black' for (var i = w; i &lt; canvas.height; i += w) { ctx.moveTo(0, i) ctx.lineTo...
别踩白块儿 开源免费(C++)
蓝色风暴的博客
07-19 5534
别踩白块儿(C++) 演示视频 调用EasyX图形库,电脑没有安装图形库的话，无法运行 EasyX下载 #include<iostream> #include<graphics.h> #include<conio.h> #include<time.h> using namespace std; #define HIGH 110 //方块...
原生JS实现《别踩白块》游戏（兼容IE）
10-20
本文主要介绍了原生JS实现《别踩白块》游戏（兼容IE）的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
原生js实现的别踩白块小游戏
04-26
在本项目中，我们探讨的是一个使用纯JavaScript（原生JS）实现的“别踩白块”小游戏。这个游戏是一款非常受欢迎的休闲娱乐游戏，玩家需要快速准确地点击黑色方块，避开白色的方块，以此来积累分数。接下来，我们将...
使用js实现“别踩白块儿”游戏
梦空间
01-29 5681
界面如下：         点击”开始游戏“，”白格“将开始向下移动，此后再每一行上开始出现一个“黑格”，对应列上按下对应的键即可消除黑格，但不可跨行消除（即必须先消除”最近“一行上的”黑格“）（如第1列对应“D”键，第2列对应"F“键，第3列对应”J“键，第4列对应”K“键）。当然，除了可以使用键盘按键消除”黑格“外，可以使用鼠标点击除去“黑格”，这时可以跨行。当按错”键“或点击到”白
基于STM32的别踩白块
12-22
近期用正点原子的mini开发板制作的一个别踩白块的游戏，包含两个模式，一个是禅模式，一个是经典模式，欢迎大家下载试玩。
c语言别踩白块!
10-27
这个游戏很多人玩过,有没有想自己实现一下?下载看看咯!
[模仿]html5游戏_别踩白块
07-20
html5游戏_别踩白块 实现app游戏别踩白块的简单功能，还存在一些的问题[但是在UCWeb里没有问题] 可以做一定的参考
别踩白块.zip
09-24
用前端技术实现别踩白块小游戏（jQuery+html+css）随机数和事件配合使用
JS 实现别踩白块小游戏
04-23
NULL 博文链接：https://onestopweb.iteye.com/blog/2344101
js写别踩白块游戏
weixin_48727085的博客
08-13 144
<!DOCTYPE HTML> <html lang = 'en'> <head> <meta charset = 'UTF-8'/> <title>Document</title> <style> *{ padding:0; margin:0; } .boundary{ position:relative; overflow:hidden; width
“别踩白块儿"OGEngine游戏源代码分析和下载(一)
louiscool87的专栏
07-14 396
“别踩白块儿”是目前非常火的一款游戏，游戏非常简单刺激。关于具体怎么火法怎么玩我就不多说了，相信看到本文的朋友们都非常地清楚。 什么游戏火，我们都想知道自己能不能也弄一个玩玩，我也花了点时间弄了一个，游戏代码将会开源，利人利己，大家一起提高，希望各位多多支持。 下面介绍如何用OGEngine游戏引擎完成“别踩白块儿”游戏的经典模式。   源码下载地址 一、最终实现的部分效果截图 1、...
别踩白块儿js
小王的博客
09-16 441
来源网易云课堂-燕十八老师小游戏 难点：无缝滚动、自动加速 黑白棋小游戏 *{ margin: 0; padding:0; } html,body{ width: 100%; height: 100%; } #main,#container{ position: relative; top: 0; margin: auto; wi
别踩白块-用H5中的Canvas和JavaScript实现。
SoWhatWorld的博客
08-27 1964
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> SteppingWhiteBlocks </title> <style type="text/css"> div { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值