原生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实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
ES6的异步终极解决方案分享
Jul 11 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
vue.js实现左边导航切换右边内容
Oct 21 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
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
《天安门广场》教学反思
2014/04/23 职场文书
离婚协议书范文
2015/01/26 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers