MySnake---贪吃蛇---javascript

于 2011-11-18 14:37:53 发布
阅读量749 收藏
点赞数
文章标签： function table border class html 存储
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhibudefeng/article/details/6988409
版权 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>贪吃蛇---止步的风</title>
    <style type="text/css">
        .style1{border-collapse:collapse;}
        td{ width:30px;height:30px; border:solid 1px gray; }
    </style>
</head>
<body>
<table id="table1" class="style1" cellspacing=0>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
    </table>
    
<script type="text/javascript">
	var width=10;
	var height=10;
	
    <!--蛇的默认运行方向为下-->
	var direction="down";	
	
    <!--点的坐标，赋给它一个无名函数-->
	var Point = function(x,y)
	{
		this.x=x;
		this.y=y;
	}
    <!--定义一个点坐标对象-->
	var egg = new Point(1,1);
	
    <!--产生一个随机的egg坐标-->
	var createRandomEgg = function()
	{
		var tempx =Math.random()*width;<!--产生一个随机的x坐标-->
		egg.x=Math.floor(tempx);
		var tempy =Math.random()*height;<!--产生一个随机的y坐标-->
		egg.y=Math.floor(tempy);
	}
	
	
	var snake = new Array();<!--定义一个数组，存储蛇对象-->
	snake[0]=new Point(0,0);
	snake[1]=new Point(1,0);
	snake[2]=new Point(2,0);
	
   <!--下一个蛇头的坐标-->
	var nextPositionOfHead = function()
	{
		switch(direction)
		{
			case "left":
				return new Point(snake[snake.length- 1].x-1,snake[snake.length-1].y);
				break;
			case "right":
				return new Point(snake[snake.length- 1].x+1,snake[snake.length-1].y);
				break;
			case "up":
				return new Point(snake[snake.length- 1].x,snake[snake.length-1].y-1);
				break;
			case "down":
				return new Point(snake[snake.length- 1].x,snake[snake.length-1].y+1);
				break;
			default:
				alert("错误！");
		}
	}
	
     <!--当用户操作正确时，往蛇头插入一个点，此点是之前随机产生的点-->
	var insertEggToHead = function()
	{
		var sp1=document.getElementById("span1");
		snake[snake.length]=new Point(egg.x,egg.y);
		sp1.innerHTML += "(" + snake[i].x + "," + snake[i].y + ")<br>";
	}
	
    <!--move方法，控制蛇的移动-->
	var move = function()
	{
        <!--如果蛇头超出边界，则结束-->
		if(nextPositionOfHead().x > width-1||nextPositionOfHead().y > height-1)
		{
			alert("撞墙啦！");
			clearInterval(a);
			return;
		}
        <!--如果蛇头与随机产生的点重合，则把此点加入蛇头，再创建一个点，并刷新屏幕-->
		if(nextPositionOfHead().x==egg.x && nextPositionOfHead().y==egg.y)
		{
			insertEggToHead();
			createRandomEgg();
			refresh();
			return;
		}
        <!--遍历蛇身，将i+1点的坐标赋值给i点坐标，实现蛇的移动-->
		for(i=0;i<snake.length-1;i++)
		{
			snake[i].x=snake[i+1].x;
			snake[i].y=snake[i+1].y;
		}
        <!--将蛇头下一个点的坐标赋值给现在的蛇头,实现蛇的移动，并刷新屏幕-->
		snake[snake.length-1].x=nextPositionOfHead().x;
		snake[snake.length-1].y=nextPositionOfHead().y;
		refresh();
	}
	
    <!--刷新屏幕-->
	function refresh()
	{
		var tb=document.getElementById("table1");
        <!--遍历table，全部设置为白色-->
		for(var k=0;k<height;k++)
		{
			for(var j=0;j<width;j++)
			{
				tb.rows[k].cells[j].style.cssText="background-color:white;";
			}
		}
        <!--设置新豆的点为红色-->
		tb.rows[egg.y].cells[egg.x].style.cssText="background-color:red;";
        <!--遍历蛇身颜色为蓝色-->
		for(i=0;i<snake.length;i++)
		{
			tb.rows[snake[i].y].cells[snake[i].x].style.cssText="background-color:blue;";
		}
	}
	
    <!--识别键盘输入，设置方向标示direction-->
	function keyDown()
	{
		<!--alert(event.keyCode);-->
		switch(event.keyCode)
		{
			case 37:
				direction="left";
				break;
			case 38:
				direction="up";
				break;
			case 39:
				direction="right";
				break;
			case 40:
				direction="down";
				break;
		}
		/*switch(event.keyCode)
		{
			case 37:
				direction="up";
				break;
			case 38:
				direction="left";
				break;
			case 39:
				direction="down";
				break;
			case 40:
				direction="right";
				break;
		}*/
	}
	
	document.οnkeydοwn=keyDown;<!--向窗口对象注册onkeydown事件-->
	var a=setInterval("move()",500);<!--每隔500ms调用一次move()方法，返回值存放在变量a中-->
    <!--调用move方法，启动游戏-->
	move();
    </script>

    <span id="span1"></span>
</body>
</html>








                

        

        

    

  


    

      

        

            

              
                
                  墨鱼精
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









              

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值