自写js简易贪吃蛇程序源码

浏览数：19 / 时间：2015年06月09日

本人在大约一个月前开始学习web开发，不久前结束了对js部分的学习，并用js独立码出了一个简易贪吃蛇程序，算然界面只是简单的用到一些带背景颜色的div，但贪吃蛇游戏的主要功能都实现了，不说有血有肉，至少骨架还是有的：) 心中还是小有成就，于是决定把留在这里做为纪念。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>
        请输入标题
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <meta name="keywords" content="关键词"/>
    <meta name="Description" content="描述信息"/>
    <script>
        var map;
        var food;
        var snake=[
                    [3,2,‘red‘,‘‘],
                    [2,2,‘blue‘,‘‘],
                    [1,2,‘blue‘,‘‘]
                ];
        var snakeD=‘right‘;
        var snakeD1；
        var foodX;
        var foodY;
        var flag=true;

        window.onload=function(){
            createMap();
            createFood();
            createSnake();

            document.onkeyup=function(event){
                var code;
                if(window.event){
                    code=window.event.keyCode;
                }else{
                    code=event.keyCode;
                }
                //alert(code);
                switch(code){
                    case 37:
                        snakeD1=‘left‘;
                        if(snakeD!=‘right‘){
                            snakeD=‘left‘;
                        }
                        break;
                    case 38:
                        snakeD1=‘up‘;
                        if(snakeD!=‘down‘){
                            snakeD=‘up‘;
                        }
                        break;
                    case 39:
                        snakeD1=‘right‘;
                        if(snakeD!=‘left‘){
                            snakeD=‘right‘;
                        }
                        break;
                    case 40:
                        snakeD1=‘down‘;
                        if(snakeD!=‘up‘){
                            snakeD=‘down‘;
                        }
                        break;
                }
            }

        }
        function createMap(){
            var mapWidth=800;
            var mapHeight=400;
            var mapColor=‘#dddddd‘;
            var mapPosition=‘absolute‘;
            map=document.createElement(‘div‘);
            
            map.style.width=mapWidth+‘px‘;
            map.style.height=mapHeight+‘px‘;
            map.style.backgroundColor=mapColor;
            map.style.position=mapPosition;
            
            document.getElementsByTagName(‘body‘)[0].appendChild(map);
        }
        function createFood(){
            var foodWidth=20;
            var foodHeight=20;
            var foodColor=‘green‘;
            var foodPosition=‘absolute‘;
            
            if(flag){
                food=document.createElement(‘div‘);
                food.style.width=foodWidth+‘px‘;
                food.style.height=foodHeight+‘px‘;
                food.style.backgroundColor=foodColor;
                food.style.position=foodPosition;
                map.appendChild(food);
                flag=false;
            }
            
            foodX=Math.floor(Math.random()*40);
            foodY=Math.floor(Math.random()*20);

            
            food.style.left=foodX*20+‘px‘;
            food.style.top=foodY*20+‘px‘;

            
        }
        function createSnake(){
            var i=0;
            
            for(var i=0;i<snake.length;i++){
                if(snake[i][3]==‘‘){
                    snake[i][3]=document.createElement(‘div‘);
                    snake[i][3].style.height=20+‘px‘;
                    snake[i][3].style.width=20+‘px‘;
                    snake[i][3].style.backgroundColor=snake[i][2];
                    snake[i][3].style.position=‘absolute‘;         //误写成了postion,导致蛇节全部靠左边显示
                    map.appendChild(snake[i][3]);
                }

                
                snake[i][3].style.left=snake[i][0]*20+‘px‘;
                snake[i][3].style.top=snake[i][1]*20+‘px‘;

                //alert(snake[i][0]);

            }
            if(snake[0][0]==foodX&&snake[0][1]==foodY){
                createFood();
                var l=snake.length-1;
                var x=snake[l][0];
                var y=snake[l][1];
                snake.push([x,y,‘blue‘,‘‘]);
            }
            for(var i=snake.length-1;i>0;i--){
                snake[i][0]=snake[i-1][0];
                snake[i][1]=snake[i-1][1];
            }
            if(snakeD==‘right‘){
                snake[0][0]+=1;
            }
            if(snakeD==‘left‘){
                snake[0][0]-=1;
            }
            if(snakeD==‘up‘){
                snake[0][1]-=1;
            }
            if(snakeD==‘down‘){
                snake[0][1]+=1;
            }

            if(snake[0][0]<0||snake[0][0]>39||snake[0][1]<0||snake[0][1]>19){
                alert(‘要死啦！‘);
                return;
            }
            for(var i=1;i<snake.length;i++){
                if(snake[0][0]==snake[i][0]&&snake[0][1]==snake[i][1]){
                    alert(‘不做死，就不会死！‘);
                    return;
                }
            }        
            setTimeout(‘createSnake()‘,100);
        }
    </script>
</head>
<body>

</body>
</html>