js实现踩五彩块游戏


Posted in Javascript onFebruary 08, 2020

本文实例为大家分享了js实现踩五彩块游戏的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="demo.css" >
</head>
<body>
 <div class="wrapper">
  <div id = "go">Game Start</div>
  <!-- 运动的dom -->
  <div id="main"></div>
 </div>
 <script src = "demo.js"></script>
</body>
</html>

CSS:

*{
 margin: 0;
 padding: 0;
}
.wrapper{
 position: relative;
 width: 400px;
 height: 600px;
 border: 1px solid black;
 margin :160px auto;
 overflow: hidden;
}
#go{
 position:absolute;
 left:0;
 top: 0;
 width: 100%;
 height: 100px;
 border-bottom: 1px solid #000;
 font-weight: bolder;
 font-size: 60px;
 line-height: 100px;
 text-align: center;
 cursor: pointer;
 z-index: 999;
}
#main{
 position: relative;
 width:400px;
 height: 600px;
 /* border:1px solid red; */
}
.row{
 width: 400px;
 height: 150px;
}
.row div{
 /* 块级元素水平排列 */
 float: left;
 width: 100px;
 height: 150px;
 border: 1px solid #000;
 /* 混杂模式盒模型 */
 box-sizing: border-box;
 /* 最终显示宽度为设定宽度 */
}

js:

// bindEvent显示开始,清除 creatDiv增加一行 move运动 判断胜负 计分
var go = document.getElementById('go');
// 运动趋于
var main = document.getElementById('main');
var timer;
var speed = 5,num = 0,flag = true;

function bindEvent() {
 go.addEventListener('click', function () {
  go.style.display = 'none';
  move();

 });
 main.addEventListener('click',function(e){
  if(flag){
  var tar = e.target;
  if(tar.className == 'tar'){
   tar.style.backgroundColor = '#bbb';
   tar.classList.remove('tar');
   num++;

  }else{
   clearInterval(timer);
   alert('游戏结束吧得分'+num);
   flag = false;
  }
  }

 });

}
bindEvent();
function move() {
 timer = setInterval(function(){
  // 初始位置+速度
  var step = parseInt(main.offsetTop)+speed;
  // 当前位置付给新的top
  main.style.top = step+'px';
  if(parseInt(main.offsetTop)>=0){
   main.style.top = '-150px';
   cDiv();

  }
  // 移除多余的div
  var len = main.childNodes.length;
  if(len == 6){
   var lastRow = main.childNodes[len -1];
   // 是否结束
   for(var i = 0;i<4;i++){
   if(lastRow.childNodes[i].classList.contains('tar')){
    clearInterval(timer);
    alert('游戏结束得分:'+num);
    flag = false;

   }}

   main.removeChild(main.childNodes[len - 1]);

  }

 }
 ,20 );
}
// 创建行和列
function cDiv() {
 // 生成数组颜色
 var color = ['red','blue','green','pink'];
 // 创建一个行
 var oDiv = document.createElement('div');
 // 生成一个随机数
 var index = Math.floor(Math.random()*4);
 // 创建四列
 for (var i = 0; i < 4; i++) {
  // 创建四个列块
  var iDiv = document.createElement('div');
  // 行里面插入列
  oDiv.appendChild(iDiv);

 }
 // 被点击的div 
 var clickDiv = oDiv.childNodes[index];
 clickDiv.setAttribute('class','tar');
 // 颜色随机
 clickDiv.style.backgroundColor = color[index];
 oDiv.setAttribute('class', 'row');
 // 如果行为空则插入,如果不为空则向上插入;
 if (main.childNodes.length == 0) {
  main.appendChild(oDiv);
 } else {
  main.insertBefore(oDiv, main.childNodes[0]);
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
js实现百度搜索提示框
Feb 05 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 #Javascript
JS实现简易留言板增删功能
Feb 08 #Javascript
原生JS实现留言板功能
Feb 08 #Javascript
javascript实现留言板功能
Feb 08 #Javascript
JavaScript实现PC端横向轮播图
Feb 07 #Javascript
vue更改数组中的值实例代码详解
Feb 07 #Javascript
Vue 一键清空表单的实现方法
Feb 07 #Javascript
You might like
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
python实现保存网页到本地示例
2014/03/16 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python3.7 的新特性详解
2019/07/25 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
销售员求职个人的自我评价
2014/02/19 职场文书
大学四年个人自我小结
2014/03/05 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书