js实现踩五彩块游戏

本文实例为大家分享了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]);
 }

}

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

(0)

相关推荐

  • 用JS实现一个简单的打砖块游戏

    话不多说,先看看效果: HTML架构部分 <!-- HTML结构 --> <div class="content"> <div class="game"></div> <div class="container"> <h2>打砖块小游戏</h2> <hr /> <center> <button id="start"

  • 利用原生js实现html5小游戏之打砖块(附源码)

    前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较

  • javascript HTML5 canvas实现打砖块游戏

    本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块

  • js实现踩五彩块游戏

    本文实例为大家分享了js实现踩五彩块游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt

  • JS实现别踩白块游戏的示例代码

    目录 实现思路 核心代码 HTML代码 CSS代码 JS代码 实现思路 1.offsetTop,与style.top 2.我们看到的是白块在向下运动,其实不是,政治运动的是装着白块的盒子,白块只是被装在了盒子里面被带着向下,而向下运动也只是改变top值.同事盒子total的高度也不是无限长的能一直向下运动,所以肯定是运动到某个地方他又回去了. childNodes:由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中.(不能乱用) JS获取元素的lef

  • jquery之别踩白块游戏的简单实现

    前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏,就像当初学python的时候一样写了一个2048.然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简单,就是从不断下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算结束.游戏实现起来不难,都是一些小知识点.当时写的时候,脑

  • PyQt5实现类似别踩白块游戏

    本文实例为大家分享了PyQt5实现类似别踩白块游戏的具体代码,供大家参考,具体内容如下 #引入可能用到的库 from PyQt5.QtWidgets import (QWidget, QApplication,QPushButton,QMessageBox,QLabel,QDesktopWidget,QMainWindow) from PyQt5.QtCore import Qt,QRect,QSize,QPoint,QTimer from PyQt5.QtGui import QPainter

  • jQuery实现的别踩白块小游戏完整示例

    本文实例讲述了jQuery实现的别踩白块小游戏.分享给大家供大家参考,具体如下: 首先引入jquery.js 1.css html, body, .contain { width: 100%; height: 96%; overflow: hidden; background-color: #FFFFCC; } .text-center { text-align: center; } .score { font-size: 25px; color: #CB2D01; margin-top: 20

  • Matlab实现别踩白块小游戏的示例代码

    目录 游戏效果 游戏说明 完整代码 pianoKeys.m(主函数) getMusic.m(用于获取音乐数据) 游戏效果 游戏说明 ‘A’,‘S’,‘D’,F’按键代表四条通路(点击S开始),按错按钮或黑块接触底限均为失败. 完整代码 分两个m文件,应放在同一文件夹 pianoKeys.m(主函数) function pianoKeys %======================%======== [v1,notes,fs]=getMusic;%读取音乐 %=================

  • js实现一款简单踩白块小游戏(曾经很火)

    效果图如下所示: html <div class="bigbox"> <!-- 显示游戏的区域 --> <div class="gamequyu"> <!-- 上面显示一个游戏开始的按钮 --> <div class="start">游戏开始</div> <!-- 再显示一个游戏的主体部分 --> <div class="zhuti"&g

  • html+css+js实现别踩白板小游戏

    目录 背景简介 一.思路分析 二.页面搭建 2.1 HTML层 2.2 CSS层 2.3 JS层 2.3.1获取元素 2.3.2创建每一行div元素 2.3.3点击事件函数封装 2.3.4 方块移动函数封装 2.3.5 游戏开始 三.总结 背景简介 别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游戏--别踩白板. 一.思路分析 整体页面是一个大的矩形,长宽比例大概是3:2,然后游戏开始

  • 使用jquery实现别踩白块小游戏的方法实例

    目录 前言 html 首页字体 中间的表格 实现每一行的黑块随机显示 按键事件 key事件 adds speedup 源码 总结 前言 掘金真的是太懂了,写游戏的活动,想不参加都难!第一个,别踩白块! 先来看效果~ 如上图所示,jkl三个键对应三列,左上是得分,得分右边是时间(没做倒计时...)敲击对应的按键来进行游戏,如果敲错了就会弹出得分与所用时间 接下来就开始肢解这个小游戏,来一步一步的分析究竟是怎么实现的,let's go~ html <body> <div class=&quo

  • js实现弹窗猜数字游戏

    本文实例为大家分享了js实现弹窗猜数字游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var num = Math.floor(Math.random() * 100 + 1); // 产生0-100的

随机推荐