jQuery贪吃蛇--jQuery学习

时间：2022-01-28 20:28:07

我用JQuery有一段时间了，越来越体会到其强大之处，于是自己尝试写了一个贪吃蛇小游戏，拿来与网友分享一下。

1. 了解JQuery.Timers

除用到了jQuery1.5.1之外，我还用到了jQuery.timers-1.2，作为定时器。它比Js的setInterval函数提供了更友好的接口。

JQuery Timers提供了三个函数：

1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])

2. oneTime(时间间隔, [定时器名称], 呼叫的函式)

3. stopTime ([定时器名称], [函式名称])

示例：

 $('body').everyTime(300, 'MainTimer', function () {

     //do something every 300ms.

 }

把定时器放到body上，确保定时器不会随被移除。

这样就能定时的更新贪吃蛇的位置，并且做一些逻辑判断。

2. 键盘响应

jquery提供了一系列的键盘事件函数：

1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

可以通过回调函数的参数event.keyCode来获取

$(document).keydown(function(event){

    if(event.keyCode == 37){//左方向键

        //do somethings;

    }else if (event.keyCode == 39){//右方向键

        //do somethings;

    }

});

所有的键盘代码表，可参考这篇博文

3. 创建、移动蛇身

蛇身是一系列的img标记，使用一个小的方形图片，为了能固定位置，需要将样式设置为：

.game{

    position: fixed;

    /* 为了兼容IE7 */

    _position: absolute;

}

一个蛇身节点就是：

<img id="node1" class="game" src="Images/node.ico" />

在定时器回调中，当要更新蛇身位置时，从后往前遍历节点，逐一设置为上一个节点的位置，即实现了向前移动：

var i;

for (i = snakeLength - 1; i > 0; i--) {

    $("#node" + i).css("left", $("#node" + (i - 1)).css("left"));

    $("#node" + i).css("top", $("#node" + (i - 1)).css("top"));

}

其他的大家应该就明白了，主要实现食物、越界判断、撞自己判断、吃食物判断、变长、变快、记分等。

上代码：

 <html>

 <head>

     <title>Snaker</title>

     <link rel="stylesheet" href="style/style.css" type="text/css" />

     <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

     <script type="text/javascript" src="js/jquery.timers-1.2.js"></script>

     <script type="text/javascript">

         var x = 0;

         var y = 0;

         var step = 20;

         var dir = "right";

         var initNodeCount = 4;

         var snakeLength;

         //生成新节点

         function getNewNode(id) {

             return $('<img id="' + id + '" class="game" src="Images/node.ico" />');

         };

         //判断是否位置相同，即碰撞测试

         function isSamePosition(id1, id2) {

             //alert(id1 + "_" + id2);

             return ($('#' + id1).css("left") == $('#' + id2).css("left") && $("#" + id1).css("top") == $('#' + id2).css("top"));

         };

         //初始化节点

         function initPositions() {

             var i;

             for (i = initNodeCount - 1; i >= 0; i--) {

                 getNewNode('node' + i).appendTo("body");

                 $("#node" + i).css("left", 100 - step * i);

                 $("#node" + i).css("top", 0);

             }

             snakeLength = initNodeCount;

         };

         //更新节点位置

         function updatePositions() {

             var i;

             for (i = snakeLength - 1; i > 0; i--) {

                 $("#node" + i).css("left", $("#node" + (i - 1)).css("left"));

                 $("#node" + i).css("top", $("#node" + (i - 1)).css("top"));

             }

             $("#node0").css("top", y);

             $("#node0").css("left", x);

             if (x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) {

                 alert("你一头撞到屏幕边缘上了！有木有！！！");

                 location.reload();

             }

             for (i = snakeLength - 1; i > 0; i--) {

                 if (isSamePosition("node" + i, "node0")) {

                     alert("你一口咬到自己屁屁上了！有木有！！！");

                     location.reload();

                 }

             }

         };

         //吃掉食物

         function eatFood() {

             if (isSamePosition("node0", "food")) {

                 getNewNode('node' + snakeLength).appendTo('body');

                 $(('#node' + snakeLength)).css("left", -100);

                 snakeLength = snakeLength + 1;

                 createFood(false);

             };

         };

         //创建新食物

         function createFood(isNew) {

             var fx = Math.random();

             fx = Math.round(fx * 20) * 20;

             var fy = Math.random();

             fy = Math.round(fy * 20) * 20;

             if (isNew) {

                 $('<img id="food" class="game" src="Images/food.ico" />').appendTo('body');

             }

             $('#food').css("left", fx);

             $('#food').css("top", fy);

         };

         //启动定时器

         function startTimer() {

             $('body').everyTime(300, 'MainTimer', function () {

                 //alert(dir);

                 if (dir == "right") {

                     x = x + step;

                 } else if (dir == "left") {

                     x = x - step;

                 } else if (dir == "down") {

                     y = y + step;

                 } else if (dir == "up") {

                     y = y - step;

                 }

                 updatePositions();

                 eatFood();

             });

         };

         $(function () {

             initPositions();

             createFood(true);

             //暂停、继续

             $('#startStop').toggle(

                 function () {

                     $('body').stopTime('MainTimer');

                 },

                 function () {

                     startTimer();

                 }

             );

             //定时器

             startTimer();

             //键盘响应

             $(document).keydown(function (event) {

                 event = event || window.event;

                 if (event.keyCode == 38 && dir != "down") {

                     dir = "up";

                 } else if (event.keyCode == 37 && dir != "right") {

                     dir = "left";

                 } else if (event.keyCode == 39 && dir != "left") {

                     dir = "right";

                 } else if (event.keyCode == 40 && dir != "up") {

                     dir = "down";

                 };

             });

         });

     </script>

 </head>

 <body>

     <button type="button" id="startStop">

         开始/停止</button>

 </body>

 </html>

初学jQuery，经验尚浅，有很多做的不好的地方，希望大家批评指正。

相关文章