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
Jquery练手之-贪吃蛇的更多相关文章
- jQuery练手:仿新浪微博图片文字列表淡进淡出上下滚动效果
		1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ... 
- 初级练手项目——用Python一步一步实现“智能”贪吃蛇!
		贪吃蛇作为一款经典的小游戏,想必大家一定并不陌生,今天我们就来用Python来设计与实现贪吃蛇游戏,回味一下童年的快乐.快跟着小编来看看吧!  基本环境配置 ●版本:Python3 ●系统:Wind ... 
- jQuery贪吃蛇--jQuery学习
		我用JQuery有一段时间了,越来越体会到其强大之处,于是自己尝试写了一个贪吃蛇小游戏,拿来与网友分享一下. 1. 了解JQuery.Timers 除用到了jQuery1.5.1之外,我还用到了jQu ... 
- 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏
		回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ... 
- 贪吃蛇的java代码分析(二)
		代码剖析 贪吃蛇是一款十分经典的小游戏,对初入coding的朋友来说,拿贪吃蛇这样一个案例来练手十分合适,并不高的难度和成功后的成就感都是学习所必须的.下面我将依照我当时的思路,来逐步分析实现的整个过 ... 
- pygame写贪吃蛇
		python小白尝试写游戏.. 学了点pygame不知道那什么练手好,先拿贪吃蛇开刀吧. 一个游戏可以粗略的分为两个部分: 数据(变量) 处理数据(函数,方法) 设计变量 首先预想下,画面的那些部分需 ... 
- 用Python写一个贪吃蛇
		最近在学Python,想做点什么来练练手,命令行的贪吃蛇一般是C的练手项目,但是一时之间找不到别的,就先做个贪吃蛇来练练简单的语法. 由于Python监听键盘很麻烦,没有C语言的kbhit(),所以这 ... 
- Python写的贪吃蛇游戏例子
		第一次用Python写这种比较实用且好玩的东西,权当练手吧 游戏说明: * P键控制“暂停/开始”* 方向键控制贪吃蛇的方向 源代码如下: 复制代码代码如下: from Tkinter import ... 
- 用python+pygame写贪吃蛇小游戏
		因为python语法简单好上手,前两天在想能不能用python写个小游戏出来,就上网搜了一下发现了pygame这个写2D游戏的库.了解了两天再参考了一些资料就开始写贪吃蛇这个小游戏. 毕竟最开始的练手 ... 
随机推荐
- 图论(Tarjan缩点):BZOJ 1194: [HNOI2006]潘多拉的盒子
			1194: [HNOI2006]潘多拉的盒子 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 344 Solved: 181[Submit][Stat ... 
- Delphi TdxComponentPrinter页头页脚的设定
			TdxComponentPrinter页头页脚的设定 抄一段备忘.用程序控制也一样.如果是这样,那么 双击TdxComponentPrinter控件,在出现的窗口中,点击ADD,建立一个与TcxGri ... 
- trigger 触发器
			--trigger --在SC表上建了一个触发器,查看inserted和deleted表中内容. create trigger tri_1 on sc for insert,update,delete ... 
- Ancient Message (古埃及象形文字识别 Uva 1103)
			原题:https://uva.onlinejudge.org/external/11/1103.pdf 给一幅图(16进制), 判断图中有哪些象形文字. 只识别 这6个就可以 示例: 将16进制数据 ... 
- poj1003
			题目大意:超越悬挂 你可以把卡片最远堆到距离桌子多远?如果你有一张卡片,你可以堆卡片长度的一半如果有两张卡片那么可以堆1/2+1/3=5/6,如果有n张卡片那么可以堆1/2+1/3+1/4+..... ... 
- Asp.Net Mvc后台数据验证自测小Demo
			使用过MVC的同学一定不陌生MVC的模型绑定和模型校验,使用起来非常方便,定义好Entity之后,在需要进行校验的地方可以打上相应的Attribute,在Action开始时检查ModelState的I ... 
- ab测试
			PS:网站性能压力测试是性能调优过程中必不可少的一环.只有让服务器处在高压情况下才能真正体现出各种设置所暴露的问题.Apache中有个自带的,名为ab的程序,可以对Apache或其它类型的服务器进行网 ... 
- Java NIO框架Netty demo
			Netty是什么 Netty是一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty 是一个基于NI ... 
- SRM 207 Div II Level Two: RegularSeason,字符串操作(sstream),多关键字排序(操作符重载)
			题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=2866&rd=5853 主要是要对字符串的操作要熟悉,熟 ... 
- GNU Make----Core Automatic Variables
			$@ 表示规则的目标文件名.如果目标是一个文档文件(Linux中,一般称.a 文件为 文档文件,也称为静态库文件),那么它代表这个文档的文件名.在多目标模式 规则中,它代表的是哪个触发规则被执行的目标 ... 
