怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 295 JQUERY DREAMWEAVER
教你用jQuery制作别踩白块网页版
来源：互联网
2023-03-17 00:52:12 215
别踩白块（又名钢琴块）相信大家都玩过，这是一款制作简单、容易上手，但又很有新意的一款安卓游戏，它一推出就取得了相当好的成果，获得了较多的用户量。一开始它只是简单的一种游戏模式，但在流行起来之后，别踩白块又逐渐添加了许许多多的其他模式，今天我们制作的就是最初的别踩白块，即经典版。
工具/原料
- Dreamweaver CS6 或Dreamweaver 8 等
- jQuery（版本随意，不是太过时就好）
方法/步骤
首先，没有jQuery的去官网下载，如图。
没有Dreamweaver的去下载安装，不在多说，自己百度。
进入别踩白块，我们首先来分析一下这个游戏。注：我们只分析经典模式。
这个游戏的主体就是一个4*n的白格子，每一行有四个，共有n行。每一行中只有一个黑色的格子，玩家点击黑色的格子，直到过关，点错即失败。
值得一提的是：屏幕上方有计时器，显示用户所用时间，这样就更增加了这个游戏的可玩性！
如果没有计时器，这个游戏就缺少了互动，未免太乏味了。玩家可以把自己的所用时间“炫耀”到朋友圈或其他地方。
这样一来相当于免费给别踩白块打广告，二来又提高了这个游戏的玩家互动性，使玩家更加黏上这款游戏！
不愧是第一虐心手游。
分析之后，我们就开始做这款游戏的网页版了。
第一步：输出表格
首先，我们需要一个4*n的格子，这个我们可以用jQuery输出表格做到。
$(元素).append(HTML代码)；
利用这个加上for循环，我们可以输出任意行数的4列表格。
图示代码和表格效果。
js代码如下：
--------------------------------------------------------------------------------
function ym()//调用这个函数即可输出4*20的表格。
{var i,j,k;
var be,li;
var ss="";
be=4;//横着的块数
li=20;//共有多少行
for (i=1;i=li;i )
{ss ="tr>";
for (j=1;j=be;j )
{ss ="td id=\"a" i j "\" tabindex='-1'>" "a name=\"b" i j "\" id=\"b" i j "\">/a>/td>";}
//你可以看见，td里有一个a，那是一个锚，用来同步页面。
//注意，每一个td一定要加id，按照坐标加，否则很难用jQuery操作。id不能以数字开头。
ss ="/tr>";
}
$("#three").append(ss);//这里的#three是一个id为three的table
--------------------------------------------------------------------------------
html代码：
--------------------------------------------------------------------------------
body>
center>
table width='1020px' border='1px' height="3280px" id="three" cellspacing="0" bgcolor="black">
tbody>
!-- 这里什么也不输入是因为用jQuery输出表格，当然，你也可以自己用html输出表格，但那样我个人觉得麻烦且无技术含量。 -->
/tbody>
/table>
/center>
--------------------------------------------------------------------------------
第二步：涂色白色
我们来给格子图上颜色，让它更像别踩白块！
涂色很简单，用CSS就ok啦。
--------------------------------------------------------------------------------
style type="text/css">
#three td
{
height:163px;
width:250px;
background:#CCC;//灰色。白色改成white即可。
font-size:22px;
background-repeat:no-repeat;
}
/style>
--------------------------------------------------------------------------------
先把所有方块涂成白色吧!
也可以换成你想要的其他颜色！
第三步：涂色黑色
我们知道每一行都要有一个黑色块，所以我们必须在每一行涂一个黑色。
为了保证游戏的难度，这个任务交给随机数去做吧！
--------------------------------------------------------------------------------
k=randomo(1,5);//这样可以获得1,2,3,4中的随机数。
function randomo(mi,ma){return Math.floor(mi Math.random()*(ma-mi));}//一个简单的随机数函数。
--------------------------------------------------------------------------------
接下来我们就要随即涂色了，通过随机得到的数字，给每一行的第n个涂上颜色，这时，td上的坐标id就起到作用了！
在这里我们需要用到jQuery的$().css();函数。
简单说明一下
$("#a11").css("background-color","white");//给第一行第一个格子涂上颜色
------------------------------------------------------------------------------
for (i=1;i=li;i )
{k=randomo(1,5);//获取随机数
ss="";
ss ="#a" i k;//将坐标翻译成id
$(ss).css("background-color","black");//涂成黑色
------------------------------------------------------------------------------
效果图如下（我没有改成黑白的，而是添加了图片）
这样看起来大体已经很像别踩白块了！
第四步：按键\触摸事件
首先说按键：需要用到jQuery的$(document).keyup(function(event){});
函数，即按键响应事件。
event.keyCode中有按键的值，至于值与按键的对应，
从A到Z：65-90
如图。
代码中的switch中有一个bs()函数，那是我自己定义的一个函数，在这个函数里，将判断是否按错（css是否是black）和将按对的变为白色（css变为白色）
代码不再写，上边涂色已经说过。
按错跳转页面，完成跳转页面什么的就不再多说了，自己做几个页面就可以了。
第五步：页面同步（锚的使用）
小编我技术有限，所以同步页面用的是html元素A，即抛锚跳转。
我不是没有试过滚动条自动滚动或页面下移，但这些都有点麻烦，虽然很有技术含量。
当然，用什么方法根据个人习惯即可。
还记得td里面的a吧，每一个td都有，而且有坐标id，那个就是用来跳转的。
如果没有这个，那么用户要手动下脱网页来进行游戏，而不是网页自己走。
所以锚还是非常重要的，没有这个，用户体验会非常不好。
设置锚已经设置好了，那么介绍使用。
用到js的一个函数location.hash。
location.hash="锚的id";//这句加到bs()(按键响应函数)里面，即玩家按对键页面下移。
这样页面便会随着玩家按键往下移动。
第六步：最后一步————计时器
这个就比较随意了，网上jQuery计时器一大堆，搜一个改改就可以用了。
关键是显示方式，个人觉得别踩白块的显示方式就很好，在最上边动态显示。
你也可以做一个浮动DIV，在页面最上边显示时间。感觉蛮好的。
浮动DIV推荐Bootstrap的，毕竟人家做的高大上。
再加上一个数据库，将用户数据进行比较，列出排行榜、新纪录、炫耀一下等东西，这个游戏的可玩性就更高了！
你也可以看一下我做的计时器，关注我可以查看我其他经验，里面有一篇是关于jQuery计时器的。
图示为不好的计时器，建议不要这样做！
注意事项
- 仅供学习jQuery和参考，不做商业用途。
- 请勿侵犯他人版权。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JQUERY
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 281 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 325 JQUERY