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游戏的库.了解了两天再参考了一些资料就开始写贪吃蛇这个小游戏. 毕竟最开始的练手 ...
随机推荐
- jquery禁用右键、文本选择功能、刷新
//禁用右键.文本选择功能.刷新 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“select ...
- 对MMU段式转换的理解
本文将详细介绍MMU段式转换的过程,并在文末附上一篇讲MMU比较详细的文章.具体什么是MMU,什么时段是转换就不在本文讲了,直接戳文末的链接. 首先,进行段式转换的条件.我们要拥有一个虚拟地址,还有一 ...
- bzoj 2330 [SCOI2011]糖果(差分约束系统)
2330: [SCOI2011]糖果 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3574 Solved: 1077[Submit][Status ...
- 值得关注的 10 个 Python 英文博客
英文原文:http://pythontips.com/2013/07/31/10-python-blogs-worth-following/ 中文翻译参考: http://python.jobbole ...
- 存储的一些基本概念(HBA,LUN)
有些新手总是在各式各样的概念里绕来绕去,弄的不亦乐乎.所以我就把我的一些理解写了下来,供您参考.我说的不局限于任何一种具体产品和厂家,也可能有些说法和某些厂家的说法不一样,但是我觉得应该算的上是本原的 ...
- erlang mnesia数据库设置主键自增
Mnesia是erlang/otp自带的分布式数据库管理系统.mnesia配合erlang的实现近乎理想,但在实际使用当中差强人意,总会有一些不足.mnesia数据表没有主键自增的功能,但在mnesi ...
- [HDU 2049] 不容易系列之(4)——考新郎 (错排问题)
不容易系列之(4)——考新郎 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2049 题目大意: 有N对新婚夫妇,其中所有的新娘站成一列,都盖上了红布. ...
- solr ,hadoop ,lucene,nutch 的关系和区别
apache lucene是apache下一个著名的开源搜索引擎内核,基于Java技术,处理索引,拼写检查,点击高亮和其他分析,分词等技术. nutch和solr原来都是lucene下的子项目.但后来 ...
- Lucene 4.x实践1
在Lucene 3.x时代,<Lucene In Action>是一本相当不错的参考书,书中详细介绍了Lucene各种高级使用技术,对于开发者来说非常实用.但是近期Lucene升级到了4. ...
- android 自定义Toast显示风格
1.创建一个自己想要显示Toast风格的XML如下代码(toast_xml.xml): <?xml version="1.0" encoding="utf-8&qu ...