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 相关文章推荐
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
vue-cli设置publicPath小记
Apr 14 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
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python reduce()函数的用法小结
2017/11/15 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python 反向输出字符串的方法
2018/07/16 Python
浅谈Python中的bs4基础
2018/10/21 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python中count函数简单的实例讲解
2020/02/06 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
聚美优品恶搞广告词
2014/03/14 职场文书
放飞理想演讲稿
2014/09/09 职场文书
拾金不昧感谢信
2015/01/21 职场文书
入党积极分子考察意见
2015/06/02 职场文书
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android