练习小游戏简化版贪吃蛇

<!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;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("游戏已经结束~~~，再来一局吧！");
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>

转载于:https://www.cnblogs.com/wh1109/p/10073309.html

练习小游戏简化版贪吃蛇相关推荐

cocos creator开发微信小游戏(五)贪吃蛇大作战
目录小游戏介绍小游戏cocos creator场景图小游戏部分JS代码开发中碰到的问题工程及说明小游戏介绍贪吃蛇小游戏:贪吃蛇试玩(首次加载比较慢),类似贪吃蛇大作战的小游戏.当玩家的蛇 ...
基于RT-Thread实现的小游戏（贪吃蛇、俄罗斯方块）
前言:本实现基于stm32芯片,移植RT_Thread Nano系统源码,实现两个小游戏(贪吃蛇/俄罗斯方块).本实验提供完整的IAR工程源码并且有很多注释,是一个不错的参考例程.关键知识点:OLED ...
贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作
贪吃蛇是以前我们经常在手机里玩的一个小游戏,现在要是把它搬到网页上也会让人更回味.这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏.在游戏中你可以使用键盘的上下左右来控制蛇的运动方向.现在要列出的是 ...
超级详细的注释C语言简单实现童年小游戏：贪吃蛇
引言: 记得小时候还没有现在超级高端的智能手机,当时的诺基亚类型的老人机是我的最爱,而里面的贪吃蛇小游戏我总是能玩很久,所以今天就用C语言简单实现一下贪吃蛇这一个小游戏吧. 一. 准备工作: 1.VS ...
Scratch图形化编程之简单小游戏（贪吃蛇）
目录一.前言介绍二.对象及其背景三.面向对象的模块程序 3.1 贪吃蛇头 3.2 贪吃蛇身 3.3 Apple 四.成果展示一.前言介绍运用Scratch图像编程化编程,制作了一个能够通过按 ...
Python小游戏：贪吃蛇——turtle的使用
突然想把去年写的小游戏练习整合一下,写一个简单的教学文章吧. 该篇主要讲解利用python中turtle包制作小游戏,不涉及pygame的使用,仅用pycharm就可实现 0.理清游戏思路要实现的效 ...
C语言小游戏之贪吃蛇
还记得非常久曾经听群里人说做贪吃蛇什么的,那时候大一刚学了C语言,认为非常难,根本没什么思路. 前不久群里有些人又在谈论C语言贪吃蛇的事了,看着他们在做,我也打算做一个出来. 如今大三,经过了这一年半 ...
JavaScript+ Canvas开发趣味小游戏《贪吃蛇》
一.效果展示二.<贪吃蛇>基本实现思路蛇头部分+蛇身体部分:采用对象形式来存储坐标,并将每个坐标对象放到一个snake数组中,方便使用.设置每个方格宽度30px,高度30px,画布高度 ...
python写的贪吃蛇小游戏_Python贪吃蛇小游戏
贪吃蛇 1. 导入游戏库 # 1.导入库 import pgzrun import random 2.游戏初始化 # 2.初始化 # 窗口大小 WIDTH = 600 HEIGHT = 480 # 贪 ...
C#简单小游戏之贪吃蛇
贪吃蛇的创建 1:声明地图通过声明一个40x40的地图把边界都表示为墙为55 private int[,] Map = new int[40, 40];//地图我把0作为当前位置为空,可以行 ...

练习小游戏简化版贪吃蛇

练习小游戏简化版贪吃蛇相关推荐

最新文章

热门文章

练习小游戏 简化版贪吃蛇

练习小游戏 简化版贪吃蛇相关推荐

最新文章

热门文章

练习小游戏简化版贪吃蛇

练习小游戏简化版贪吃蛇相关推荐