首页
所有分类
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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
vue 实现走马灯效果
Oct 28 Javascript
js消除图片小游戏代码
Dec 11 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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
申请书(21) 文书(291) 波段(1) AngularJS(2) 通知(159) 观后感(479) HAM-2000(1) 导游词(322) 慰问信(53) 实用文书(952)
You might like
很让人受教的 提高php代码质量36计
2012/09/05 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
文字幻灯片
2006/06/26 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
js制作提示框插件
2020/12/24 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python定义类的简单用法
2020/07/24 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
美国最大点评网站：Yelp
2018/02/14 全球购物
租租车：国际租车、美国租车、欧洲租车、特价预订国外租车（中文服务）
2018/03/28 全球购物
Sneaker Studio罗马尼亚网站：购买运动鞋
2018/11/04 全球购物
暑期实习鉴定
2013/12/16 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
幼儿教师个人总结
2015/02/05 职场文书
少年犯观后感
2015/06/11 职场文书
普希金的诗歌赏析（3首）
2019/08/20 职场文书
Python学习之迭代器详解
2022/04/01 Python
详解MySQL的内连接和外连接
2023/05/08 MySQL