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

基本的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]);

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