原生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获得服务器端控件的ID的实现代码
Dec 28 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
JavaScript入门基础
Aug 12 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
vue之nextTick全面解析
May 17 Javascript
简单实现js放大镜效果
Jul 24 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Three.js实现雪糕地球的使用示例详解
Jul 07 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
PHP attributes()函数讲解
2019/02/03 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
区分python中的进程与线程
2020/08/13 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
十八届三中全会个人学习材料
2014/02/13 职场文书
2014年教研组工作总结
2014/11/26 职场文书
内勤岗位职责
2015/02/10 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python