原生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 相关文章推荐
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
js实现前端分页页码管理
Jan 06 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 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
多重?l件?合查?(一)
2006/10/09 PHP
一个分页的论坛
2006/10/09 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
python 字典的打印实现
2019/09/26 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
通过cmd进入python的步骤
2020/06/16 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
病人慰问信范文
2015/02/15 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
公司岗位说明书
2015/10/08 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js