你的位置:首页 > Java教程

[Java教程]JS的小游戏贪吃蛇


贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识:

  1,JS函数的熟练掌握,

  2,JS数组的应用,

  3,JS小部分AJAX的学习

  4,JS中的splice、shift等一些函数的应用,

基本上就这些吧,下面提重点部分:

  前端的页面,这里可自行布局,我这边提供一个我自己的布局:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html 

 这里是css代码:

*{padding: 0px; margin: 0px;font-size: 12px}body{background: #ccc}input.button{	width: 60px;	cursor: pointer;}#info{	width: 540px;	height: 30px;	margin: 30px auto 5px;	line-height: 30px;}#score{	width: 73px;	height: 28px;	padding-left: 64px;	background: url(./images/score.png) no-repeat;	float: left;	font-size: 14px;	font-weight: 700;	font-style:italic;	font-family: '微软雅黑';}#form{	float: right;}#form input{	vertical-align: middle;	margin-right: 5px;}#main{	width: 540px;	height: 500px;	margin: 0 auto;	position: relative;	/*background: #71a000*/}#main div{	width: 20px;	height: 20px;	position: absolute;}#main #home{	width: 500px;	height: 460px;	left: 20px;	top: 20px;	position: relative;	background: url(./images/background.jpg) no-repeat;}#main #home div{	position: absolute;}#main div.wall{	width: 540px;	height: 20px;	background: url("./images/div.jpg") repeat-x;	position: absolute;}#main div.top{	left:0px;	top:0px;}#main div.bottom{	left:0px;	top:480px;}#main div.left{	width: 20px;	height: 500px;	background: url(./images/div.jpg) repeat-y;	left:0px;	top:0px;}#main div.right{	width: 20px;	height: 500px;	background: url(./images/div.jpg) repeat-y;	left:520px;	top:0px;}.l{	-moz-transform:rotate(0deg);   	-o-transform:rotate(0deg);	-webkit-transform:rotate(0deg);	transform:rotate(0deg);	/* IE8+ - must be on one line, unfortunately */  	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";   	/* IE6 and 7 */  	filter: progid:DXImageTransform.Microsoft.Matrix(      M11=1,      M12=0,      M21=0,      M22=1,      SizingMethod='auto expand');}.t{	-moz-transform:  rotate(90deg);   -o-transform:   rotate(90deg);   -webkit-transform: rotate(90deg);   transform:     rotate(90deg);	/* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1.8369701987210297e-16, M12=-1, M21=1, M22=-1.8369701987210297e-16, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=-1.8369701987210297e-16,      M12=-1,      M21=1,      M22=-1.8369701987210297e-16,      SizingMethod='auto expand');}.r{	-moz-transform:  rotate(180deg);   -o-transform:   rotate(180deg);   -webkit-transform: rotate(180deg);   transform:     rotate(180deg);	 /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=-1,      M12=1.2246467991473532e-16,      M21=-1.2246467991473532e-16,      M22=-1,      SizingMethod='auto expand');}.b{	-moz-transform:  rotate(270deg);   -o-transform:   rotate(270deg);   -webkit-transform: rotate(270deg);   transform:     rotate(270deg);	/* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=6.123233995736766e-17,      M12=1,      M21=-1,      M22=6.123233995736766e-17,      SizingMethod='auto expand');	}

JS公共文件

var home = $('#home');	var snakeArr = []; 	var direcation = 'l';	var speed = 0;	var timer = '';	//460/20	var rows = 23;	var cols = 25;	var die = false;			//用于判断是否game over	var food = [];	var sorce = 0;				//得分的显示

 

首先要想有snake就必须创造snake,

for( var i=0; i<4; i++ ){		//var snakeDiv = document.createElement("div");		//snakeDiv.style = 'background:url(./images/snake' + i + '.png) no-repeat;';		var snakeDiv = $('<div ></div>');		home.append(snakeDiv);		snakeArr[i] = {r : 10, c : 10 + i, div : snakeDiv, d : direcation};		setPosition(snakeArr[i]);		}

 有snake之后,自然就是移动了(move):

function move(){		var timer = setInterval(function(){		for( var i=snakeArr.length -1; i>0; i-- ){			snakeArr[i].c = snakeArr[i-1].c;			snakeArr[i].r = snakeArr[i-1].r;			snakeArr[i].d = snakeArr[i-1].d;			}			switch(direcation){			case 'l' :				snakeArr[0].c--;				snakeArr[0].d = 'l';				break;			case 'r' :				snakeArr[0].c++;				snakeArr[0].d = 'r';				break;			case 't' :				snakeArr[0].r--;				snakeArr[0].d = 't';				break;			case 'b' :				snakeArr[0].r++;				snakeArr[0].d = 'b';				break;		}		//snake的方向控制		$(window).keydown(function(event){			switch(event.keyCode){				case 37 :					direcation = 'l';					break;				case 38 :					direcation = 't';					break;				case 39 :					direcation = 'r';					break;				case 40 :					direcation = 'b';					break;			}		});			//snake事故			//1. snake撞墙			if( snakeArr[0].c < 0 || snakeArr[0].r < 0 || snakeArr[0].c >= cols || snakeArr[0].r >= rows ){					clearInterval(timer);					die = true;					alert('GAME OVER');			}			//2. snake撞到自己			for( var i=1; i<snakeArr.length; i++ ){				if( snakeArr[0].c == snakeArr[i].c && snakeArr[0].r == snakeArr[i].r ){					 clearInterval(timer);					 die = true;					 alert('GAME OVER');				}			}			//snake吃水果			if( snakeArr[0].c == food[0].c && snakeArr[0].r == food[0].r ){				food[0].div.css({background : 'url(./images/snake2.png) no-repeat'});				snakeArr.splice(snakeArr.length - 1, 0, food[0]);				food.shift();				sorce += 10;				$('#score').html(sorce);			}			//snake产生水果			if( food.length == 0 ){				createFood();				}			for(var i = 0; i < snakeArr.length; i++){				setPosition(snakeArr[i]);			}		},speed);}

 食物的产生:

function createFood(){		var r = parseInt(rows * Math.random());		var c = parseInt(cols * Math.random());		var casrsh = false;				//2个水果出现的位置不能一样		while( food.length == 0 ){			//判断snake的位置,不能与snake相撞			for( var i = 0; i < snakeArr.length; i++ ){				if( r == snakeArr[i].r && c == snakeArr[i].c ){					casrsh = true;				}			}			//当位置不重叠的时候,产生水果			if( !casrsh ){				var i = parseInt(4 * Math.random());				var foodDiv = $('<div ></div>');				home.append(foodDiv);				food.push({r : r, c : c, div : foodDiv});				setPosition(food[0]);			}		}			}	

 还有一个重要的功能就是重新设置定位:

function setPosition(obj){		obj.div.css({left : obj.c * 20, top : obj.r * 20}); 		obj.div.removeClass().addClass(obj.d);	} 	createFood();  //那页面一被加载出来就显示出食物!  

关于一些细节的东西,明天在更新了!