function insertDiv() { var rand = Math.floor(Math.random() * 4); // 生成一个0到3 的随机数，用来作为判断生成黑块的位置 $("#inner").prepend("<div></div>"); $.each([0, 1, 2, 3], function (k, v) { if (v == rand) { $("#inner .item").first().append("<div></div>"); } else { $("#inner .item").first().append("<div></div>"); } }) } function init() { // 初始生成4*4的div $.each([0, 1, 2, 3], function () { insertDiv(); }); }
初始化完成后，我们需要做的就是如何让界面动起来，这里写了一个函数，每次调用该函数的话，游戏内容会自动向下移动几px，然后将该函数传给定时器，就可以不断的向下滑动，不过这里需要注意，下落过程中，如果下落的距离超过一行后，需要重新插入一行，然后将超出的那一行删除，而且需要将偏移的距离恢复到原来的位置，如果需要加速白块下落的速度，只需将每次向下移动加大即可，游戏后面的自动加速也是基于此来做的。下面来看一下这部分的代码
function move() { var ctop = parseInt($("#inner").offset().top); ctop += window.globalSpeed; // 自定义的全局变量， 每次下落偏移的距离 $("#inner").offset({top: ctop}); if (ctop >= 114) { insertDiv(); $("#inner").offset({top: 12}); // 刚好移动一个item后在上移一个item delDiv(); } }
之后就是写开始，暂停部分，这里主要是对计时器的使用，这里需要注意的是每次点击的时候，都要先判断定时器是否已经清除，否则这里会有bug，下面来直接看一下代码
function bindStart() { $("#begin").mouseover(function () { $(this).css("cursor", 'pointer'); }).click(function () { if(window.globalIsClearT1){ // 自定义的全局变量，看定时器是否清楚 }else { clearInterval(window.globalT1); //没有清除的话，先清除，避免两次按下开始按钮 } window.globalT1 = setInterval(move, 30); window.globalStartClick = true; //全局变量，是否开始标志位，只有开始了，才能点击 }) } function bindStop() { $("#stop").mouseover(function () { $(this).css("cursor", 'pointer'); }).click(function () { clearInterval(window.globalT1); window.globalStartClick = false; window.globalIsClearT1 = true; }) }
写到这里，再就是看一下，每次点击的时候如何操作，是否得分，还是点错了游戏结束，下面来看一下代码，界面上有4*4个格子，需要事件委托，来判断是哪一个白块被点击，如果点击的是黑快，将其变为白块，并且加上一分即可，否则点错的话，游戏就结束
function bindClick() { $("#inner").click(function (e) { if (window.globalStartClick) { var current = $(e.target); if (current.hasClass("black")) { current.removeClass("black"); score(); } else { gameOver(); } } })； }
下面来看一下如何计算得分的代码，以及如何实现自动的加速，比较简单就不多说了
function score() { var score = parseInt($("#score").text()); if(score%10 == 0){ window.globalSpeed += 1; //得到一定的分数后就自动加速 } $("#score").text(score + 1); }
最后来看一下，游戏结束的时候如何处理，游戏结束的话，先暂停游戏下落，然后弹出模态对话框，让用户选择返回，还是重新来过，重新来过的话，分数清零，游戏界面清空，然后初始化再在自动触发开始按钮，开始下一轮游戏，
function gameOver() { //暂停游戏，显示模态框 $("#stop").trigger('click'); window.globalIsClearT1 = true; $(".shadow").removeClass('hide').next().removeClass('hide'); $("#again").click(function () { clearInterval(window.globalT1); $(".shadow").addClass('hide').next().addClass('hide'); $("#score").text(0); clearAll(); init(); $("#begin").trigger('click'); // window.globalT1 = setInterval(move, 30) });
到这里，基本整个游戏都算实现了，游戏不复杂，但是要完全运行起来，没有bug也不是那么简单，有兴趣的也可以去写写，如果上面代码有什么问题的话，可以向我提出来。
以上这篇jquery之别踩白块游戏的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。