对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验。那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成。
下面我们就给大家分享一个原生js实现别踩白块小游戏的方法。
代码实例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> * { margin: 0; padding: 0; } .box { margin: 50px auto 0 auto; width: 400px; height: auto; border: solid 1px #222; } #cont { width: 400px; height: 600px; position: relative; overflow: hidden; } #go { width: 100%; height: 600px; position: absolute; top: 0; font: 700 60px '微软雅黑'; text-align: center; z-index: 99; } #go span { cursor: pointer; background-color: #fff; border-bottom: solid 1px #222; } #main { width: 400px; height: 600px; position: relative; top: -150px; } .row { width: 400px; height: 150px; } .row div { width: 99px; height: 149px; border: solid 1px #222; float: left; border-top-width: 0; border-left-width: 0; cursor: pointer; } #count { border-top: solid 1px #222; width: 400px; height: 50px; font: 700 36px/50px '微软雅黑'; text-align: center; } </style> <body> <div class="box"> <div id="cont"> <div id="go"> <span>点击开始</span> </div> <div id="main"></div> </div> <div id="count"></div> </div> </body> <script> var main = document.getElementById('main') go = document.getElementById('go') count = document.getElementById('count'); cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E']; function CDiv(classname) { var Div = document.createElement('div') index = Math.floor(Math.random() * 4) Div.className = classname for (var i = 0; i < 4; i++) { var iDiv = document.createElement('div') Div.appendChild(iDiv) } if (main.children.length == 0) { main.appendChild(Div); } else { main.insertBefore(Div, main.children[0]); } Div.children[index].style.backgroundColor = cols[index]; Div.children[index].className = "i"; } function move(obj) { //默认速度与计分 var speed = 5, num = 0; obj.timer = setInterval(function () { //速度 var step = parseInt(getComputedStyle(obj, null)['top']) + speed; obj.style.top = step + 'px' if (parseInt(getComputedStyle(obj, null)['top']) >= 0) { CDiv('row'); obj.style.top = -150 + 'px'; } if (obj.children.length == 6) { for (var i = 0; i < 4; i++) { if (obj.children[obj.children.length - 1].children[i].className == 'i') { //游戏结束 obj.style.top = '-150px'; count.innerHTML = '游戏结束,最高得分: ' + num; //关闭定时器 clearInterval(obj.timer); //显示开始游戏 go.children[0].innerHTML = '游戏结束'; go.style.display = "block"; } } obj.removeChild(obj.children[obj.children.length - 1]); } //点击与计分 obj.onmousedown = function (event) { //点击的不是白盒子 // 兼容IE event = event || window.event; if ((event.target ? event.target : event.srcElement).className == 'i') { //点击后的盒子颜色 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb"; //清除盒子标记 (event.target ? event.target : event.srcElement).className = ''; //计分 num++; //显示得分 count.innerHTML = '当前得分: ' + num; } else { //游戏结束 obj.style.top = 0; count.innerHTML = '游戏结束,最高得分: ' + num; //关闭定时器 clearInterval(obj.timer); //显示开始游戏 go.children[0].innerHTML = '游戏结束'; go.style.display = "block"; } //盒子加速 if (num % 10 == 0) { speed++; } } //松开触发停止 obj.onmouseup = function (event) { } }, 20) } go.children[0].onclick = function () { if (main.children.length) { //暴力清楚main里面所有盒子 main.innerHTML = ''; } //清空计分 count.innerHTML = '游戏开始'; //隐藏开始盒子 this.parentNode.style.display = "none"; move(main); } </script> </html>
登录后复制
前台效果如下图:
当我们点击开始时,游戏开始。点击有颜色的方块即可得分,并且随着分数的增加,页面方块移动的速度也会加快。
点击到白块时,游戏结束。
本篇文章就是关于原生js实现别踩白块小游戏的方法分享介绍,感兴趣的朋友可以直接复制上述代码,在本地进行测试。那么在后期的文章中,会继续为大家介绍别踩白块小游戏具体的实现方法。
以上就是原生JS实现别踩白块小游戏(一)的详细内容,更多请关注Work网其它相关文章!