首页 > Web开发 > 详细

jQuery实践-别踩白块儿网页版

时间:2017-01-17 18:25:29      阅读:254      评论:0      收藏:0      [点我收藏+]

▓▓▓▓▓▓ 大致介绍

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

  预览:别踩白块网页版

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

 

▓▓▓▓▓▓ 思路

 

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

 

    ◆最底下的一层是基本的样式(可见的)

 

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

 

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

 

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

 

▓▓▓▓▓▓ 基本结构与样式

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

  结构:

技术分享
 1 <body>
 2     <div id="header">
 3         <h1>别踩白块儿</h1>
 4         <div id="timer" >0.0000</div>
 5     </div>
 6     <div id="container">
 7         <div class="grid" id="grid-0-0"></div>
 8         <div class="grid" id="grid-0-1"></div>
 9         <div class="grid" id="grid-0-2"></div>
10         <div class="grid" id="grid-1-0"></div>
11         <div class="grid" id="grid-1-1"></div>
12         <div class="grid" id="grid-1-2"></div>
13         <div class="grid" id="grid-2-0"></div>
14         <div class="grid" id="grid-2-1"></div>
15         <div class="grid" id="grid-2-2"></div>
16         <div class="grid" id="grid-3-0"></div>
17         <div class="grid" id="grid-3-1"></div>
18         <div class="grid" id="grid-3-2"></div>
19     </div>
20 </body>
View Code

  样式:

技术分享
  1 body{
  2     background-color: #008694;
  3     font: 12px/20px "黑体" ,arial;
  4 }
  5 #header {
  6     display: block;
  7     margin: 0 auto;
  8     width: 500px;
  9     text-align: center;
 10 }
 11 
 12 #header h1 {
 13     font-family: Arial;
 14     font-size: 40px;
 15     font-weight: bold;
 16 }
 17 #timer {
 18     z-index: 4;
 19     font-size: 24px;
 20     color: #fa3c3c;
 21     font-weight: 700;
 22     text-shadow: 2px 2px 3px rgba(0, 0, 0, .3)
 23 }
 24 #container{
 25     width: 302px;
 26     height: 402px;
 27 
 28     margin: 50px auto;
 29     background-color: #55d769;
 30 
 31     border: 5px solid #000;
 32     position: relative;
 33 }
 34 .grid {
 35     width: 100px;
 36     height: 100px;
 37     background-color: #fff;
 38 
 39     border: 1px solid #000;
 40     position: absolute;
 41 }
 42 .block {
 43     width: 100px;
 44     height: 100px;
 45     border: 1px solid #000;
 46     font-family: Arial;
 47     font-weight: bold;
 48     font-size: 20px;
 49     color: #fff;
 50     text-align: center;
 51     position: absolute;
 52 }
 53 .coBlock{
 54 
 55     background-color: #000;
 56 }
 57 .gameover {
 58     display: block;
 59     margin: 0 auto;
 60     width: 300px;
 61     text-align: center;
 62     vertical-align: middle;
 63 
 64     position: absolute;
 65 }
 66 
 67 .gameover p {
 68      font-family: Arial;
 69      font-size: 50px;
 70      color: white;
 71      margin: 50px auto;
 72 
 73      margin-top: 150px;
 74  }
 75 
 76  .gameover span {
 77      font-family: Arial;
 78      font-size: 50px;
 79      color: white;
 80      margin: 50px auto;
 81  }
 82 
 83   .restartGame {
 84       display: block;
 85       margin: 20px auto;
 86 
 87       width: 180px;
 88       padding: 10px 10px;
 89       background-color: #8f7a66;
 90 
 91       font-family: Arial;
 92       font-size: 30px;
 93       color: white;
 94 
 95       border-radius: 10px;
 96 
 97       text-decoration: none;
 98   }
 99 
100   .restartGame:hover {
101       background-color: #9f8b77;
102   }
View Code

 

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

  代码:

