三. 创制、移动蛇身

蛇身是壹各种的img标记,使用多个小的方形图片,为了能定点地方,须要将样式设置为:

.game{
    position: fixed;
    /* 为了兼容IE7 */
    _position: absolute;
}

三个蛇身节点即是:

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

在定时器回调中,当要创新蛇身地方时,从后往前遍历节点,逐壹设置为上2个节点的任务,即落到实处了前进移动:

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"));
}

别的的豪门应该就领悟了,主要完结食品、越界判断、撞本身看清、吃食品判断、变长、变快、记分等。

上代码:

图片 1图片 2

  1 <html>
  2 <head>
  3     <title>Snaker</title>
  4     <link rel="stylesheet" href="style/style.css" type="text/css" />
  5     <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  6     <script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
  7     <script type="text/javascript">
  8         var x = 0;
  9         var y = 0;
 10         var step = 20;
 11         var dir = "right";
 12         var initNodeCount = 4;
 13         var snakeLength;
 14         //生成新节点
 15         function getNewNode(id) {
 16             return $('<img id="' + id + '" class="game" src="Images/node.ico" />');
 17         };
 18         //判断是否位置相同,即碰撞测试
 19         function isSamePosition(id1, id2) {
 20             //alert(id1 + "_" + id2);
 21             return ($('#' + id1).css("left") == $('#' + id2).css("left") && $("#" + id1).css("top") == $('#' + id2).css("top"));
 22         };
 23         //初始化节点
 24         function initPositions() {
 25             var i;
 26             for (i = initNodeCount - 1; i >= 0; i--) {
 27                 getNewNode('node' + i).appendTo("body");
 28                 $("#node" + i).css("left", 100 - step * i);
 29                 $("#node" + i).css("top", 0);
 30             }
 31             snakeLength = initNodeCount;
 32         };
 33         //更新节点位置
 34         function updatePositions() {
 35             var i;
 36             for (i = snakeLength - 1; i > 0; i--) {
 37                 $("#node" + i).css("left", $("#node" + (i - 1)).css("left"));
 38                 $("#node" + i).css("top", $("#node" + (i - 1)).css("top"));
 39             }
 40             $("#node0").css("top", y);
 41             $("#node0").css("left", x);
 42             if (x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) {
 43                 alert("你一头撞到屏幕边缘上了!有木有!!!");
 44                 location.reload();
 45             }
 46             for (i = snakeLength - 1; i > 0; i--) {
 47                 if (isSamePosition("node" + i, "node0")) {
 48                     alert("你一口咬到自己屁屁上了!有木有!!!");
 49                     location.reload();
 50                 }
 51             }
 52         };
 53         //吃掉食物
 54         function eatFood() {
 55             if (isSamePosition("node0", "food")) {
 56                 getNewNode('node' + snakeLength).appendTo('body');
 57                 $(('#node' + snakeLength)).css("left", -100);
 58                 snakeLength = snakeLength + 1;
 59                 createFood(false);
 60             };
 61         };
 62         //创建新食物
 63         function createFood(isNew) {
 64             var fx = Math.random();
 65             fx = Math.round(fx * 20) * 20;
 66             var fy = Math.random();
 67             fy = Math.round(fy * 20) * 20;
 68             if (isNew) {
 69                 $('<img id="food" class="game" src="Images/food.ico" />').appendTo('body');
 70             }
 71             $('#food').css("left", fx);
 72             $('#food').css("top", fy);
 73         };
 74         //启动定时器
 75         function startTimer() {
 76             $('body').everyTime(300, 'MainTimer', function () {
 77                 //alert(dir);
 78                 if (dir == "right") {
 79                     x = x + step;
 80                 } else if (dir == "left") {
 81                     x = x - step;
 82                 } else if (dir == "down") {
 83                     y = y + step;
 84                 } else if (dir == "up") {
 85                     y = y - step;
 86                 }
 87                 updatePositions();
 88                 eatFood();
 89             });
 90         };
 91         $(function () {
 92             initPositions();
 93             createFood(true);
 94             //暂停、继续
 95             $('#startStop').toggle(
 96                 function () {
 97                     $('body').stopTime('MainTimer');
 98                 },
 99                 function () {
100                     startTimer();
101                 }
102             );
103             //定时器
104             startTimer();
105             //键盘响应
106             $(document).keydown(function (event) {
107                 event = event || window.event;
108                 if (event.keyCode == 38 && dir != "down") {
109                     dir = "up";
110                 } else if (event.keyCode == 37 && dir != "right") {
111                     dir = "left";
112                 } else if (event.keyCode == 39 && dir != "left") {
113                     dir = "right";
114                 } else if (event.keyCode == 40 && dir != "up") {
115                     dir = "down";
116                 };
117             });
118         });
119         
120     </script>
121 </head>
122 <body>
123     <button type="button" id="startStop">
124         开始/停止</button>
125 </body>
126 </html>

View Code

初学jQuery,经验尚浅,有许多做的不佳的地方,希望大家批评指正。

 

2. 键盘响应

jquery提供了一名目繁多的键盘事件函数:

1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时接触,也正是您按下键盘起来后的风云
3、keypress()
keypress事件会在敲击按键时触及,大家得以领略为按下并抬起同3个按键

能够透过回调函数的参数event.keyCode来收获

$(document).keydown(function(event){
    if(event.keyCode == 37){//左方向键
        //do somethings;
    }else if (event.keyCode == 39){//右方向键
        //do somethings;
    }
}); 

具备的键盘代码表,可参照那篇博文

1. 了解JQuery.Timers

 

除用到了jQuery一.五.壹之外,作者还用到了jQuery.timers-一.2,作为定时器。它比Js的setInterval函数提供了更和谐的接口。

JQuery 提姆ers提供了四个函数:

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

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

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

示例:

1 $('body').everyTime(300, 'MainTimer', function () {
2     //do something every 300ms.   
3 }

把定时器放到body上,确太原时器不会随被移除。

诸如此类就能定时的更新贪吃蛇的地方,并且做一些逻辑判断。

自身用JQuery有一段时间了,越来越体会到其精锐之处,于是本身尝试写了三个贪吃蛇小游戏,拿来与网民分享一下。

 

相关文章

网站地图xml地图