首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现别踩白块儿网页版小游戏

Posted in Javascript onJanuary 18, 2017

大致介绍

终于结束了考试，放假回家了。这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏 要简单一点，基本的思路都差不多。

这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)

思路

这个小游戏可以抽象化分为3层

　◆最底下的一层是基本的样式（可见的）

　◆中间的层是最主要的，是一个4x3的二维数组，游戏中我们都是对这个二维数组进行操作（不可见的）

　◆最上面的一层也是一个4x3的二维数组，是用户能最终看见的

我们通过最底下的一层显示最基本的12个小方格，不同的颜色，每个格子对应的中间的层有不同的值，最上面的一层负责显示样式

基本结构与样式

基本的结构和样式都挺简单，直接看代码

结构：

<body>
 <div id="header">
 <h1>别踩白块儿</h1>
 <div id="timer" >0.0000</div>
 </div>
 <div id="container">
 <div class="grid" id="grid-0-0"></div>
 <div class="grid" id="grid-0-1"></div>
 <div class="grid" id="grid-0-2"></div>
 <div class="grid" id="grid-1-0"></div>
 <div class="grid" id="grid-1-1"></div>
 <div class="grid" id="grid-1-2"></div>
 <div class="grid" id="grid-2-0"></div>
 <div class="grid" id="grid-2-1"></div>
 <div class="grid" id="grid-2-2"></div>
 <div class="grid" id="grid-3-0"></div>
 <div class="grid" id="grid-3-1"></div>
 <div class="grid" id="grid-3-2"></div>
 </div>
</body>

样式：

body{
 background-color: #008694;
 font: 12px/20px "黑体" ,arial;
}
#header {
 display: block;
 margin: 0 auto;
 width: 500px;
 text-align: center;
}
#header h1 {
 font-family: Arial;
 font-size: 40px;
 font-weight: bold;
}
#timer {
 z-index: 4;
 font-size: 24px;
 color: #fa3c3c;
 font-weight: 700;
 text-shadow: 2px 2px 3px rgba(0, 0, 0, .3)
}
#container{
 width: 302px;
 height: 402px;
 margin: 50px auto;
 background-color: #55d769;
 border: 5px solid #000;
 position: relative;
}
.grid {
 width: 100px;
 height: 100px;
 background-color: #fff;

 border: 1px solid #000;
 position: absolute;
}
.block {
 width: 100px;
 height: 100px;
 border: 1px solid #000;
 font-family: Arial;
 font-weight: bold;
 font-size: 20px;
 color: #fff;
 text-align: center;
 position: absolute;
}
.coBlock{
 background-color: #000;
}
.gameover {
 display: block;
 margin: 0 auto;
 width: 300px;
 text-align: center;
 vertical-align: middle;
 position: absolute;
}
.gameover p {
 font-family: Arial;
 font-size: 50px;
 color: white;
 margin: 50px auto;
 margin-top: 150px;
 }
 .gameover span {
 font-family: Arial;
 font-size: 50px;
 color: white;
 margin: 50px auto;
 }
 .restartGame {
 display: block;
 margin: 20px auto;
 width: 180px;
 padding: 10px 10px;
 background-color: #8f7a66;
 font-family: Arial;
 font-size: 30px;
 color: white;
 border-radius: 10px;
 text-decoration: none;
 }
 .restartGame:hover {
 background-color: #9f8b77;
 }

这里并没有设置每个格子的位置，位置由js代码来设置，以及第二层的二维数组、第三层的显示层都由js来设置，这里和 jQuery编写网页版2048小游戏 并没有什么大的区别

代码：

