• jQuery贪吃蛇jQuery学习


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

    1. 了解JQuery.Timers

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

    JQuery Timers提供了三个函数:

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

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

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

    示例:

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

    把定时器放到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"));
    }

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

    上代码:

      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,经验尚浅,有很多做的不好的地方,希望大家批评指正。

  • 相关阅读:
    html5中input弹窗时,不弹出输入法弹出。
    ajax异步提交
    WinForm更新文件
    固态硬盘上安装Windows8(ghost)启动问题
    刷新页面Js
    流媒体
    WebOffice上传Word限制设置
    js页面传参中文乱码问题
    weboffice(点聚)在传参为汉字时的乱码问题
    Linq中Lanbda表达式做参数
  • 原文地址:https://www.cnblogs.com/pleiades/p/3147634.html
Copyright © 2020-2023  润新知