全国服务热线:4008-888-888

公司新闻

小程序适合哪些行业_jQuery完成别踩白块儿网页版

jQuery实现别踩白块儿网页版小游戏       本文主要介绍了jQuery实现别踩白块儿网页版小游戏的思路分析与代码。具有一定的参考价值,下面跟着小编一起来看下吧

大致介绍

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

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

思路

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

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

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

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

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

基本结构与样式

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

结构:

 body 
 div id="header" 
 h1 别踩白块儿 /h1 
 div id="timer" 0.0000 /div 
 /div 
 div id="container" 
 div id="grid-0-0" /div 
 div id="grid-0-1" /div 
 div id="grid-0-2" /div 
 div id="grid-1-0" /div 
 div id="grid-1-1" /div 
 div id="grid-1-2" /div 
 div id="grid-2-0" /div 
 div id="grid-2-1" /div 
 div id="grid-2-2" /div 
 div id="grid-3-0" /div 
 div id="grid-3-1" /div 
 div 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来设置,这里和 并没有什么大的区别

代码:

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

初始化

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

代码:

for(var i=0;i 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 i--){
 for(var j=2;j 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" p 本次用时 /p span '+ timerRan.toString().slice(0,5) +' /span a href="javascript:restartGame()" 重新开始 /a /div 
 var gameover = $("#gameover");
 gameover.css("width", "300px");
 gameover.css("height", "400px");
 gameover.css("background-color", "rgba(0, 0, 0, 0.5)");
}

总结

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

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服