canvas贪吃蛇

html

<h1>贪吃蛇</h1>
<div class="canvas">
    <canvas id="myCanvas"></canvas>
</div>    
<p class="score">0</p>
<a class="start">开始</a>

 

css

.canvas{
    width: 95%;
    margin: 0 auto;
    background: burlywood;
}

 

js

            function Snake(){
                this.block_size = 20;
                this.snake = [];
                this.len = 4;
                this.direction = 2;
                this.border = {x:0,y:0};
                this.col = 17;
                this.food = {};
                this.old = [];
            }
        
            Snake.prototype.addFood = function(){
                this.food.x = Math.floor(Math.random()*(this.col-1))*this.block_size;
                this.food.y = Math.floor(Math.random()*(this.col-1))*this.block_size;
                        
            }
            Snake.prototype.init = function(){
                var self = this;
                
                this.snake.push({x: 0,y: 0},{x: this.block_size,y:0},{x:this.block_size*2,y:0})
                var start_x,
                    start_y,
                    end_x,
                    end_y,
                    d_x,
                    d_y,
                    direction,
                    self = this;
                    
                $('body').on('touchstart',function(e){
                    e.preventDefault();
                    start_x = e.originalEvent.changedTouches[0].pageX;
                    start_y = e.originalEvent.changedTouches[0].pageY;
                });
                
                $('body').on('touchend',function(e){
                    e.preventDefault();
                    
                    end_x = e.originalEvent.changedTouches[0].pageX;
                    end_y = e.originalEvent.changedTouches[0].pageY;
                    d_x = end_x - start_x;
                    d_y = end_y - start_y;
                    if( Math.abs(d_x) > Math.abs(d_y) && d_x > 0){
                        self.direction = 2;

                    }
                    if( Math.abs(d_x) > Math.abs(d_y) && d_x < 0){
                        self.direction = 4;
                    }
                    if( Math.abs(d_y) > Math.abs(d_x) && d_y > 0){
                        self.direction = 3
                    }
                    if( Math.abs(d_y) > Math.abs(d_x) && d_y < 0){
                        self.direction = 1;
                    }
                    
                    self.move(direction);
                })
                this.addFood();
                this.draw();
                
                self.timer = setInterval(function(){
                    self.move(self)
                },500)
            }
            
            Snake.prototype.over = function(){
                
                var last = this.snake[this.snake.length-1];
                
                var last_x = last.x + this.block_size/2;
                
                var last_y = last.y + this.block_size/2;
                
                if( last_x >=  this.border || last_x <= 0 || last_y >= this.border || last_y <= 0 ){
                    
                    clearInterval(this.timer);
                    
                    alert('你挂了');
                }
            }
            
            Snake.prototype.eat = function(){
                var last = this.snake[this.snake.length-1];
                
                if(last.x === this.food.x && last.y === this.food.y){
                    
                    this.old.unshift({x: this.food.x,y: this.food.y});
                    
                    this.snake = this.old;
                    
                    this.food.x = -110;
                    this.food.y = -110;
                    
                    this.addFood();
                    
                    document.querySelector('.score').innerHTML = parseInt(document.querySelector('.score').innerHTML)+20;
                }
            }
            
            Snake.prototype.move = function(_this){
                var self = _this;
                
                self.old = self.snake;
                
                var canvas =    document.getElementById('myCanvas'),
                    ctx = canvas.getContext('2d');
                    
                var n = self.snake.length;
                
                switch(self.direction){
                    case 1://向上
this.snake.push({x: self.snake[n-1].x,y: self.snake[n-1].y - self.block_size})
                    break;
                    case 2:
this.snake.push({x: self.snake[n-1].x + self.block_size,y: self.snake[n-1].y})
                    break;
                    case 3:
this.snake.push({x: self.snake[n-1].x,y: this.snake[n-1].y + self.block_size})                    
                    break;
                    case 4:
this.snake.push({x: self.snake[n-1].x - this.block_size,y: self.snake[n-1].y})                    
                    break;
                }
                
                self.snake.shift();
                self.draw();
                self.eat();
                self.over();
            }
            
            Snake.prototype.draw = function(){
                
                var canvas =  document.getElementById('myCanvas'),
                    ctx  =  canvas.getContext('2d');
                var pw = canvas.parentNode.clientWidth;
                
                var canvas_w = pw;
                
                var row  =  20,
                    col  =  20,
                    block_size  =  this.block_size;
                
                this.border = canvas_w;
                this.col = Math.floor(canvas_w/this.block_size);
                
                canvas.width = canvas_w;
                canvas.height = canvas_w;
                ctx.strokeStyle = '#43B049';
                ctx.lineWidth = 1;
                
                //画棋盘
                for (var i = 0; i < canvas_w; i += block_size) {
                    ctx.moveTo(0, i);
                    ctx.lineTo(canvas_w,i);
                    ctx.moveTo(i, 0);
                    ctx.lineTo(i,canvas_w)
                    ctx.stroke();
                }
                
                //画蛇
                for (var j = 0,len = this.snake.length; j < len; j++ ) {
                    ctx.beginPath();
                    ctx.fillStyle = '#43B049';
                    ctx.fillRect(this.snake[j].x,this.snake[j].y,block_size,block_size);
                }
                 ctx.fillRect(this.food.x,this.food.y,20,20);
                    ctx.fill();
                
            }
            
            var snake =     new Snake();
            
            snake.draw();
            
            document.querySelector('.start').addEventListener('click',function(){
                
                snake.init();
                
            })

over