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