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联系我(免费)(找共同学习的伙伴)

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

Javascript 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
JavaScript基础之this详解
Jun 04 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 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
You might like
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
深入理解python中的闭包和装饰器
2016/06/12 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
基于python log取对数详解
2018/06/08 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
高中毕业生个人自我鉴定
2013/11/24 职场文书
自我评价如何写好?
2014/01/05 职场文书
校园公益广告语
2014/03/13 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
先进单位申报材料
2014/12/25 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
python 单机五子棋对战游戏
2022/04/28 Python