摘要:别踩白块白块黑块游戏初始化根据前面的部分我们可以知道,每个就代表一个白块,就代表一个黑块,每点击一个黑块消失其实是删除了一个,然后从上面添加一个新的。所以我们首先要通过来控制的创造和生成记得删除在编写静态页面时候指定生成的个。
自己最近一直想做个小项目,但是自己代码水平太烂了,做不了大系统,索性利用毕生所学写个小游戏,哈哈哈
别踩白块这个游戏相信很多人都在手机上玩过,今天我们就来做一个网页版的,先上一张游戏效果图:
不同于移动端采用手指触碰,网页版需要我们用鼠标点击黑块,黑块才会消失。刷新页面即可以开始游戏,这个小游戏最重要的部分代码,初学者也能很快看懂。YES~
在开始之前,让我们简单分析下整个游戏的流程:一定的速度下移,点击黑块,黑块消失,新的黑块在普通游戏玩家眼中,应该是游戏开始,黑块以块不断向下移动,若黑块触底则游戏结束;而以我们来说,可以将每一个黑块和白块抽象成一个个的数据结构,黑块的消失和出现其实就是 数据结构的创造和销毁,我们来看一张游戏的流程图,对于要编写的功能有一个大概的了解:
页面布局
可以用 div+css 布局来实现别踩白块的静态效果展示,直接上 HTML 代码,我来简要说下 HTML 思路,将主界面分解成一个4×4的大矩形格子,每一个方块代表其中一个小的矩形格,其中每一行的四个白块中有一个黑块,每一行中黑块位于那一列是随机生成的,但是我们这里现在是静态页面就自己确定了,然后通过 css 控制样式。
别踩白块 /*白块*/ /*黑块*/
游戏初始化
根据前面的 HTML 部分我们可以知道,每个
//创建div, 参数className是其类名 function creatediv(className){ var div = document.createElement("div"); div.className = className; return div; } // 创造一个并且有四个子节点function createrow(){ var con = $("con"); var row = creatediv("row"); //创建div className=row var arr = creatcell(); //定义div cell的类名,其中一个为cell black con.appendChild(row); // 添加row为con的子节点 for(var i = 0; i < 4; i++){ row.appendChild(creatediv(arr[i])); //添加row的子节点 cell } if(con.firstChild == null){ con.appendChild(row); }else{ con.insertBefore(row, con.firstChild); } } //删除div#con的子节点中最后那个function delrow(){ var con = $("con"); if(con.childNodes.length == 6) { con.removeChild(con.lastChild); } } //创建一个类名的数组,其中一个为cell black, 其余为cell function creatcell(){ var temp = ["cell", "cell", "cell", "cell",]; var i = Math.floor(Math.random()*4);//随机生成黑块的位置 temp[i] = "cell black"; return temp; }
让黑块动起来
在可以通过 js 来创造和销毁 div 后,我们就要让黑块动起来,这个时候我们就用到了之前css提到的设定
//使黑块向下移动 function move(){ var con = $("con"); var top = parseInt(window.getComputedStyle(con, null)["top"]); if(speed + top > 0){ top = 0; }else{ top += speed; } con.style.top = top + "px"; if(top == 0){ createrow(); con.style.top = "-100px"; delrow(); }else if(top == (-100 + speed)){ var rows = con.childNodes; if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){ fail(); } } } function fail(){ clearInterval(clock); confirm("你的最终得分为 " + parseInt($("score").innerHTML) ); } 点击黑块事件 让黑块动起来之后呢,就要考虑用户有没有点击到黑块,用户若点击到黑块我们要让所在那一行消失,那么就需要一个 judge 方法,具体如下: //判断用户是否点击到了黑块, function judge(ev){ if (ev.target.className.indexOf("black") != -1) { ev.target.className = "cell"; ev.target.parentNode.pass = 1; //定义属性pass,表明此行row的黑块已经被点击 score(); } }
这一步,几个核心的功能点都已经实现了,剩下来的就是将这些方法组合起来,组成完整的逻辑关系。
完整代码
别踩白块 score
0
祝大家早日富可敌国,bye~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113937.html
摘要:前言利用自动玩别再踩白块了这个小游戏,让我们愉快地开始吧开发工具版本相关模块模块模块模块模块以及一些自带的模块。环境搭建安装并添加到环境变量,安装需要的相关模块即可。 ...
摘要:别踩白块儿使用白鹭引擎编写的游戏游戏地址准备工作了解白鹭引擎并安装编写工具安装游戏引擎安装创建项目创建项目可以选择不同版本的引擎,创建成功之后还可以查看,对发布进行设置。 别踩白块儿 使用(白鹭引擎)Egret编写的游戏 showImg(https://user-gold-cdn.xitu.io/2018/10/26/166af8033a59fdbf?w=500&h=840&f=gif...
阅读 1228·2021-11-11 16:54
阅读 1743·2021-10-13 09:40
阅读 940·2021-10-08 10:05
阅读 3502·2021-09-22 15:50
阅读 3703·2021-09-22 15:41
阅读 1788·2021-09-22 15:08
阅读 2344·2021-09-07 10:24
阅读 3575·2019-08-30 12:52