bob体育官方平台
jQuery实现别踩白块儿网页版小游戏_jquery_脚本之家

大致介绍

算是终止了试验,放假回家了。此番的别踩白块儿网页版要比以前做的 jQuery编写网页版2048小游戏 要简美素佳儿点,基本的笔触都差相当少。

那篇博客实际不是亲力亲为的疏解,只是差十分的少介绍函数的成效,在那之中落到实处的细节注释中有表明,网络的这么些源码有一些乱,借使想看比较鱼贯而入的源码只怕摄像的能够QQ联系笔者

思路

bob体育官方平台,这几个小游戏能够抽象化分为3层

◆最上边包车型客车生机勃勃层是着力的体制

◆中间的层是最关键的,是二个4x3的二维数组,游戏中大家都以对这一个二维数组进行操作

◆最上边的风华正茂层也是三个4x3的二维数组,是客户能最后看到的

大家通过最上边包车型客车风流倜傥层呈现最主旨的拾叁个小方格,不相同的水彩,每种格子对应的中级的层有不相同的值,最上面包车型客车豆蔻年华层担当呈现样式

基本布局与体制

主导的构造和体裁都挺简单,直接看代码

  别踩白块儿 0.0000               

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}#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{ board[i] = []; for{ board[i][j] = []; var grid = $; grid.css({ 'top':getPosTop, 'left':getPosLeft; $.append; var block = $; block.css({ 'top':getPosTop, 'left':getPosLeft; board[i][j] = 0; } }

function getPosTop{ return i*100;}function getPosLeft{ return j*100;}

初始化

玩耍初叶时,要在每风流洒脱行随机的岗位展现多个浅绛红的方框,并且在最下边包车型客车那意气风发行的原野绿方块上要有提醒音讯

for{ var randj = parseInt(Math.floor; if(i >0 && board[i-1][randj] == 1){ randj = parseInt(Math.floor; } $('#block-'+ i +'-'+ randj).addClass; board[i][randj] = 1; } $.text; $.text; $.text;

基本操作

大家经过switch循环,来根据客户差别的输入实行不相同的操作

$.keydown { switch{ case 74: if(board[3][0] == 1 && keyDown){ timeRan; moveDown(); }else{ isgameover(); } break; case 75: if(board[3][1] == 1 && keyDown){ timeRan; moveDown(); }else{ isgameover(); } break; case 76: if(board[3][2] == 1 && keyDown){ timeRan; moveDown(); }else{ isgameover;

在那间设置 keyDown 这几个全局变量的目标是为了防止顾客在娱乐停止时,继续按钮。

timeRan(卡塔尔那几个函数是显得游戏时间的

function timeRan(){ clearTimeout; timerRan += 0.001; $.text.slice; timer = setTimeout; },1);}

clearText(卡塔尔这一个函数是在游戏开端后,将最上边风流浪漫行的提醒音信去掉

function clearText.text.text.text;}

moveDown(卡塔尔(英语:State of Qatar)这几个函数是方块移动的最紧要函数,因为方块要向下活动,所以大家要从最下面领头遍历二维数组,要是该格子是茶色的同不常候是最下边黄金时代行的,就只是简短的把该格子的颜色变回青蓝,假如该格子是紫藤色的还假如第意气风发行至第三行的,这几个格子变为深橙,并且它的正下方的三个格子变为松石绿,最终,在率先行的随便地点上展现贰个月光蓝的格子

function moveDown(){ for{ for{ if{ if{ $.removeClass; board[i][j] = 0; }else{ $.removeClass; board[i][j] = 0; $ +'-'+ j).addClass; board[i+1][j] = 1; } } } } var randj = parseInt(Math.floor; $.addClass; board[0][randj] = 1;}

isgameover(卡塔尔国是显得游戏截至样式的函数,比较轻松

function isgameover(){ keyDown = false; clearTimeout; $.append(''+ timerRan.toString +'function restartGame.text; $; $; init();}

总结

其一小游戏,假若学会了事情未发生前的 jQuery编写网页版2048小游戏,就能够感到这些挺简单的,基本的思考和章程都大概,假使有其余的提出风姿浪漫旦如故想看比较井井有序的源码也许录像的能够QQ联系本身

上述就是本文的全部内容,希望本文的内容对我们的上学恐怕办事能带来一定的帮扶,同不经常间也目的在于不吝指教脚本之家!

返回顶部