web html div javascript 实现踩黑块游戏

最新推荐文章于 2021-06-23 00:28:31 发布

宇神城主_蒋浩宇

最新推荐文章于 2021-06-23 00:28:31 发布

阅读量372

点赞数

分类专栏：游戏

本文链接：https://blog.csdn.net/weixin_42749765/article/details/91128715

版权

游戏专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原文出自：https://blog.csdn.net/weixin_42749765

策略：

1.绘制一个界面

2.将最新绘制出来的黑块向下移动

3.每点击黑框加分，点击还快附件失败

4.点击完黑框后消除掉黑块

5.没点击一次黑框加速下移和加速出现

6.下移用的是定时器，没过2000秒出现一个，使用没10毫秒下移2px，并且不断增加

7.为了样式更好点可以设计设计，一下人性化的东西出来

上代码：

css

 body {
        margin: 0px;
        padding: 0px;
    }

    .main {
        margin: 0 auto;
        width: 300px;
        height: 500px;
        background-color: rgb(228, 214, 170);
        position: relative;
        overflow: hidden;
    }
    .resource{
        width:100%;
        height:600px;    
        top:-100px;
        position: absolute;
    }
    .lines{
        width:100%;
        float: left;
        height:100px;
        position: absolute;
    }
    .inbk{
        width:60px;
        height:100px;
        float: left;
    }
    .inhk{
        width:60px;
        height:100px;
        float: left;
        background-color: black;
    }

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>踩黑块</title>
</head>
body>
    <h3>踩黑块</h3>
    <div>分数：<span id="count">0</span> &nbsp;&nbsp;状态：<span id="count1">进行中</span></div>
    <div class="main">
        <dvi class="resource"> </dvi>
    </div>
</body>
</html>

javascript

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 3={v:7(){5 e=["8","8","8","8"];5 f=0;5 g=t(7(){5 i=q.Q(q.P()*4);e[i]=\'u\';5 a="";f++;G(H i=0;i<e.U;i++){a+=\'<k y="\'+e[i]+\'" o="m\'+f+\'" ></k>\'}5 b="<k y=\'E\' F=\'p:I;\' L=\'m"+f+"\'>"+a+"</k>";$(".N").O(b);e[i]=\'8\';3.6.j.R(1);r($("#m"+f+""),f);3.s()},3.6.9);5 h;7 r(a,b){5 c=0;5 d=0;h=t(7(){d=d+3.6.l;a.J("p",d+"K");w(d>M){w(3.6.j[b]==1){$("#x").n("3 z!");A(g);A(h);B}S{B}}},T)}},s:7(){$(".u").C(7(){5 a=$(V).W("o");3.6.j[X(a.Y(2))]=0;$("#"+a).Z();3.6.l=3.6.l+0.1;3.6.9=3.6.9-1;$("#10").n(++3.6.D)});$(".8").C(7(){$("#x").n("3 z!")})},6:{D:0,j:[0],l:1,9:11}};$(12).13(7(){3.v()});',62,66,'|||game||var|gameData|function|inbk|gxsd||||||||||arrAstate|div|sd|ok|html|sks|top|Math|xxyd|ydsj|setInterval|inhk|init|if|count1|class|over|clearInterval|return|click|countI|lines|style|for|let|0px|css|px|id|500|resource|append|random|floor|push|else|20|length|this|attr|Number|substr|remove|count|2000|document|ready'.split('|'),0,{}))

完整源码地址：

https://download.csdn.net/download/weixin_42749765/11230427

持续更新