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函数
Sep 08 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
node.js使用fs读取文件出错的解决方案
Oct 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设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php jsonp单引号转义
2014/11/23 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
js实现随机数小游戏
2019/06/28 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
js实现车辆管理系统
2020/08/26 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python实现备份目录的方法
2015/08/03 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python socket模块方法实现详解
2019/11/05 Python
详解python logging日志传输
2020/07/01 Python
python中str内置函数用法总结
2020/12/27 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
学校推普周活动总结
2015/05/07 职场文书
爱的教育观后感
2015/06/17 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python