素材网 素材网

jquery仿手柄游戏机贪吃蛇游戏

下载资源()次

阅读次数()次

发布时间:2015-08-04

jquery仿手柄游戏机贪吃蛇游戏
分享到:

用法简介:

来源:xw素材网

jquery仿手柄游戏机贪吃蛇游戏。
文件引用:

<script>
var size = 50; 						//默认地图大小 
var snake = []; 					//这个是我们的小蛇
var x=0,y=1;
var mask = true; 					//优化按键  用于判断
var timmer; 						//定时器
var speed = 50; 					//小蛇速度
var eatself = false; 				//判断是否吃了自己
var pos; 							//食物坐标
//相关事件
$(function(){
	init(size);
	draw();
	food();
});
$("button").one('click',function(){
	move();
});
//键盘事件
$(document).keydown(function(e){
	switch(e.keyCode){
		case 37:
			if(y != 1 && mask){
				//左
				x = 0 , y = -1;
				mask = false;
			}
			break;
		case 38:
			if(x != 1 && mask){
				//上
				x = -1 , y = 0;
				mask = false;
			}
			break;
		case 39:
			if(y != -1 && mask){
				//右
				x = 0 , y = 1;
				mask = false;
			}
			break;
		case 40:
			if(x != -1 && mask){
				//下
				x = 1 , y = 0;
				mask = false;
			}
			break;
	}
});
//画地图
function init(size){
	var arr = [];
	arr.push('<table>');
	for(var i=0;i<size;i++){
		arr.push('<tr>');
			for(var j=0;j<size;j++){
				arr.push('<td id="box_'+i+'_'+j+'"></td>');
			}
		arr.push('</tr>');
	}
	arr.push('</table>');
	//将上面的数组拼接成字符串添加到地图区域
	$("#map").html(arr.join(''));
	//初始化小蛇
	for(var k=0;k<3;k++){
		snake[snake.length] = [3,k+3]; 
	}
}
function draw(){
	//清除掉所有的颜色
	$("td").removeClass('snake');
	//给小蛇上色
	for(var i=0;i<snake.length;i++){
		$("#box_"+snake[i][0]+"_"+snake[i][1]).addClass('snake');
	}
}
//移动小蛇
function move(){
	timmer = setInterval(function(){
		//小蛇即将到达的位置
		var row = snake[snake.length-1][0] + x;
		var col = snake[snake.length-1][1] + y;
		if(pos[0] == row && pos[1] == col){
			//如果吃屎了,那么不弹出
			$("#box_"+row+"_"+col).removeClass('food');
			food();
		}else{
			//没有吃食物才弹出第一个
			snake.shift();
		}
		//判断是否吃了自己   eatself = true
		for(var i in snake){
			if(snake[i][0] == row && snake[i][1] == col){
				//吃了自己
				eatself = true;
			}
		}
		//判断小蛇是否还在地图里面
		if(col < 0 || col >=size || row < 0 || row >=size || eatself){
			alert('亲!你为啥想不开呢?');
			clearInterval(timmer);
		}else{
			snake.push([row,col]);
			draw();
			mask = true;
		}
	},speed);
}
//随机产生食物
function food(){
	var x = Math.floor(Math.random() * size);
	var y = Math.floor(Math.random() * size);
	//食物不能出现在蛇身上
	for(var i in snake){
		if(snake[i][0] == x && snake[i][1] == y){
			var mask = true;
		}
	}
	if(mask){
		food();
	}else{
		pos = [x,y];
		$("#box_"+x+"_"+y).addClass('food');
	}
}
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。