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

2024-12-01 16:02:51

前端学习要告一段落了，也没机会写什么像样的东西，然后无意中想起某人以前给我玩了一下别踩白块的游戏，手残还被嘲讽了下，现在想起来觉得这游戏实现起来也不难，于是上星期用jquery写了一个别踩白块的小游戏，就像当初学python的时候一样写了一个2048。然后今天正好抽个时间写个博客纪录下，算是对前一段时间学习的总结，没有玩过的可以去下一个原版的来玩一下，游戏很简单，就是从不断下落的方块中点击黑快，如果点击到百块或者有黑块没被点击到，游戏就算结束。游戏实现起来不难，都是一些小知识点。当时写的时候，脑袋有点糊，有一bug看了半天没解决，后来第二天早上脑袋清醒的时一看就看出来，顺便在这里提醒自己一定不要在脑袋不清醒的时候写代码。好了说了这么多先来看一下效果图，这里别吐槽我的css样式设计就好。。。

一、游戏html页面

游戏的html界面非常简单，分为4部分，

得分标题栏，

游戏界面主题容器，开始的时候为一个div，然后用jquery动态生成黑白格子

开始暂停按钮一栏

游戏结束时候显示的模态框

下面是代码部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="../css/game.css" rel="stylesheet" type="text/css">
</head> 

<body>
<div class="main">
  <h3>Score:<span id="score">0</span></h3>
  <div id="content" class="content">
    <div id="inner"></div>
  </div>
  <div class="btn">
    <div class="container">
      <button id="begin">开始</button>
      <button id="stop">暂停</button>
    </div>
  </div> 

  <div class="shadow hide"></div>
  <div class="alert-box hide">
    <div class="game-over">
      <img style="opacity: 0.8" src="../pic/gg.jpg">
    </div>
    <div class="btn">
      <button id="again">重新开始</button>
      <button id="back">返回</button>
    </div>
  </div>
</div> 

<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/game.js"></script> 

</body>
</html>

二、css布局　　

写完了html然后就是css，这里主要用到 absolute布局，然后需要注意的是就是游戏过程由于需要不停的生成一栏新div，所以div容器要设置overflow: hidden，这一点需要注意下，然后其他的知识点也就是absolute，relative如何布局，模态框如何实现并居中，都不难，下面看下代码就好

*{
  margin: 0;
  padding: 0;
} 

.main{
  width: 808px;
  margin: 50px auto;
  background: gray;
  min-height: 544px;
  position: relative;
}
.content{
  width: 408px;
  margin: 0 auto;
  height:408px;
  border: 2px solid green;
  background-color: white;
  position: relative;
  top:0;
  overflow: hidden;
}
#inner{
  position: relative;
  top:-102px;
}
.item{
  height: 102px;
}
.item *{
  float: left;
  height: 100px;
  width: 100px;
  background-color: white;
  border: 1px solid black;
}
.black{
  background-color: black;
} 

