你的位置:首页 > Java教程

[Java教程]Jquery练手之


记得以前刚出来工作的时候,什么都不懂。
老板让用Jquery写一个功能,我不会写,然后跟老板说,我就是个.net程序员,为什么要写Jquery。。。后面我们老大给我写了!现在我才知道net程序员要会多少东西。。。你们懂得。
好了,下面是我用Jquery写的一个贪吃蛇的小例子,直接发代码,写的不好请指教

/*作者:十天用途:贪吃蛇小游戏邮箱:284485094@qq.com*/(function ($) {  $.fn.game1 = function (options) {    var mainDiv = $(this);    var defaults = {      speed:150,//速度      leftSteps:50,      topSteps:30    };    var opts = $.extend(defaults, options);    //初始化身体方块个数    var size = 5;    //默认的第一个格子和最后一个格子     var topItem = 0, lastItem = size - 1;    //坐标数组    var itemLefts = new Array();    var itemTops = new Array();    //顺序数组     var itemIndex = new Array();    //初始化食物位置    var foodLeft = 0, foodTop = 0;    //初始化尾巴的位置    var tailLeft = 0,tailTop = 0;    //初始化网格大小[px]    var stepsWidth = $(window).width() / defaults.leftSteps;    var stepsHeight = $(window).height() / defaults.topSteps;    //初始化第一个格子位置    var itemLeft = defaults.leftSteps / 2 * stepsWidth;    var itemTop = defaults.topSteps / 2 * stepsHeight;    //一些公用函数    var mFun = {      addFood: function () {        foodLeft = (Math.floor(Math.random() * defaults.leftSteps)) * stepsWidth;        foodTop = (Math.floor(Math.random() * defaults.topSteps)) * stepsHeight;        if ($(".itemfood").length > 0)          $(".itemfood").css({ left: foodLeft, top: foodTop });        else          mainDiv.append(mFun.getHtml("food", stepsWidth, stepsHeight, foodLeft, foodTop, "#000"));      },      getTopIndex: function () {        var lastIndex = itemIndex[size - 1];        for (var i = size - 1; i > 0 ; i--) {          itemIndex[i] = itemIndex[i - 1];        }        itemIndex[0] = lastIndex;        return itemIndex[0];      },      getHtml: function (i, stepsWidth, stepsHeight, itemLeft, itemTop, borderColor) {        var newItem = "<div class=\"item";        newItem += i;        newItem += "\" style=\"position:absolute;width:";        newItem += stepsWidth - 3;        newItem += "px; height:";        newItem += stepsHeight - 3;        newItem += "px;left:";        newItem += itemLeft;        newItem += "px; top:";        newItem += itemTop;        newItem += "px;border:1px solid ";        newItem += borderColor;        newItem += ";background-color:";        newItem += borderColor;        newItem += ";\">";        newItem += "</div>";        return newItem;      },      checkKill: function (_itemleft, _itemtop) {        var fag = true;        if (_itemleft < 0)          fag = false;        else if (_itemleft > $(window).width())          fag = false;        else if (_itemtop < 0)          fag = false;        else if (_itemtop > $(window).height())          fag = false;        if (!fag) {          alert("GAME OVER!");          location.reload();        }      }    }    //添加原始方格    for (var i = 0; i < size; i++) {      itemLefts[i] = itemLeft + (i * stepsWidth);      itemTops[i] = itemTop;      //添加一个原始方格      //itemTops[i], i == 0 ? "red" : "#000"      mainDiv.append(mFun.getHtml(i, stepsWidth, stepsHeight, itemLefts[i], itemTops[i], "#000"));      itemIndex[i] = i;    }    tailLeft = itemLefts[size-1];    tailTop = itemTops[size - 1];    //添加一个食物    mFun.addFood();    //初始化方向    var direction = "left";    //绑定键盘按下事件     $("html").keydown(function (event) {      switch (event.keyCode) {        case 37://left          if (direction != "right")           direction = "left";          break;        case 39://right          if (direction != "left")          direction = "right";          break;        case 38://top          if (direction != "bottom")          direction = "top";          break;        case 40://bottom          if (direction != "top")          direction = "bottom";          break;        default:          break;      }    });    //移动    var mobile = setInterval(function () {      topItem = mFun.getTopIndex();      //如果遇到食物要添加尾巴的位置      tailLeft = itemLefts[topItem];      tailTop = itemTops[topItem];      switch (direction) {        case "left":          itemLefts[topItem] = itemLeft - stepsWidth;          itemTops[topItem] = itemTop;          break;        case "right":          itemLefts[topItem] = itemLeft + stepsWidth;          itemTops[topItem] = itemTop;          break;        case "top":          itemLefts[topItem] = itemLeft;          itemTops[topItem] = itemTop - stepsHeight;          break;        case "bottom":          itemLefts[topItem] = itemLeft ;          itemTops[topItem] = itemTop + stepsHeight;          break;        default:          break;      }      itemLeft = itemLefts[topItem];      itemTop = itemTops[topItem];      mFun.checkKill(itemLeft, itemTop);      $(".item" + topItem).css({ left: itemLefts[topItem], top: itemTops[topItem] });      //碰到食物了      if (Math.abs(itemLeft - foodLeft) < 1 && Math.abs(itemTop - foodTop) < 1) {        size++;        mainDiv.append(mFun.getHtml(size - 1, stepsWidth, stepsHeight, tailLeft, tailTop, "#000"));        itemLefts[size - 1] = tailLeft;        itemTops[size - 1] = tailTop;        itemIndex[size - 1] = size - 1;        mFun.addFood();      }    }, defaults.speed);  };})(jQuery);

完整代码百度云连接pan.baidu.com/s/1jHrBrjK 密码:db9i