学习小游戏别踩白块总结

原创
2018/10/27 11:16
阅读数 51

### 最近学习了一个原生js的小游戏,现在总结一下,巩固和复习学到的知识。 首先,要知道一个项目的基本结构和原理,别猜白块是一个简单的小游戏,它的结构和原理也很简单,先要有一个主体盒子给它加一个class叫wrapper,所有的元素都应该包含在这个盒子里,游戏的主体思想是有两个盒子,一个是用户看到的界面,我们给它一个class叫go,另一个是产生方块并带着方块向下运动的盒子,我们给他一个class叫main,我们在go里加一个按钮用来启动游戏

<div class="wrapper">

    <div id="go">
        <a href="#">游戏开始</a>
    </div>
    <div class="main"></div>
</div>

基本的css样式就不具体的讲了,主要就是为wrapper、go和main设置css,特别的是main的top要比go的top小上一个白块的距离,为了保证白块下移到go界面时已经创建好了。

  • { margin: 0; padding: 0;} .wrapper { width: 400px; height: 600px; margin: 150px auto; border: 1px solid #000000; position: relative; overflow: hidden; } __#go { width: 100%; position: absolute; top: 0; text-align: center; z-index: 99; } __#go a { display: block; width: 400px; height: 100px; border-bottom: 3px dashed #bbb; text-decoration: none; font-size: 32px; font-weight: 300; color: lightskyblue; line-height: 100px; }

.main { width: 400px; height: 600px; position: relative; top: -150px; /* border: 1px solid blue */ }

然后,就开始js部分了,我们要清楚用户的操作,用户要玩这个游戏第一步肯定是点击开始按钮让游戏开始,所以我们先给go里的开始按钮添加点击事件,

function clickStart() { go.addEventListener('click', function() { go.style.display = 'none'; move(); }) }

用户点击完之后,按钮消失,白块开始下移,move()方法就是白块运动的方法,我们知道方块运动是一个连续的过程,所以我们需要一个定时器来让它在游戏未结束之前一直向下运动。要清楚的是,我们看到的是白块在向下运动,其实不是,真正运动的应该是装着白块的盒子,白块只是被装在盒子里被带着向下,而向下运动也不过是改变main盒子的top值,如果想要加速效果可以添加一个速度speed,达到条件一个让speed+=某个数值就行。main的高度不可能是无限长的能一直向下运动,所以肯定是运动到某个地方它又回去了

var step = parseInt(main.offsetTop) + speed; main.style.top = step + 'px'; if (parseInt(main.offsetTop) >= 0) { cDiv(); main.style.top = '-150px'; }

main开始运动之后,白快也要开始产生了,因为白块是不断产生的,所以我们只能在定时器里动态添加,这里还要清楚一个点,到底什么时候开始生成白块,是一点击开始按钮就开始产生,还是等main运动到go的位置才开始产生,应该是运动到go的位置时,不然白块在go页面之上就开始显示了。先将方块添加到一行中,再将一行添加到盒子中,利用随机数产生黑块的位置,并给它加上class=‘i’用来标记,同时给每一行的方块加上样式

.row { width: 400px; height: 150px; } .row div { width: 99px; height: 149px; float: left; border-left: 1px solid #222; border-bottom: 1px solid #222; }

将一行添加到盒子中应该先看一下盒子中是否已经存在方块了,因为我们要保证新产生的一行是在最上面一行

function cDiv() { var oDiv = document.createElement('div'); var index = Math.floor(Math.random() * 4); oDiv.setAttribute('class', 'row'); for (var j = 0; j < 4; j++) { var iDiv = document.createElement('div'); if (j == index) { iDiv.style.backgroundColor = "#000"; iDiv.setAttribute('class', 'i'); } oDiv.appendChild(iDiv); } if (main.childNodes.length == 0) { main.appendChild(oDiv); } else { main.insertBefore(oDiv, main.childNodes[0]); } }

产生方块后就要为方块绑定点击事件,但方块是不断产生的,所以我们用事件委托将事件绑定到main上,只在main区域里点击才有效,当点击到class为i的方块时说明点击的时黑色方块,这时就加一分,让被点击的方块背景颜色改变,除此之外就是点击到白色方块了,游戏结束,清空定时器,方块停止运动,弹出得分

function bindEvent() { main.addEventListener('click', function(e) { if (flag) { var tar = e.target; if (tar.className == 'i') { num++; tar.style.backgroundColor = '#bbb'; tar.classList.remove('i'); } else { alert("游戏结束,得分:" + num); clearInterval(timer); flag = false; } } }) }

还有一种情况是未点击或者漏点,这时就要判断运动到main盒子下面的方块里是否有黑色的方块,如果有就游戏结束,没有说明全部点到了,游戏继续运行。怎么判断方块是否运动到main下面了呢?可以设置main的高度刚好为页面显示的方块数加上go比main高的哪一行加上运动到main下面一行的数值,我这里设置的6行,页面显示4行,当main的子节点长度为6时就判断最后一行里是否有class为i的子元素,如果有说明没点或漏点,这也游戏结束。运行到main下方的行除了要判断的那一行其他的就移除,这样不会发生方块一直存在不断被往下挤的情况。

var len = main.childNodes.length; if (len == 6) { for (var i = 0; i < 4; i++) { if (main.childNodes[len - 1].children[i].classList.contains('i')) { alert("游戏结束,得分:" + num); clearInterval(timer); flag = false; } } main.removeChild(main.childNodes[len - 1]);

到此所有要实现的功能就完成了,最后还可以加一个锁,当游戏结束后方块不能被点击。 运行结果:

展开阅读全文
打赏
0
0 收藏
分享

作者的其它热门文章

加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部