IT资讯/综合软件下载站!┆ 最新软件 最新文章 最新手机 UFO外星人 网站分类

您当前的位置→图文中心网站专题网站建设原生JS实现《别踩白块》游戏(兼容IE)

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


2017/2/20  编辑:admin 来源:本站整理 
兼容了IE,每得20分就加速一次!!!
效果如下:
原生JS实现《别踩白块》游戏(兼容IE)_arp联盟
图(1) 游戏初始
原生JS实现《别踩白块》游戏(兼容IE)_arp联盟
图(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>

下一页php获取给定日期相差天数的方法分析

相关文章
  • ·[图文]原生JS实现《别踩白块》游戏(兼容IE)
  • ·[图文]原生js实现轮播图的示例代码
  • ·[图文]iOS 10原生应用删除会清空数据吗
  • ·[图文]iOS9不越狱隐藏原生应用图标
  • ·[图文]iOS9原生输入法四大神器插件deb安装方法
  • 发表评论
    栏目列表
    阅读排行
    网站帮助 - 广告合作 - 下载声明 - 网站地图