原生js实现（别踩白块小游戏）

原生js实现简单的小游戏，巩固原生js基础知识
js部分有详细注释

<!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><style>*{padding: 0;margin: 0;text-decoration: none;}.wrapper {width: 400px;height: 520px;border: 1px solid #222;margin: 50px auto;position: relative;overflow: hidden;}.box {width: 100%;height: 520px;/* border: 1px solid red; */position: relative;top: -150px;}#play{position: absolute;width: 200px;height: 100px;right: 150px;top: 350px;border: 1px dashed #ccc;text-align: center;border-radius: 8px;background-color: #ff9950;}#play a{line-height: 100px;font-size: 30px;}.rdiv{width: 400px;height: 130px;/* border:1px solid #000; */}.odiv{width:99px;height:129px;border-left:1px solid #222;border-bottom:1px solid #222;float: left;cursor: pointer;}</style>
</head>
<body><div class="wrapper" id="_wrapper"><div class="box" id="_box"></div></div>  <div id="play"><a href="#">Game Start</a></div>
</body>
</html>
<script>// 点击game start ，box开始运动 并创建方块var _box = document.getElementById('_box');var _wrapper = document.getElementById('_wrapper');var timer = null;var score = 0;var speed = 5;var flag = true;click();// 点击初始化函数function click(){var _play = document.getElementById('play');_play.addEventListener('click',function(){_play.style.display = 'none';boxPlay();})}// _box移动function boxPlay(){timer = setInterval(function(){_box.style.top = _box.offsetTop + speed + 'px';if(_box.offsetTop >= 0){// 如果_box的到达可视区域就创建一行 并且top值立即到-150pxcreate();_box.style.top = -130 + 'px';}// 如果_box的children.length > 6 ,移除最后一个盒子。既_box做多有6个孩子 if(_box.children.length == 6){for(var i = 0;i < 4;i++){// 如果最后一行 里面有没有被点击 游戏结束if(_box.lastChild.children[i].className == "odiv i"){clearInterval(timer);flag = false;alert('游戏结束'+'得分是：'+ score);                       }       }               _box.removeChild(_box.children[_box.children.length -1]);} },30) // 绑定点击事件bindEvent();}function bindEvent(){// 在大wrapper中点击_wrapper.addEventListener('click',function(event){var target = event.target;// 点击的目标if(target.className == 'odiv i' && flag == true){target.style.backgroundColor = "#ccc";target.className = 'odiv';score ++;}else{clearInterval(timer);flag = false;alert('游戏结束! '+'得分是：'+ score);}if(score % 10 == 0){speed += 2;}})}// 创建盒子function create(){// 创建一行var rdiv = document.createElement('div');var random = Math.floor(Math.random()*4);// 随机出0-3的整数rdiv.setAttribute('class','rdiv');// 创建4列for(var i = 0 ; i < 4; i++){var odiv = document.createElement('div');odiv.setAttribute('class','odiv');rdiv.appendChild(odiv);           }      if(_box.children.length == 0){_box.appendChild(rdiv);}else{_box.insertBefore(rdiv,_box.children[0]);}var clickBox = _box.children[0].children[random];// 随机产生带颜色的小方块clickBox.className = 'odiv i';clickBox.style.backgroundColor = '#000';}
</script>

原生js实现（别踩白块小游戏）相关推荐

原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...
别踩白块html源码,原生JS实现别踩白块小游戏（七）
在前面的文章<原生JS实现别踩白块小游戏(六)>中,为大家介绍了实现别踩白块小游戏的js代码中移动效果的方法概述. 下面我们就继续结合源代码中js代码部分,为大家介绍具体的实现方法. 相关 ...
练手小项目——别踩白块小游戏
参考:html5实现简单别踩白块小游戏 - XieYingpeng - 博客园效果: 代码: <!DOCTYPE html> <html lang="en"&g ...
html5合影拍照小游戏,html5实现简单别踩白块小游戏
属于简化版别踩白块,代码相对较为简单易学,主要涉及通过 javascript 操作元素节点的增删以及属性节点(class)的操作. HTML/CSSJavaScript元素节点增删属性节点操作在开始 ...
jQuery实现别踩白块小游戏(简易版)
别踩白块分享这是个漫长的寒假,编程使我快乐.在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力. 现在记录下来给大家参考,不足之处请大家谅解. 先上截图: 使用代码前请先导入j ...
原生 JS 实现别踩方块儿小游戏 - 超简单
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼案例效果原生 JavaScript 实现的别踩方块小游戏案例效果如下所示: 案例分析静态页面将这个静态页面可以划分为四个部分,如下图 ...
c语言别踩白块小游戏代码,自学easeljs 根据别踩白块游戏规则自己写的代码
主要基于 -------easeljs-0.7.1.min.js----- 去制作这个游戏思路:主要思路是以行为单位绑定可点击行选中则讲移动最外层容器继续绑定可点击行的下一行 ...
C++别踩白块小游戏
提示: 本游戏是基于EasyX图形库制作的,刚刚开始学习C++不是很完美,有不足的地方还请指出. ------------------------------------------ #include ...
JS 实现别踩白块功能
使用JS实现别踩白块功能.自己尚未完成.后序会继续完成的.该项目地址http://study.163.com/course/courseMain.htm?courseId=652005 <!DO ...

原生js实现（别踩白块小游戏）

原生js实现（别踩白块小游戏）相关推荐

最新文章

热门文章