技术分享
 1 function init(){
 2     timerRan = 0.000;
 3 
 4     keyDown = true;
 5 
 6     for(var i=0;i<4;i++){
 7         board[i] = [];
 8         for(var j=0;j<3;j++){
 9 
10             board[i][j] = [];
11 
12             var grid = $(‘#grid-‘+ i +‘-‘+ j);
13             grid.css({
14                 ‘top‘:getPosTop(i,j),
15                 ‘left‘:getPosLeft(i,j)
16             });
17 
18             $(‘#container‘).append(‘<div class="block" id="block-‘+ i +‘-‘+ j +‘"></div>‘);
19             var block = $(‘#block-‘+ i +‘-‘+ j);
20             block.css({
21                 ‘top‘:getPosTop(i,j),
22                 ‘left‘:getPosLeft(i,j)
23             });
24 
25             board[i][j] = 0;
26         }
27     }
View Code
技术分享
1 function getPosTop(i,j){
2     return i*100;
3 }
4 
5 function getPosLeft(i,j){
6     return j*100;
7 }
View Code

 

▓▓▓▓▓▓ 初始化

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

  代码:

技术分享
 1     for(var i=0;i<4;i++){
 2 
 3         var randj = parseInt(Math.floor(Math.random() * 3));
 4 
 5         if(i >0 && board[i-1][randj] == 1){
 6             randj = parseInt(Math.floor(Math.random() * 3));
 7         }
 8 
 9         $(‘#block-‘+ i +‘-‘+ randj).addClass(‘coBlock‘);
10 
11         board[i][randj] = 1;
12     }
13 
14     $(‘#block-3-0‘).text(‘按J开始游戏‘);
15     $(‘#block-3-1‘).text(‘按K开始游戏‘);
16     $(‘#block-3-2‘).text(‘按L开始游戏‘);
View Code

 

▓▓▓▓▓▓ 基本操作

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

  代码:

技术分享
 1 $(document).keydown(function(event) {
 2     switch(event.keyCode){
 3         case 74:
 4             if(board[3][0] == 1 && keyDown){
 5                 timeRan();
 6                 clearText();
 7                 moveDown();
 8             }else{
 9                 isgameover();
10             }
11             break;
12         case 75:
13             if(board[3][1] == 1 && keyDown){
14                 timeRan();
15                 clearText();
16                 moveDown();
17             }else{
18                  isgameover();
19             }
20             break;
21         case 76:
22             if(board[3][2] == 1 && keyDown){
23                 timeRan();
24                 clearText();
25                 moveDown();
26             }else{
27                 isgameover();
28             }
29             break;
30             
31     }
32 });
View Code

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

 

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

  代码:

技术分享
1 function timeRan(){
2     clearTimeout(timer);
3     timerRan += 0.001;
4     $(‘#timer‘).text(timerRan.toString().slice(0,5));
5     timer = setTimeout(function(){
6         timeRan();
7     },1);
8 }
View Code

 

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

  代码:

技术分享
1 function clearText(){
2     $("#block-3-0").text("");
3     $("#block-3-1").text("");
4     $("#block-3-2").text("");
5 }
View Code

 

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

  代码:

技术分享
 1 function moveDown(){
 2     for(var i=3;i>=0;i--){
 3         for(var j=2;j>=0;j--){
 4             if(board[i][j] == 1){
 5                 if(i == 3){
 6                     $(‘#block-‘+ i +‘-‘+ j).removeClass(‘coBlock‘);
 7                     board[i][j] = 0;
 8                 }else{
 9                     $(‘#block-‘+ i +‘-‘+ j).removeClass(‘coBlock‘);
10                     board[i][j] = 0;
11 
12                     $(‘#block-‘+ (i+1) +‘-‘+ j).addClass(‘coBlock‘);
13                     board[i+1][j] = 1;
14 
15                 }
16             }
17         }
18     }
19 
20     var randj = parseInt(Math.floor(Math.random() * 3));
21     $(‘#block-0-‘+ randj).addClass(‘coBlock‘);
22     board[0][randj] = 1;
23 }
View Code

 

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

  代码:

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

 

▓▓▓▓▓▓ 总结

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

 

jQuery实践-别踩白块儿网页版

原文:http://www.cnblogs.com/qqandfqr/p/6294039.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!