`
cjq_106
  • 浏览: 773 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jquery贪吃蛇

jquery 
阅读更多
小弟菜鸟不才，上班无聊写贪吃蛇游戏。未完成，就要放假了。先共享下！写得不好，欢迎牛人指导！小弟第一次发帖，大家别喷我？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>
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery贪吃蛇

    【jQuery贪吃蛇】是一款基于JavaScript库jQuery实现的趣味小游戏，它通过HTML和CSS构建了游戏界面，并利用jQuery处理用户输入和游戏逻辑。这个小游戏深受技术爱好者和初学者喜爱，因为它既展示了jQuery的基本用法，...

    jQuery贪吃蛇小游戏.zip

    【jQuery贪吃蛇小游戏】是一款基于JavaScript库jQuery开发的网页版贪吃蛇游戏。它将经典的游戏体验融入到网页环境中，让玩家通过键盘方向键控制蛇的移动，享受捕食和生存的挑战。这款小游戏展示了jQuery在交互设计和...

    jQuery贪吃蛇小游戏代码

    【jQuery贪吃蛇小游戏代码】是一款基于JavaScript库jQuery开发的网页版游戏，它不仅具有基本的贪吃蛇游戏玩法，还增加了得分排行榜和精美的界面设计，为玩家提供了丰富的交互体验。这款小游戏展示了jQuery在创建动态...

    jQuery贪吃蛇网页版游戏代码.zip

    【jQuery贪吃蛇网页版游戏代码】是一款基于流行的JavaScript库jQuery实现的在线贪吃蛇游戏。这款游戏将经典的街机游戏贪吃蛇移植到了网页环境中，为用户提供了在浏览器上玩耍的便捷体验。jQuery库以其简洁的API和...

    jQuery贪吃蛇网页版游戏代码

    jQuery贪吃蛇网页版游戏代码,贪吃蛇网页版游戏代码基于jquery.1.11.3.min.js制作，贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本，既简单又耐玩.Query网页版贪吃蛇游戏，带得分排行榜，交互的贪吃蛇游戏...

    jquery 贪吃蛇 源码

    【标题】"jQuery 贪吃蛇 源码"是一个基于jQuery库开发的轻量级小游戏，展示了JavaScript和jQuery在实现互动娱乐应用中的潜力。这个项目是作者首次尝试编程游戏，通过它我们可以深入理解jQuery的基本操作以及如何利用...

    jQuery贪吃蛇实现

    在这个"jQuery贪吃蛇实现"的项目中，我们将看到如何仅借助jQuery和HTML的基本元素来构建这个游戏。 首先，我们需要理解贪吃蛇游戏的基本原理。游戏的核心是通过控制一个由多个单元格组成的蛇，使其在指定区域内移动...

    jQuery 贪吃蛇网页游戏完整版

    通过分析和研究这个jQuery贪吃蛇游戏，不仅可以掌握jQuery的核心技术，还能了解到游戏开发的基本思路和技巧，对于提升JavaScript编程能力和网页互动设计能力具有很大的帮助。同时，这也是一个很好的实践项目，可以...

    jQuery贪吃蛇大战小游戏源码.zip

    【jQuery贪吃蛇大战小游戏源码.zip】是一个包含jQuery实现的贪吃蛇游戏的源代码包，适合开发者或编程爱好者学习和二次开发。这个小游戏基于经典的贪吃蛇玩法，利用了jQuery库的强大功能来实现页面交互和动画效果，...

    jQuery贪吃蛇小游戏代码.zip

    **jQuery贪吃蛇小游戏代码.zip**是一个包含HTML5技术实现的贪吃蛇游戏源代码的压缩包。这个项目旨在提供一个简单而有趣的互动体验，同时为开发者提供学习和实践JavaScript，尤其是jQuery库的机会。以下是对这个项目...

    jquery贪吃蛇游戏特效代码.zip

    【jQuery贪吃蛇游戏特效代码】是一个基于JavaScript库jQuery实现的简单而有趣的游戏项目，它展示了如何用编程技术实现经典游戏“贪吃蛇”的动画效果。在这个代码资源中，开发者可以学习到如何利用jQuery的事件处理、...

    javascript基于jQuery贪吃蛇

    javascript基于jquery写的贪吃蛇 没写死亡的那部分 仅供新手学习 操作方向键上下左右

    基于 jquery 的 html 贪吃蛇 简单实现

    【标题】基于jQuery的HTML贪吃蛇简单实现 在网页游戏中，贪吃蛇是一款非常经典且受欢迎的小游戏，它的核心机制是通过用户操作控制蛇移动，吃食物后蛇身增长，碰到边界或自身则游戏结束。这个项目是利用jQuery库，...

    jquery贪吃蛇小游戏.rar

    《jQuery实现的贪吃蛇小游戏详解》 在IT领域，JavaScript和jQuery库是网页开发中的重要工具，它们为创建交互式用户体验提供了强大的支持。本文将深入探讨如何利用jQuery技术实现一个经典的“贪吃蛇”小游戏，以此来...

    jquery版贪吃蛇

    【jQuery版贪吃蛇】是一种基于JavaScript库jQuery实现的经典游戏——贪吃蛇。这个项目适合初学者学习，虽然它的界面可能并不美观，但它提供了一个很好的起点来了解如何使用JavaScript和jQuery来创建交互式游戏。 ...

    jQuery写的贪吃蛇

    【jQuery写的贪吃蛇】项目是一个使用JavaScript库jQuery实现的经典游戏——贪吃蛇。这个项目展示了如何利用jQuery的事件处理、DOM操作以及动画效果来构建一个互动性游戏。以下是关于这个项目的详细知识点： 1. **...

    jquery实现贪吃蛇小游戏

    （写的思维混乱，只是想留个纪念，有时间重新写一遍）

Magicbox
Global site tag (gtag.js) - Google Analytics