酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

js

旗下栏目: php js asp Flex Ajax JSP jquery asp.net C语言 java 正则表达式 微信小程序 Android IOS

js实现踩五彩块游戏代码

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-02-08
本篇文章主要介绍了js实现踩五彩块游戏代码,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

代码如下:

<!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]);
 }
 
}

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/qq_42177478/article/details/102903891

相关文章

  • js表达式与运算符简单操作教程

    js表达式与运算符简单操作教程

    代码如下: /*** Created by Administrator on 2017/12/14.* 表达式与运算符*///1.基本表达式 加减乘除var a = 4;a = 7/6;var b = (a + 4)/2;console.log(a);console.log(b);console.log(==========);//end//2.比较运算符 == != = =conso......
    02-15
  • JS实现简易计算器代码

    JS实现简易计算器代码

    用JS实现简易计算器,供大家参考,具体内容如下: 首先创建结构和样式 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title style body{ margin:0......
    02-14
  • JavaScript实现拖拽的代码

    JavaScript实现拖拽的代码

    盒子拖拽运用到的有onmousedown事件,onmousemove事件以及onmouseup事件 1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离 2、计算出鼠标相对盒子的距离 3、当鼠标移动的时候,获取鼠......
    02-12
  • JavaScript canvas仿流瀑布效果

    JavaScript canvas仿流瀑布效果

    效果图如下: 在js部分写canvas代码,有详细注释 html部分: 一个canvas元素: canvas id=canvas /canvas css部分: style *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; }/style script var ......
    02-10
  • JavaScript canvas动画实现时钟的代码

    JavaScript canvas动画实现时钟的代码

    效果图如下: 代码如下: !DOCTYPE htmlhtml lang=enhead 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时钟特效/title/headbody canva......
    02-10
  • 微信小程序canvas开发水果老虎机的思路

    微信小程序canvas开发水果老虎机的思路

    效果图: 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据。但,问题是动画性能过于孱......
    02-09
  • JavaScript canvas实现雪花随机动态飘落效果

    JavaScript canvas实现雪花随机动态飘落效果

    效果图如下: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title/headstyle body{ margin: 0; padding: 0; } canvas{ background: #......
    02-08
  • js实现踩五彩块游戏代码

    js实现踩五彩块游戏代码

    代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title link rel=stylesheet href=de......
    02-08
  • js实现聊天对话框的代码

    js实现聊天对话框的代码

    代码如下: !DOCTYPE htmlhtml head meta charset=utf-8 title/title style type=text/css .box{ width:300px; height:400px; border:1px solid blue; margin:0 auto; } .inTer{ width:280px; height:280px; border:1px solid deeppink; ......
    02-08
  • JavaScript this的使用方法介绍

    JavaScript this的使用方法介绍

    本文我们介绍下js中this的用法。 由上图可得,默认this指向window,而在node.js中this默认指向global。 由上图可得: 1.原型链为o-MyClass.prototype。 2.函数如果没有明确返回值默认返回this。 由上图可得:call和apply功能相同,不同之......
    02-04

最新更新