首页
所有分类
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 相关文章推荐
详解jquery uploadify 上传文件
Nov 09 Javascript
js操作滚动条事件实例
Jan 29 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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
人人对战(1) 后端(1) 算法(1) 递归(1) 内置模块(1) tokenizer(1) Vscode(3) 双人对弈(1) Parser(1) 时钟(1)
You might like
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
深入php内核之php in array
2015/11/10 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
js的写法基础分析
2011/01/17 Javascript
IE的有条件注释判定IE版本详解（附实例代码）
2012/01/04 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
python中的__slots__使用示例
2015/02/26 Python
python中文乱码不着急，先看懂字节和字符
2017/12/20 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python递归法解决棋盘分割问题
2019/07/17 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Python调用C/C++的方法解析
2020/08/05 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
J2EE面试题
2016/03/14 面试题
自荐书封面下载
2013/11/29 职场文书
结婚典礼证婚词
2014/01/11 职场文书
网络营销策划方案
2014/06/04 职场文书
2015年党总支工作总结
2015/05/25 职场文书
长征观后感
2015/06/09 职场文书
golang slice元素去重操作
2021/04/30 Golang