原生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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
原生JS实现天气预报
Jun 16 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
Html5生成验证码的示例代码
May 10 Javascript
React Native项目框架搭建的一些心得体会
May 28 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将图片文件转换成二进制输出的方法
2015/06/10 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
javascript打印输出json实例
2013/11/11 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
BootStrap 导航条实例代码
2017/05/18 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python批量读取文件名并写入txt文件中
2020/09/05 Python
Python原始套接字编程实例解析
2020/01/29 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
中学生演讲稿
2014/04/26 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
中考学习决心书
2015/02/04 职场文书
世界名著读书笔记
2015/06/25 职场文书
小学主题班会教案
2015/08/17 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
Vue深入理解插槽slot的使用
2022/08/05 Vue.js