jquery贪吃蛇

最新推荐文章于 2022-07-21 20:37:31 发布

iteye_1075

最新推荐文章于 2022-07-21 20:37:31 发布

阅读量99

点赞数

分类专栏： jquery贪吃蛇文章标签： jquery ViewUI

jquery贪吃蛇专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小弟菜鸟不才，上班无聊写贪吃蛇游戏。未完成，就要放假了。先共享下！写得不好，欢迎牛人指导！小弟第一次发帖，大家别喷我？3Q！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>贪吃蛇</title>
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>
<style>
body{padding:0; margin:0;} 
.header{margin:0 auto;width:auto;height:30px;text-align:center;}
.center{width:900px;height:450px;border:1px solid red;margin:0 auto}
.gun{width:10px;height:10px;border:1px solid #595959;BACKGROUND-COLOR:#EFF6FF;position:absolute;z-index:1;}
.gun_div{width:10px;height:10px;border:1px solid #595959;BACKGROUND-COLOR:red;position:absolute;z-index:1;}
.gund{width:10px;height:10px;border:1px solid #595959;BACKGROUND-COLOR:yellow;position:absolute;z-index:1;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
	var su=10;
	var div_height=$('div.center').height();
	var div_width=$('div.center').width();
	var shang=$('div.center').offset().top+10;
	var xia=$('div.center').offset().top+div_height-10;
	var zuo=$('div.center').offset().left+10;
	var you=$('div.center').offset().left+div_width-10;
	var first_top=$('#first').offset().top;
	var first_left=$('#first').offset().left;
	var level=2;//确定障碍物的数量
	var flag;
	var d=[];
  var count=0;
  var cn=50;
	//createObstacle();
	createDiv();
	$('#start').click(function(){
		if(typeof flag=='undefined'){
		  flag=self.setInterval($move,300);
		  $(document).bind('keydown', function() {
         code=event.keyCode;
         $('#first').data('code',code);
		     move($('#first'),code);
     });
    }else{return;}
		});
		$('#end').click(function(){
			window.clearInterval(flag);
			flag=undefined;
		  $(document).unbind('keydown');
		});
		$('#restart').click(function(){
		  $('div.gun').each(function(){
			if($(this).attr("id")=='first')
				$(this).css({top:shang-10,left:zuo-10});
					else
					$(this).remove();
				});
		   $('#first').data('code',39);
			index=0;
		});
		//$(document).keyup(function(event){
		//});
	  //$(document).keypress(function(event){
		 //code=event.keyCode;
		 //if(code==13)  $('#start').click();
		 //if(code==32)  $('#end').click();
		//move($('#first'),code);
   //});
function $move(){
	  var code=typeof $('#first').data('code')=='undefined'?39:$('#first').data('code');
	  move($('#first'), code);
	}
function move(object,code){
	    first_top=$('#first').offset().top;
	    first_left=$('#first').offset().left;
	  	switch(code) {
	   		 case 37:  var _left=object.offset().left>zuo?object.offset().left-su:object.offset().left+div_width-10;
	   		           object.css({top:object.offset().top,left:_left});
	   		           moveDiv(object,code);
	   		 break
	   		 case 38: var _top=object.offset().top>shang?object.offset().top-su:object.offset().top+div_height-10;
	   		            object.css({top:_top,left:object.offset().left});
	   		             moveDiv(object,code);
			   break
			   case 39: var _left=object.offset().left<you?object.offset().left+su:object.offset().left-div_width+10;
	   		           object.css({top:object.offset().top,left:_left});
	   		            moveDiv(object,code);
			   break
			   case 40:  var _top=object.offset().top<xia?object.offset().top+su:object.offset().top-div_height+10;
			             object.css({top:_top,left:object.offset().left});
			             moveDiv(object,code);
			   break
			   default:break
        }
	}

	var index=0;
//每次移动后，需要判断div之间的相对位移，如果相交则移除，在first后面增加div，吧id=div的div移除
function moveDiv(o,c){
	       var $div=$('#div');
	       var ma=math(o,$div);
	       if(index>0){
	       	if($('#div_0').offset().top==o.offset().top&&o.offset().left==$('#div_0').offset().left){
	       	    gameover('GAMEOVER!不能走回头路!!!');
	          }
	          if(index>3){
	          	  for(var i=2;i<index;i++){
	          	  	var mma=math(o,$('#div_'+i));
		          	  	 if(mma<10){
		          	  	 	 gameover('GAMEOVER!动车追尾了!!!');
	          	  	  }
	          	  	}
	          	}
	       	}
	       if(Math.sqrt(10*10+10*10)>ma){//蛇吃到食物，就要涨长了
	       	  $div.remove();
	       	    $('#first').after("<div id='div_"+index+"' class='gun'></div>");
	       	    if(index==0){
	       	      $('#div_0').css({top:first_top,left:first_left});
	       	      $('#div_0').data('top',first_top);
	       	      $('#div_0').data('left',first_left);
	       	    }else{
	       	    	var i=index-1;
	       	    	var top=$('#div_'+i).offset().top;
	       	    	var left=$('#div_'+i).offset().left;
	       	    	if(c==37) $('#div_'+index).css({top:top,left:left+10});
	       	    	if(c==38) $('#div_'+index).css({top:top+10,left:left});
	       	    	if(c==39) $('#div_'+index).css({top:top,left:left-10});
	       	    	if(c==40) $('#div_'+index).css({top:top-10,left:left});
	       	    	$('#div_'+index).data('top',top);
	       	      $('#div_'+index).data('left',left);
	       	    	}
	       	    index++;
	       	  createDiv();
	       	}
	       	$('#div_0').data('top',first_top);
	       	$('#div_0').data('left',first_left);
	       	_move(0);

	}
function _move(id){
	 if(typeof $("#div_"+id).attr('id')!='undefined'){
					var $top=$("#div_"+id).offset().top;
					var $left=$("#div_"+id).offset().left;
	 	  $("#div_"+id).css({top:$("#div_"+id).data('top'),left:$("#div_"+id).data('left')});
	 	   i=id+1;
	 	  if(typeof $("#div_"+i).attr('id')!='undefined'){
	 	  	   $('#div_'+i).data('top',$top);
	       	 $('#div_'+i).data('left',$left);
	 	  		  return _move(i);
	 	  	}else{
	 	  		return;
	 	  		}
	 	}else{
	 		return;
	 		}
	}
	//随机产生div
function createDiv(){
	    var cDiv_top=fRandomBy(shang,xia);
	    var cDiv_left=fRandomBy(zuo,you);
	    $("<div id='div' class='gun_div'></div>").appendTo("body");
	    $('#div').css({top:cDiv_top,left:cDiv_left});
	}
//计算量div的相对位移
function math(o1,o2){
	   var left=o1.offset().left-o2.offset().left;
	   var top=o1.offset().top-o2.offset().top;
	   var ma=Math.sqrt(left*left+top*top);
	   return ma;
	}
//产生区间之内的随机数
function fRandomBy(under, over){ 
switch(arguments.length){ 
case 1: return parseInt(Math.random()*under+1); 
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0; 
} 
} 
//随机产生障碍物
function createObstacle(){
	     var o_top=fRandomBy(shang,xia);
	     var o_left=fRandomBy(zuo,you);
	     if(count==0){
	     	      d.push({top:o_top,left:o_left});
	     	  	  $("<div id='"+o_top+'-'+o_left+"' class='gund'></div>").appendTo("div.center");
	            $('#'+o_top+'-'+o_left).css({top:o_top,left:o_left});
	     	  	  count++;
	     	  	  return createObstacle();
	     	}
	     for(var i=0;i<d.length;i++){
	     	  var f=obDiv(d[i],o_top,o_left);
	     	  if(f==true&&count<level*cn){
	     	  	  d.push({top:o_top,left:o_left});
	     	  	  $("<div id='"+o_top+'-'+o_left+"' class='gund'></div>").appendTo("div.center");
	            $('#'+o_top+'-'+o_left).css({top:o_top,left:o_left});
	     	  	  count++;
	     	  	  return createObstacle();
	     	  	 }else if(f==false&&count<level*cn){
	     	  	 	return createObstacle();
	     	  	 	}else if(count>=level*cn){
	     	  	 		return;
	     	  	 		}
	     	}
	}
function obDiv(d,top,left){
	  var top=d.top-top;
	  var left=d.left-left;
	  var m=Math.sqrt(left*left+top*top);
	  if(Math.sqrt(10*10+10*10)<m) return true;
	  else return false;
	}
function gameover(msg){
	 window.clearInterval(flag);
	 flag=undefined;
	 $('#end').click();
	 $('div.gun').each(function(){
			if($(this).attr("id")=='first')
				$(this).css({top:shang-10,left:zuo-10});
					else
					$(this).remove();
				});
			index=0;
		alert(msg);
	}
});
</script>
<div class="header"><button id="start">开始</button>
	<button id="end">暂停</button><button id="restart">重新开始</button></div>
<div class="center">
<div id="first" class="gun"></div>
</div>
</body>
</html>

iteye_1075

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery贪吃蛇

小弟菜鸟不才，上班无聊写贪吃蛇游戏。未完成，就要放假了。先共享下！写得不好，欢迎牛人指导！小弟第一次发帖，大家别喷我？3Q！！！[code="java"]贪吃蛇body{padding:0; margin:0;} .header{margin:0 auto;width:auto;height:30px;text-align:center;}.center{wid...
复制链接

扫一扫