`
JustOneCoder
  • 浏览: 60069 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

JavaScript实现贪吃蛇

 
阅读更多

这个 很简单 没有添加 边界判断和首尾相连判断


<!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>
  <title> new document </title>
    <script type="text/javascript">
    <!--
	function ab2(){
	  var x=new Array();
	  x[0]=34;
	  x.push(45); //尾端添加
	  x.unshift(99);  //头部添加
	  //x.pop();    //尾部删除
	 // x.shift();	//头部删除
	 x.sort();
	  alert(x);
	}
	//定义对象
	function ab3(){
	     var ob={x:3,y:6};
	     alert(ob.x);
	}
	var sks=new Array();
	//var sk1={x:60,y:90};
	//var sk2={x:80,y:90};
	var sk3={x:100,y:90};
	//sks[2]=sk1;
	//sks[1]=sk2;
	sks[0]=sk3;
	var d=3;//右
	var newHead;//新蛇头
	var ax;var ay;
	function ab(){
	    clear();
	    paint();
	    changeHead();
	    eat();
	}
	//画蛇
	function paint(){
	     for(var i=0;i<sks.length;i++){
	    var sk=document.createElement("<div id='k"+i+"'style='background-color:red;width:20px;height:20px;position:absolute;top:"+sks[i].y+"px;left:"+sks[i].x+"px'></div>");
	    document.body.appendChild(sk);
	    }
	}
	//删除蛇
	function clear(){
	     for(var i=0;i<sks.length;i++){
	       var k=document.getElementById("k"+i);
	       if(k){
	        document.body.removeChild(k);
	       }
	     }
	}
	//创建苹果
	 function createApple(){
	     ax=Math.floor(Math.random()*500);
	     ay=Math.floor(Math.random()*500);
	    var sk=document.createElement("<div id='ap'  style='background-color:#339900;width:20px;height:10px;position:absolute;top:"+ay+"px;left:"+ax+"px'></div>");
	    document.body.appendChild(sk);
	 }
	 //吃掉
	 function eat(){
	    if(newHead.x<ax&&newHead.x>ax-20&&newHead.y<ay&&newHead.y>ay-20){
	       var ap=document.getElementById("ap");
	       document.body.removeChild(ap);
	       sks.unshift(newHead);
	       createApple();
	    }  else{
	     sks.unshift(newHead);
	     sks.pop();
	    }
	 }

	//按键

	function change(){
	  var key=event.keyCode;
	  switch(key){
	    case 37:
	      d=1;
	      break;
	    case 38:
	      d=2;
	      break;
	    case 39:
	      d=3;
	      break;
	    case 40:
	      d=4;
	      break;
	  }
	}
     //新蛇头
     function changeHead(){
         var head=sks[0];
	 var hx=head.x;
	 var hy=head.y;
         switch(d){
	   case 1 :
	     hx=hx-5;
	     break;
	   case 2 :
	     hy=hy-5;
	     break;
	   case 3 :
	     hx=hx+5;
	     break;
	   case 4 :
	     hy=hy+5;
	     break;
	 }
	 newHead={x:hx,y:hy};
     }
	function start(){
	 window.setInterval("ab()",50);
	 createApple();
	}
	document.onkeydown=change;
    //-->
    </script>
 </head>

 <body onload="start()">

 </body>
</html>


分享到:
评论

相关推荐

    【JavaScript源代码】javascript实现贪吃蛇小游戏思路.docx

    javascript实现贪吃蛇小游戏思路  javascript小游戏贪吃蛇实现思路讲解(完整代码实现),供大家参考,具体内容如下 效果流程 1、首先我们要操作的canvas &lt;!doctype ...

    JavaScript实现贪吃蛇.zip

    JavaScript实现贪吃蛇.zip

    原生JavaScript实现贪吃蛇小游戏.zip

    原生JavaScript实现贪吃蛇小游戏.zip

    javascript实现贪吃蛇游戏

    用 Javascript 编程和其他语言的一个大的区别就是键盘的控制代码不同。js是通过 Key=event.keyCode 语句获取键盘码,再在多分支 switch 结构里分别处理。看完这些代码就会对浏览器里的键盘控制有所了解了。 当然...

    Javascript实现贪吃蛇游戏

    JS实现贪吃蛇游戏在浏览器玩起来!!!

    javascript 实现贪吃蛇

    javascript 实现的贪吃蛇 .

    基于JavaScript实现贪吃蛇游戏

    本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 1.结构 创建一个盒子box作为蛇的身体,当前盒子中只有一个子元素,代表此时蛇的长度为1. 在创建一个盒子food作为贪吃蛇的食物。...

    Javascript + canvas 实现贪吃蛇小游戏

    html5+javascript 实现贪吃蛇小游戏 实现功能升级 闯关升级

    前端领域:html+css+javascript实现贪吃蛇游戏

    JavaScript是一种高级编程语言,用于在网页上实现交互和动态性。它是一种面向对象的语言,具有类似于C语言的语法和功能。 JavaScript最初是为了在网页上添加简单的交互功能而创建的,但随着时间的推移,它已经发展...

    纯JS代码实现的贪吃蛇小游戏

    纯JS实现的贪吃蛇小游戏,很好很强大,欢迎下载

    原生JavaScript实现贪吃蛇游戏

    本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 1.HTML部分,东西很少 &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;meta name=...

    Javascript实现贪吃蛇小游戏(含详细注释)

    本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;...

    用JavaScript实现贪吃蛇游戏

    主要为大家详细介绍了用JavaScript实现贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    【JavaScript源代码】JavaScript贪吃蛇的实现代码.docx

     本文实例为大家分享了JavaScript实现贪吃蛇的具体代码,供大家参考,具体内容如下 首先我们要确定贪吃蛇应有的功能 1.通过键盘的上下左右控制蛇的移动方向 2.边界判定,即蛇头超出边界则游戏结束 3.碰撞判定,...

    使用JavaScript实现贪吃蛇游戏

    本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 index.html代码如下 &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;meta name=...

    如何基于javascript实现贪吃蛇游戏

    这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: &lt;div class=btn&gt; &lt;!-- 开始按钮 --&gt;...

    javascript实现贪吃蛇游戏(娱乐版)

    主要为大家详细介绍了javascript实现贪吃蛇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Global site tag (gtag.js) - Google Analytics