原生JS实现《别踩白块》游戏(兼容IE)


Posted in Javascript onFebruary 20, 2017

兼容了IE,每得20分就加速一次!!!

效果如下:

原生JS实现《别踩白块》游戏(兼容IE)

图(1) 游戏初始

原生JS实现《别踩白块》游戏(兼容IE)

图(2) 游戏开始

代码如下:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <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>
 </head>
 <body>
 <div class="box">
 <!-- 布局 --> 
 <div id="cont"> 
 <div id="go">
 <span>Game start</span> 
 </div> 
 <div id="main">
 </div>
 </div> 
 <div id="count"></div>
 </div> 
 </body>
 <script>
 //得当前样式
 function getStyle(obj,arrt){
 //兼容IE
 return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
 }
 var main = document.getElementById('main');
 var go = document.getElementById('go');
 var count = document.getElementById('count');
 var cols = ['#1AAB8A','#E15650','#121B39','#80A84E'];
 //动态创建div
 function cDiv(classname){
 //创建div
 var oDiv = document.createElement('div');
 //随机值
 var index = Math.floor(Math.random()*4);
 //行 添加相应的class类
 oDiv.className = classname; 
 //创建行之后再动态创建4个小div并添加到行里面 
 for(var j =0;j<4;j++){
 var iDiv = document.createElement('div'); 
 oDiv.appendChild(iDiv); 
 }
 //然后把行添加到main里面
 //判断需要添加的位置
 if(main.children.length == 0){
 main.appendChild(oDiv);
 }else {
 main.insertBefore(oDiv, main.children[0]);
 } 
 //随机给行里面的某一个div添加背景色 
 oDiv.children[index].style.backgroundColor = cols[index];
 //标记颜色盒子
 oDiv.children[index].className = "i";
 }
 //移动div
 function move(obj){
 //关闭上一个定时器
 clearInterval(obj.timer);
 //默认速度与计分
 var speed = 5,num = 0;
 //定时器管理与开启定时器
 obj.timer = setInterval(function(){
 //速度 
 var step = parseInt(getStyle(obj,'top')) + speed;
 //移动盒子
 obj.style.top = step + 'px';
 //判断并创建新的盒子
 if(parseInt(getStyle(obj,'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 = 'Renew game';
  go.style.display = "block";  
  }
  }  
 obj.removeChild(obj.children[obj.children.length - 1]);
 }
 //点击与计分
 obj.onclick = 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 = 'Renew game';
  go.style.display = "block";
 }
 //盒子加速
 if(num%20 == 0){
 speed++;
 }
 } 
 },20) 
 } 
 //开始游戏
 go.children[0].onclick = function(){
 //开始前判断main里面是否有盒子,有则全部删除
 if(main.children.length){
 //暴力清楚main里面所有盒子
 main.innerHTML = '';
 }
 //清空计分
 count.innerHTML = '游戏开始'; 
 //隐藏开始盒子
 this.parentNode.style.display = "none";
 //调用定时器
 move(main);
 } 
 </script>
</html>

 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
vue 实现走马灯效果
Oct 28 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 #Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 #Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 #Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 #Javascript
js中new一个对象的过程
Feb 20 #Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 #Javascript
jQuery实现鼠标跟随效果
Feb 20 #Javascript
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
微信小程序实现搜索历史功能
2020/03/26 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
微信小程序日历插件代码实例
2019/12/04 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
行政主管岗位职责
2015/02/03 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
医院岗前培训心得体会
2016/01/08 职场文书