记得以前刚出来工作的时候,什么都不懂。
老板让用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练手之-贪吃蛇的更多相关文章

  1. jQuery练手:仿新浪微博图片文字列表淡进淡出上下滚动效果

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...

  2. 初级练手项目——用Python一步一步实现“智能”贪吃蛇!

    贪吃蛇作为一款经典的小游戏,想必大家一定并不陌生,今天我们就来用Python来设计与实现贪吃蛇游戏,回味一下童年的快乐.快跟着小编来看看吧! ​ 基本环境配置 ●版本:Python3 ●系统:Wind ...

  3. jQuery贪吃蛇--jQuery学习

    我用JQuery有一段时间了,越来越体会到其强大之处,于是自己尝试写了一个贪吃蛇小游戏,拿来与网友分享一下. 1. 了解JQuery.Timers 除用到了jQuery1.5.1之外,我还用到了jQu ...

  4. 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏

    回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...

  5. 贪吃蛇的java代码分析(二)

    代码剖析 贪吃蛇是一款十分经典的小游戏,对初入coding的朋友来说,拿贪吃蛇这样一个案例来练手十分合适,并不高的难度和成功后的成就感都是学习所必须的.下面我将依照我当时的思路,来逐步分析实现的整个过 ...

  6. pygame写贪吃蛇

    python小白尝试写游戏.. 学了点pygame不知道那什么练手好,先拿贪吃蛇开刀吧. 一个游戏可以粗略的分为两个部分: 数据(变量) 处理数据(函数,方法) 设计变量 首先预想下,画面的那些部分需 ...

  7. 用Python写一个贪吃蛇

    最近在学Python,想做点什么来练练手,命令行的贪吃蛇一般是C的练手项目,但是一时之间找不到别的,就先做个贪吃蛇来练练简单的语法. 由于Python监听键盘很麻烦,没有C语言的kbhit(),所以这 ...

  8. Python写的贪吃蛇游戏例子

    第一次用Python写这种比较实用且好玩的东西,权当练手吧 游戏说明: * P键控制“暂停/开始”* 方向键控制贪吃蛇的方向 源代码如下: 复制代码代码如下: from Tkinter import ...

  9. 用python+pygame写贪吃蛇小游戏

    因为python语法简单好上手,前两天在想能不能用python写个小游戏出来,就上网搜了一下发现了pygame这个写2D游戏的库.了解了两天再参考了一些资料就开始写贪吃蛇这个小游戏. 毕竟最开始的练手 ...

随机推荐

  1. 安装配置MongoDB

    1.下载mongodb https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.8.tgz 2.解压 tar zxf mongodb-lin ...

  2. Shader Forge 刀光溶解

    实际特效时,时间可以控制vertex color.a,shader forge 还只是玩具,试验用具,离商业产品质量还有差距. 其实,有技术美术的画,很多问题,美术能自己解决,都是一些欠缺通道的问题, ...

  3. 【每日一linux命令8】添加新的工作组(groupadd)

    groupadd (字意add group)增加一个新的工作组. 语法:groupadd 选项 用户组名 选项: -g 指定新建工作组的ID -r 创建系统工作组,系统工作组的ID小于500 -k 覆 ...

  4. HTML5 骨架

    html: <!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML5 骨架&l ...

  5. 面向新手的Webserver搭建(一)——IIS的搭建

    非常多童鞋说自己是做移动开发的,想挂个简单的Web API,但是server又不会搭,这样一来測试就成了问题.看看网上的教程.发现略难懂,并且大多是一个转一个,没价值,所以干脆写几篇文章讲讲简单的We ...

  6. Android抓包工具Fiddler抓取数据

    1.手机端设置 2.Fiddler设置监听 Tools/Fiddler options 是否允许监听到https(Fiddler默认只抓取http格式的),首次点击会弹出是否信任fiddler证书和安 ...

  7. win7 32/64bit VS2010 OpenCV 2.4.9 环境配置

    作者 : 卿笃军 因为近期人脸识别须要用到OpenCV,让我開始了OpenCV学习. OpenCV 2.4.9下载地址:http://sourceforge.net/projects/opencvli ...

  8. 如何判断MSSQL数据库磁盘出现了瓶颈

    问大神石沫:如何判断MSSQL数据库磁盘出现了瓶颈? 石沫(A1):您好,您的问题非常好,SQL SERVER提供了很多关于I/O压力的性能计数器,请选择性能计算器PhysicalDisk(Logic ...

  9. Swift: 下标(Subscripts)

    类.结构体.枚举都可以定义下标(subscript),下标是访问集合.列表.序列的元素的快捷方式. 在Swift中可以为类型定义下标,而且不限于一维. 语法 下标定义的方法:跟实例方法的语法类似,su ...

  10. Linux 下Mysql自动备份脚本

    backdb.sh 文件 #!/bin/bash USER="root" PASSWORD="888888" DATABASE="mydb" ...