天天看点
返回

canvas+js 贪吃蛇实现

最近没事研究了下canvas 花了半天做了简单的贪吃蛇小游戏 废话不多说直接上代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>贪吃蛇</title>

        <style type="text/css">

            canvas{ background: #d6d6d6;}

            ul,li,h2,h1,p{list-style: none; padding: 0; margin: 0;}

            .gameBox{ width: 600px; height: 500px; background: #959595;padding: 30px; }

            .gameBox .li{ width: 400px; height: 500px; float:left;}

            .gameBox .li2{ width: 180px; height: 420px; float:left; padding-left:20px ; padding-top: 80px;;}

            .gameBox .li2 p{ height: 40px; line-break: 40px;}

            .gameBox h1{ padding: 5px 10px; text-align: left; font-size: 30px; font-style: normal;}

            sub { font-size:12px;padding: 3px 10px ; color: #F0F0F0;}

            .btn{ display:inline-block; padding: 5px 20px; border-radius: 4px; border: 1px solid #959595; background: #d6d6d6; color: #FFF; cursor: pointer;}

        </style>

        <script type="text/javascript" src="js/snake.js" ></script>

    </head>

    <body>

        <ul class="gameBox">

        <h1 class="title">贪吃蛇小游戏<sub>by dongsheng</sub></h1>    

        <li class="li">

         <canvas width="400" height="400" id="canvas"></canvas>    

        </li>

        <li class="li2">

         <p><span>当前分数：</span><span id="score">1</span>分</p>    

         <p><span>当前关数：</span><span id="level">1</span>关</p>    

         <p><span class="btn">开始游戏</span></p>

        </li>

        </ul>

    </body>

</html>

================================================================================

js代码

function snake(width,height,obj){

    this.width= width ;

    this.height = height ;

    this.obj   = obj ; // canvas 对象

    this.foodPoint = {x:320,y:380,color:"blue"}; //食物坐标

    this.snakeArr  = [{x:200,y:280,color:'red'},{x:220,y:280,color:'red'},{x:240,y:280,color:'red'}];//存储蛇的坐标

    this.score     = 0 ;//分数

    this.level    = 1 ;//级数

    this.speed     = 500;//速度

    this.objw      = 20 ;

    this.colorArr  = ["red","orange","blue","green","yellow","black"];

    this.aspect    = "left";

    this.timeoutId = null ;

    this.spendX    = 0   ;

    this.spendY    = 0   ;

    this.counter   = 2   ;

}

snake.prototype = {

    buildPan:function() {

      var line  = this.width / this.objw ;

      var colum = this.height / this.objw ;

      var cobj  = this.obj ;

      cobj.beginPath();

      cobj.lineWidth = 1;

      cobj.strokeStyle = "#FFFFFF";

      for(var i = 1 ; i < line ; i ++ ){

          var x = 0  ;

          var y = i * this.objw ;

          cobj.moveTo(x,y);

          cobj.lineTo(this.width,y);

          for( var j = 1 ; j < colum ;j ++ ){

              y = 0;

              x = j * this.objw ;

                 cobj.moveTo(x,y) ;

                 cobj.lineTo(x,this.height);

          }

      }

      cobj.stroke();

    },

    createOne:function(x,y,color){

       this.obj.beginPath();    

       this.obj.fillStyle = color ;

       this.strokeStyle = "#FFFFFF";

       this.obj.fillRect(x,y,this.objw,this.objw);

       this.obj.stroke();

    },

    IsFail:function(){

        var bool = false ;

        var x = this.snakeArr[0]['x'];

        var y = this.snakeArr[0]['y'];

        if( x > this.width || y > this.height ) bool = true ;

        if( x < 0 || y < 0 ) bool = true ;

        var key = this.snakeArr.length - 1;

        if( x == this.snakeArr[key]["x"] && y == this.snakeArr[key]["y"] ) bool =true ;

        return bool;

    },

    clearPan:function(){

        this.obj.clearRect(0,0,this.width,this.height);

    },

    IsEat:function(){

        me = this;

        var x = me.snakeArr[0]['x'] ;

        var y = me.snakeArr[0]['y'] ;

        var eat = false ;

        if( x == me.foodPoint['x'] ){

            var yy = y + me.objw;

            if(me.foodPoint['y'] == yy ){

                eat = true;

            }

        }

        if(y == me.foodPoint['y']){

            var xx = x + me.objw ;

            if(me.foodPoint['x'] == xx ){

                eat = true ;

            }

        }

        if( eat ){

            me.snakeArr.push(me.foodPoint);

            me.snakeArr.forEach(function(items,index){

                me.snakeArr[index]['color'] = me.foodPoint['color'];

            });

            var index = parseInt(Math.random() * me.colorArr.length);

            var beishu = me.width / me.objw ;

            var newX  = parseInt(Math.random()*beishu)*me.objw;

            var newY  = parseInt(Math.random()*beishu)*me.objw;

            me.foodPoint = {x:newX,y:newY,color:me.colorArr[index]};

            me.score ++ ;

        }

        var jishu = Math.ceil(me.score / 20 );

        me.level = jishu || 1 ;

    },

    SnakeGo:function(){

       var me = this ;

          me.clearPan();

        me.buildPan();

        if(me.IsFail()){

               alert("本轮游戏结束，你总过闯过"+me.level+"关，共计得分："+me.score+"游戏将重新开始");

               clearTimeout(me.timeoutId);

               return;

        }

        me.IsEat();

        me.createOne(me.foodPoint['x'],me.foodPoint['y'],me.foodPoint['color']);

        if(me.aspect == "left" ){

              me.spendX = -me.objw ;

              me.spendY = 0 ;

        }else if (me.aspect == "right" ){

             me.spendY = 0 ;

             me.spendX = me.objw ;

        }else if (me.aspect == "up" ){

             me.spendY = -me.objw ;

             me.spendX = 0 ;

        }else if(me.aspect == "down" ){

             me.spendY = me.objw ;

             me.spendX = 0 ;

        }

        var index = me.snakeArr.length - 1 ;

        me.snakeArr[index]['x'] = me.snakeArr[0]['x']+me.spendX;

        me.snakeArr[index]['y'] = me.snakeArr[0]['y']+me.spendY;

        var Last = me.snakeArr.pop();

        me.snakeArr.unshift(Last);

        me.snakeArr.forEach(function(items){

            me.createOne(items['x'],items['y'],items['color']);

       })

       me.timeoutId = setTimeout(function(){me.SnakeGo()},me.speed);

    },

    showScoreLevel:function(obj,obj2){

       document.getElementById(obj).innerHTML = this.score;

       document.getElementById(obj2).innerHTML=this.level ;

       var me = this;

       if (me.counter == me.level){

             me.counter++ ;

             me.speed-=100;

       }

       setTimeout(function(){me.showScoreLevel(obj,obj2)},500);

    }

}

window.onload = function(){

    var canvas = document.getElementById("canvas");

    var cobj   = canvas.getContext("2d");

    var Snake = new snake(400,500,cobj);

    var aspect = {"37":"left","38":"up","39":"right","40":"down","87":"up","65":"left","68":"right","83":"down"};

    //Snake.SnakeGo();

    document.body.onkeydown = function(ev){

        var en =  ev || window.event  ;

        var index = en.keyCode ;

        Snake.aspect = aspect[index];

    }

    var btn = document.getElementsByClassName("btn");

    btn[0].onclick = function (){

        Snake.snakeArr  = [{x:200,y:280,color:'red'},{x:220,y:280,color:'red'},{x:240,y:280,color:'red'}]

        Snake.SnakeGo();

        Snake.showScoreLevel("score","level");

    }

}

canvas javascript 游戏 贪吃吃
上一篇: 中秋博餅 -----要參加的在評論處報名一下！
下一篇: 2.基础语法：手指抽筋模拟器

继续阅读