自己做的贪食蛇游戏~

前一阵子学习javascript，最后要做一个贪食蛇游戏，所以自己就做了一个，也没看网上的东西，自己凭空乱想，呵呵。发到这里来，记录下当时的想法。

游戏有三部门组成，地图，蛇和食物。

地图

 

< script >
             var  width = 49 ;
             var  height = 49 ;
             for ( var  i = 1 ;i <= width * height;i ++ )
             ... {
                document.write("<div id=ch"+i+" class=chequer></div>");
            }
         </ script >

 

蛇

 

     var  snake = new  Array();

 

食物

 

var  food = "" ;

 

我想地图就是一个由方块组成的一个面板，本来应该考虑作成二维数组的，但当时没有想到这样该如何定位蛇的结构，所以使用了一维数组。

蛇就是一个数组，这个是我首先想到的，所以马上就定义为一个snake_array数组变量了，呵呵。

食物嘛，就是一个点了，呵呵，这个最简单了。

然后，蛇要走路了，要去觅食了。设置一个定时器，应该是随着蛇身的变长来改变定时的时间的，我这里没有，然后按照当前的方向前进。是哪个方向了？当然要我们来控制了，这个就是比二维烂的地方了，左右方向还好说，上下方向，就不得不加上取余%这个符号了。这里我用的是W、S、A、D来控制的，实际是懒得找上下左右的ASCII码了。

 

     function  run()
         ... {
            switch(current_snake_status)
            ...{
                case "s":
                    run_s();
                    break;
                case "w":
                    run_w();
                    break;
                case "a":
                    run_a();
                    break;
                case "d":
                    run_d();
                    break;
                case "":
                    run_init();
                    break;
                default:
                    alert("wrong!");
            }
        }
         function  run_init()
         ... {
            snake.splice(0,snake.length);
            snake.push(49*13+20);//随意选取了一个点为起始点，可用随机数产生随机效果
            food=49*12+30;//随意选取一个点位食物，可用随机数产生随机效果
            current_snake_status="";
            keycode="";
        }
         function  run_s()
         ... {
            if(snake[snake.length-1]<=width*(height-1))
            ...{
                if(!isatsnake(snake[snake.length-1]+width))
                ...{
                snake.push(snake[snake.length-1]+width);
                droptail=snake.shift();
                }
                else
                ...{
                    alert("wrong");
                    for(var i=0;i<snake.length;i++)
                    ...{
                        eval("ch"+snake[i]+".style.background="yellow"");
                    }
                    eval("ch"+food+".style.background="yellow"");
                    run_init();
                }
            }
            else
            ...{
                alert("wrong");
                for(var i=0;i<snake.length;i++)
                ...{
                    eval("ch"+snake[i]+".style.background="yellow"");
                }
                eval("ch"+food+".style.background="yellow"");
                run_init();
            }    
        }
         function  run_w()
         ... {
            if(snake[snake.length-1]>=(width+1))
            ...{
                if(!isatsnake(snake[snake.length-1]-width))
                ...{
                snake.push(snake[snake.length-1]-width);
                droptail=snake.shift();
                }
                else
                ...{
                    alert("wrong");
                    for(var i=0;i<snake.length;i++)
                    ...{
                        eval("ch"+snake[i]+".style.background="yellow"");
                    }
                    eval("ch"+food+".style.background="yellow"");
                    run_init();
                }
            }
            else
            ...{
                alert("wrong");
                for(var i=0;i<snake.length;i++)
                ...{
                    eval("ch"+snake[i]+".style.background="yellow"");
                }
                eval("ch"+food+".style.background="yellow"");
                run_init();
            }
        }
         function  run_a()
         ... {
            if(snake[snake.length-1]!=1 && (snake[snake.length-1]-1)%49!=0)
            ...{
                if(!isatsnake(snake[snake.length-1]-1))
                ...{
                snake.push(snake[snake.length-1]-1);
                droptail=snake.shift();
                }
                else
                ...{
                    alert("wrong");
                    for(var i=0;i<snake.length;i++)
                    ...{
                        eval("ch"+snake[i]+".style.background="yellow"");
                    }
                    eval("ch"+food+".style.background="yellow"");
                    run_init();
                }
            }
            else
            ...{
                alert("wrong");
                for(var i=0;i<snake.length;i++)
                ...{
                    eval("ch"+snake[i]+".style.background="yellow"");
                }
                eval("ch"+food+".style.background="yellow"");
                run_init();
            }
        }
         function  run_d()
         ... {
            if(snake[snake.length-1]%width!=0)
            ...{
                if(!isatsnake(snake[snake.length-1]+1))
                ...{
                snake.push(snake[snake.length-1]+1);
                droptail=snake.shift();
                }
                else
                ...{
                    alert("wrong");
                    for(var i=0;i<snake.length;i++)
                    ...{
                        eval("ch"+snake[i]+".style.background="yellow"");
                    }
                    eval("ch"+food+".style.background="yellow"");
                    run_init();
                }
            }
            else
            ...{
                alert("wrong");
                for(var i=0;i<snake.length;i++)
                ...{
                    eval("ch"+snake[i]+".style.background="yellow"");
                }
                eval("ch"+food+".style.background="yellow"");
                run_init();
            }
        }

 

接着判断是蛇头到什么地方了。这个还是简单的，由于是在一个一维数组组成的地图上，所以看蛇头是不是撞边界，或者是吃掉食物了很简单。而且蛇头碰到自己的身体也很好判断了，遍历下蛇数组就OK。

 

function  isatsnake(chequ)
         ... {
            for(var i=0;i<snake.length;i++)
            ...{
                if(snake[i]==chequ)
                    return true;
            }
            return false;
        }

 

最后就是吃食物，太简单了，把食物所在点放到蛇数组里面就可以了。然后随机产生个食物，蛇又要向新的食物前进了，哈哈~

function  eat()
         ... {
            snake.push(food);
            newfood();
        }
         function  newfood()
         ... {
            do
            ...{
                food=Math.round(Math.random()*width*height);
            }while(isatsnake(food));
        }

由于浏览器在重绘的时候很慢，因此，不是全部重绘，只改变了需要改变的颜色，部分重绘，果然不再卡了，呵呵。 

 

function  drawall()
         ... {
        //    for(var i=1;i<=49*29;i++)
        //    {
        //        eval("ch"+i+".style.background="yellow"");
        //    }
            eval("ch"+droptail+".style.background="yellow"");
            for(var i=0;i<snake.length;i++)
            ...{
                eval("ch"+snake[i]+".style.background="red"");
            }
            eval("ch"+food+".style.background="green"");
        }

 

当然，还欠缺游戏的很多功能，有待改善，不过，作为练习嘛，已经达到目的了，呵呵~