function init(){
 timerRan = 0.000;
 keyDown = true;
 for(var i=0;i<4;i++){
 board[i] = [];
 for(var j=0;j<3;j++){
  board[i][j] = [];
  var grid = $('#grid-'+ i +'-'+ j);
  grid.css({
  'top':getPosTop(i,j),
  'left':getPosLeft(i,j)
  });
  $('#container').append('<div class="block" id="block-'+ i +'-'+ j +'"></div>');
  var block = $('#block-'+ i +'-'+ j);
  block.css({
  'top':getPosTop(i,j),
  'left':getPosLeft(i,j)
  });
  board[i][j] = 0;
 }
 }
function getPosTop(i,j){
 return i*100;
}
function getPosLeft(i,j){
 return j*100;
}

初始化

游戏开始时，要在每一行随机的位置显示一个黑色的方块，并且在最下面的那一行的黑色方块上要有提示信息

代码：

for(var i=0;i<4;i++){
 var randj = parseInt(Math.floor(Math.random() * 3));
 if(i >0 && board[i-1][randj] == 1){
  randj = parseInt(Math.floor(Math.random() * 3));
 }
 $('#block-'+ i +'-'+ randj).addClass('coBlock');
 board[i][randj] = 1;
 }
 $('#block-3-0').text('按J开始游戏');
 $('#block-3-1').text('按K开始游戏');
 $('#block-3-2').text('按L开始游戏');

基本操作

我们通过switch循环，来根据用户不同的输入进行不同的操作

代码：

$(document).keydown(function(event) {
 switch(event.keyCode){
 case 74:
  if(board[3][0] == 1 && keyDown){
  timeRan();
  clearText();
  moveDown();
  }else{
  isgameover();
  }
  break;
 case 75:
  if(board[3][1] == 1 && keyDown){
  timeRan();
  clearText();
  moveDown();
  }else{
   isgameover();
  }
  break;
 case 76:
  if(board[3][2] == 1 && keyDown){
  timeRan();
  clearText();
  moveDown();
  }else{
  isgameover();
  }
  break; 
 }
});

在这里设置 keyDown 这个全局变量的目的是为了防止用户在游戏结束时，继续按键。

timeRan()这个函数是显示游戏时间的

代码：

function timeRan(){
 clearTimeout(timer);
 timerRan += 0.001;
 $('#timer').text(timerRan.toString().slice(0,5));
 timer = setTimeout(function(){
 timeRan();
 },1);
}

clearText()这个函数是在游戏开始后，将最下面一行的提示信息去掉

代码：

function clearText(){
 $("#block-3-0").text("");
 $("#block-3-1").text("");
 $("#block-3-2").text("");
}

moveDown()这个函数是方块移动的最主要函数，因为方块要向下移动，所以我们要从最下面开始遍历二维数组，如果该格子是黑色的并且是最下面一行的，就只是简单的把该格子的颜色变回白色，如果该格子是黑色的并且是第一行至第三行的，这个格子变为白色，并且它的正下方的一个格子变为黑色，最后，在第一行的随机位置上显示一个黑色的格子

代码：

function moveDown(){
 for(var i=3;i>=0;i--){
 for(var j=2;j>=0;j--){
  if(board[i][j] == 1){
  if(i == 3){
   $('#block-'+ i +'-'+ j).removeClass('coBlock');
   board[i][j] = 0;
  }else{
   $('#block-'+ i +'-'+ j).removeClass('coBlock');
   board[i][j] = 0;

   $('#block-'+ (i+1) +'-'+ j).addClass('coBlock');
   board[i+1][j] = 1;

  }
  }
 }
 }
 var randj = parseInt(Math.floor(Math.random() * 3));
 $('#block-0-'+ randj).addClass('coBlock');
 board[0][randj] = 1;
}

isgameover()是显示游戏结束样式的函数，比较简单

代码：

function isgameover(){
 keyDown = false;
 clearTimeout(timer);
 $('#container').append('<div id="gameover" class="gameover"><p>本次用时</p><span>'+ timerRan.toString().slice(0,5) +'</span><a href="javascript:restartGame()" class="restartGame">重新开始</a></div>');
 var gameover = $("#gameover");
 gameover.css("width", "300px");
 gameover.css("height", "400px");
 gameover.css("background-color", "rgba(0, 0, 0, 0.5)");
}
function restartGame(){
 $('#timer').text('0.000');
 $('#gameover').remove();
 $('.block').remove();
 init();
}

总结

这个小游戏，如果学会了之前的 jQuery编写网页版2048小游戏，就会觉得这个挺简单的，基本的思想和方法都大同小异，如果有任何的建议如果或者想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

jQuery实现别踩白块儿网页版小游戏

- Author -

老板丶鱼丸粗面

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
使用vue实现多规格选择实例（SKU）
Aug 23 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
工厂模式在JS中的实践
Jan 18 #Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 #Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 #Javascript
动态加载css方法实现和深入解析
Jan 18 #Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 #Javascript
JS实现旋转木马式图片轮播效果
Jan 18 #Javascript
微信小程序实现图片预加载组件
Jan 18 #Javascript
tcp/ip(1) Parser(1) 递归(1) 限流(2) IP(1) 内置模块(1) 后端(1) 双人对弈(1) 限速(1) tokenizer(1)
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
浅谈php的优缺点
2015/07/14 PHP
php注册登录系统简化版
2020/12/28 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
基于vue-cli 路由 实现类似tab切换效果（vue 2.0）
2019/05/08 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
python matlab库简单用法讲解
2020/12/31 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
Sneaker Studio匈牙利：购买运动鞋
2018/03/26 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
表彰先进的通报
2014/01/31 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL