<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习一</title>
</head>
<body>
(function ($) {
$.fn.game1 = function (options) {
var mainDiv = $(this);
var defaults = {
speed:300,//速度
leftSteps:80,
topSteps:50
};
var opts = $.extend(defaults, options);
//初始化身体方块个数
var size = 30;
//默认的第一个格子和最后一个格子
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, "#0FF"));
},
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;";
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("游戏已经结束~~~，再来一局吧！");
location.reload();
}
}
}
//添加原始方格
for (var i = 0; i < size; i++) {
itemLefts[i] = itemLeft + (i * stepsWidth);
itemTops[i] = itemTop;
//添加一个原始方格
//itemTops[i], i == 0 ? "red" : "#0FF"
mainDiv.append(mFun.getHtml(i, stepsWidth, stepsHeight, itemLefts[i], itemTops[i], "#0FF"));
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, "#0FF"));
itemLefts[size - 1] = tailLeft;
itemTops[size - 1] = tailTop;
itemIndex[size - 1] = size - 1;
mFun.addFood();
}
}, defaults+1.speed);
};
})(jQuery);
</body>
</html>