h3{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
h3 span{
  color:brown;
}
.hide{
  display: none;
} 

.shadow{
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background-color: gray;
  opacity: 0.6;
}
.alert-box{
  position: absolute;
  width: 300px;
  height: 300px;
  left: 50%;
  top:50%;
  margin-left: -150px;
  margin-top: -150px;
  background-color: white;
}
.alert-box .game-over{
  margin-left: 20px;
  margin-top: 30px;
}
.alert-box .btn{
  width: 150px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
.main .btn .container{
  width: 150px;
  margin: 20px auto;
}
button{
  cursor: pointer;
  border: 0;
  display: inline-block;
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: cyan;
}

三、jquery实现　

游戏最核心的部分就是jquery实现了，主要的功能如下

•游戏的初始化
•如何动态插入一行div和删除一行div
•开始暂停按钮的事件绑定
•游戏过程中点击百块和黑快的事件委托
•游戏如何移动以及如何得分
•如何自动增加白块下落速度
•如何判定游戏结束

下面来看一下初始化代码的实现，初始化之前写了个函数，自动插入一行，并且在这一行4个div中某一个为随机的黑块供游戏中点击，剩下3个白块，怎么随机生成，怎么动态创建div这里需要点小技巧，具体看下面。生成一行div的函数完成后只需在初始化函数里面调用4次即可

function insertDiv() {
  var rand = Math.floor(Math.random() * 4);　　　　　　　　// 生成一个0到3 的随机数，用来作为判断生成黑块的位置
  $("#inner").prepend("<div class='item'></div>");
  $.each([0, 1, 2, 3], function (k, v) {
    if (v == rand) {
      $("#inner .item").first().append("<div class='black col'></div>");
    } else {
      $("#inner .item").first().append("<div class='col'></div>");
    }
  })
} 

function init() {　　　　　　　　　　　　　　　　// 初始生成4*4的div
  $.each([0, 1, 2, 3], function () {
    insertDiv();
  });
}

初始化完成后，我们需要做的就是如何让界面动起来，这里写了一个函数，每次调用该函数的话，游戏内容会自动向下移动几px，然后将该函数传给定时器，就可以不断的向下滑动，不过这里需要注意，下落过程中，如果下落的距离超过一行后，需要重新插入一行，然后将超出的那一行删除，而且需要将偏移的距离恢复到原来的位置，如果需要加速白块下落的速度，只需将每次向下移动加大即可，游戏后面的自动加速也是基于此来做的。下面来看一下这部分的代码

function move() {
  var ctop = parseInt($("#inner").offset().top);
  ctop += window.globalSpeed;　　　　　　　　　　　　// 自定义的全局变量， 每次下落偏移的距离
  $("#inner").offset({top: ctop});
  if (ctop >= 114) {
    insertDiv();
    $("#inner").offset({top: 12}); 　　　　　　 // 刚好移动一个item后在上移一个item
    delDiv();
  }
}

之后就是写开始，暂停部分，这里主要是对计时器的使用，这里需要注意的是每次点击的时候，都要先判断定时器是否已经清除，否则这里会有bug，下面来直接看一下代码

function bindStart() {
  $("#begin").mouseover(function () {
    $(this).css("cursor", 'pointer');
  }).click(function () {
    if(window.globalIsClearT1){　　 　　　　// 自定义的全局变量，看定时器是否清楚 

    }else {
      clearInterval(window.globalT1); 　　//没有清除的话，先清除，避免两次按下开始按钮
    }
    window.globalT1 = setInterval(move, 30);
    window.globalStartClick = true;　　　　　　//全局变量，是否开始标志位，只有开始了，才能点击
  })
} 

function bindStop() {
  $("#stop").mouseover(function () {
    $(this).css("cursor", 'pointer');
  }).click(function () {
    clearInterval(window.globalT1);
    window.globalStartClick = false;
    window.globalIsClearT1 = true;
  })
}

写到这里，再就是看一下，每次点击的时候如何操作，是否得分，还是点错了游戏结束，下面来看一下代码，界面上有4*4个格子，需要事件委托，来判断是哪一个白块被点击，如果点击的是黑快，将其变为白块，并且加上一分即可，否则点错的话，游戏就结束　

function bindClick() {
  $("#inner").click(function (e) {
    if (window.globalStartClick) {
      var current = $(e.target);
      if (current.hasClass("black")) {
        current.removeClass("black");
        score();
      } else {
        gameOver();
      }
    }
  })；
}

下面来看一下如何计算得分的代码，以及如何实现自动的加速，比较简单就不多说了

function score() {
  var score = parseInt($("#score").text());
  if(score%10 == 0){
    window.globalSpeed += 1;        //得到一定的分数后就自动加速
  }
  $("#score").text(score + 1);
}

最后来看一下，游戏结束的时候如何处理，游戏结束的话，先暂停游戏下落，然后弹出模态对话框，让用户选择返回，还是重新来过，重新来过的话，分数清零，游戏界面清空，然后初始化再在自动触发开始按钮，开始下一轮游戏，

function gameOver() {
  //暂停游戏，显示模态框
  $("#stop").trigger('click');
  window.globalIsClearT1 = true;
  $(".shadow").removeClass('hide').next().removeClass('hide'); 

  $("#again").click(function () {
    clearInterval(window.globalT1);
    $(".shadow").addClass('hide').next().addClass('hide');
    $("#score").text(0);
    clearAll();
    init();
    $("#begin").trigger('click');
    // window.globalT1 = setInterval(move, 30)
  });

到这里，基本整个游戏都算实现了，游戏不复杂，但是要完全运行起来，没有bug也不是那么简单，有兴趣的也可以去写写，如果上面代码有什么问题的话，可以向我提出来。

以上这篇jquery之别踩白块游戏的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

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

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

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

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

大致介绍终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏要简单一点,基本的思路都差不多. 这篇博客并不是详细的讲解,只是大致介绍函数的作用,其中实现的细节注释中有解释,网上的这个源码有点乱,如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴) 思路这个小游戏可以抽象化分为3层 ◆最底下的一层是基本的样式(可见的) ◆中间的层是最主要的,是一个4x3的二维数组,游戏中我们都是对这个二维数组进行操作(不可见的) ◆最上面
js实现一款简单踩白块小游戏(曾经很火)

效果图如下所示: html <div class="bigbox">  <div class="gamequyu">  <div class="start">游戏开始</div>  <div class="zhuti"&g
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实现《别踩白块》游戏（兼容IE）

兼容了IE,每得20分就加速一次!!! 效果如下: 图(1) 游戏初始图(2) 游戏开始代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .box { margin: 50px auto 0 auto; width: 400px; height:

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

相关推荐

随机推荐