网络编程

jquery之别踩白块游戏的简单实现
网络编程 2025/10/28 佚名
3 2

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

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

 一、游戏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="/UploadFiles/2021-04-02/gg.jpg">


二、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实现了，主要的功能如下


"htmlcode">



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之别踩白块游戏的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
别踩白块游戏
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“jquery之别踩白块游戏的简单实现”

暂无“jquery之别踩白块游戏的简单实现”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/10/28

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com