javascript写金典贪吃蛇小游 …


概述 :javascript写金典贪吃蛇小游戏 使用canvas来绘制金典小游戏"贪吃蛇"。

       javascript写金典小游戏"贪吃蛇",这里使用canvas来绘制的,有人也用表格或者直接使用html元素块

    不过,原理都是大同小异.思路就是; 用一个数组来表示蛇的身体,里面就是小方块了,可以是二维数组也可以用对象表示每一块的x,y坐标.每次吃到一个就加一个块.移动是拆掉尾巴,装在头部,看起来像是在移动了..............

        此处省略 1000 字...........

      到这里,大体上就完成了。至于怎么吃和碰壁检测都是些看似繁琐但思路简单的步骤了。


    具体代码如下:

    var snake=[],ct=document.querySelector('canvas').getContext('2d');

        var fs=0,x,y,fx=39,stop=false,egg={x:0,y:0},long=22,over=false;

        var bb=document.querySelector('span b');

       

        //初始化

        function inintail(){

            fs=0;fx=39;stop=false;long=document.querySelector('.in').value;

            over=false;snake=[];

             //初始长度

            for(var i=long;i>=0;i--){

                snake.push({x:20*i,y:180});

            }

        }

        //开始

        document.querySelector('.btn').onclick=function(){ 

            over=true;

            inintail(); 

            move();

            this.disabled='null';

        }

        function draw(){

            ct.clearRect(0,0,600,400);

            //蛇

            for(var i=0;i<snake.length;i++){

                if(i==0){ct.fillStyle="#B0C0D7"}

                else{ct.fillStyle="#6080B0";}

                ct.fillRect(snake[i].x,snake[i].y,20,20);

            }

            //食物

            ct.fillStyle="#C6BB8E";

            ct.fillRect(egg.x,egg.y,20,20);

            //网格

            ct.strokeStyle="#555555";

            for(var i=0;i<=30;i++){

                ct.beginPath();

                ct.moveTo(20*i,0);

                ct.lineTo(20*i,400); 

                ct.stroke();

                if(i<=20){

                    ct.beginPath();

                    ct.moveTo(0,20*i);

                    ct.lineTo(600,20*i); 

                    ct.stroke();

                }

            }

        }

        function eggMove(){

            var x=Math.round(Math.random()*29);

            var y=Math.round(Math.random()*19);

            egg.x=x*20;

            egg.y=y*20;

        }

        eggMove();

        function move(){

            x=snake[0].x,y=snake[0].y;

            if(!over) {setTimeout(move,200);}

            if(!stop){

                var last=snake[snake.length-1];

                snake.pop();

                switch(fx){

                    case 38:

                        snake.unshift({x:x,y:y-20});

                        

                    break;

                    case 40:

                        snake.unshift({x:x,y:y+20});

                    break;

                    case 37:

                        snake.unshift({x:x-20,y:y});

                    break;

                    case 39:

                        snake.unshift({x:x+20,y:y});

                    break;

                }

                //吃蛋

                if((snake[0].x==egg.x)&&(snake[0].y==egg.y)){

                    eggMove();

                    fs++;

                    bb.innerHTML=fs;

                    snake.push(last);

                }

            }

            //碰撞停止

            if(!(snake[0].x<0||snake[0].x>580||snake[0].y<0||snake[0].y>380))

            {

                draw();

                //自碰撞

                for(var i=1;i<snake.length;i++){

                   

                   if((snake[0].x==snake[i].x)&&(snake[0].y==snake[i].y)){

                       over=true;

                    

                   }

                }

            }else{return;}

        }

        document.onkeydown=function(e){

            if(e.keyCode==32){

                if(stop)

                {

                    stop=false;

                    console.log("继续");

                }else{

                    stop=true

                    console.log("暂停");

                }

            }

            if(36<e.keyCode && e.keyCode<41){

                fx=e.keyCode;

            }

        }

分类: 学习分享

welcome
Top