web html div javascript 实现踩黑块游戏

原文出自：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

持续更新

web html div javascript 实现踩黑块游戏相关推荐

JavaScript 别踩白块
<!DOCTYPE html> <html lang="zn"> <head><meta charset="UTF-8" ...
CSS和js和HTML一起做出网页版别踩白块游戏
CSS和js和HTML一起做出网页版别踩白块游戏文章目录 CSS和js和HTML一起做出网页版别踩白块游戏下面我们要用到的知识点: 页面布局添加样式游戏初始化让黑块动起来点击黑块事件 js ...
纯js 别踩白块游戏解析与源码
(一)别踩白块 1.考虑游戏中有哪些对象,属性和方法? 别踩白块游戏仔细想想如果非要对象的话,游戏显示界面可以算是一个对象,下滑的区域算一个对象(每个小方格算对象的属性对象吧) 2.这里主要要思 ...
java别踩白块_jquery之别踩白块游戏的简单实现
前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏 ...
C语言项目实战：《别踩白块游戏》零基础项目，137 行源代码示例
这篇文章主要为大家详细介绍了C语言实现--<别踩白块游戏>,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下! 游戏介绍: <别踩白块儿 Don't Ta ...
JAVA中Robot类的运用，实现‘别踩白块’游戏辅助
Robot 一.功能分析 http://www.4399.com/flash/135255_3.htm 别踩白块游戏,运用Java Robot类完成游戏脚本,自动完成踩黑块. 二.设计思路首先创建一 ...
JavaScript别踩白块
js-别踩白块简单面向过程别踩白块看图上代码 <!DOCTYPE html> <html lang="en"> <head><met ...
Android学习笔记之别踩白块（简易版：狂踩黑块）
项目地址:https://github.com/Changing001/Game_not_step_white 花了一天多时间,搞了这个小游戏,自我感觉不错,特意放上来,不过还是有点问题, 没有设置踩 ...
网页版别踩白块游戏（实践HTML/CSS/JS）
HTML部分别踩白块 score 0 开始游戏 CSS部分 #main { width: 408px; height: 408px; background: white; border: 2px s ...
【超详细】JS原生——别踩白块游戏
本次做的小例子是用原生js写的一个小游戏--别踩白块,js中的注释都给详细写出来了步骤,可以互相学习,有兴趣的话可以跟着步骤一起写一遍! <!DOCTYPE html> <html ...

web html div javascript 实现踩黑块游戏

web html div javascript 实现踩黑块游戏相关推荐

最新文章

热门文章