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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
JavaScript DOM基础
Apr 13 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 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导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python 多维List创建的问题小结
2019/01/18 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
十八届三中全会宣传方案
2014/02/21 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
创先争优个人承诺书
2014/08/30 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
公务员检讨书
2014/11/01 职场文书
信仰观后感
2015/06/03 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang