canvas的贪吃蛇

最新推荐文章于 2023-05-12 15:03:55 发布

alongines

最新推荐文章于 2023-05-12 15:03:55 发布

阅读量687

点赞数

HTML / CSS / JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML canvas 贪吃蛇</title>
<style type="text/css">
    html,body{overflow:hidden;}
</style>
</head>

<body>


<canvas id="canvas" style="background:#eee;border:1px solid #ccc;">你的浏览器不支持canvas,请升级你的浏览器</canvas>
<br /><span style="color:#ccc;font-family:Arial;font-size:12px;">laidezhong(at)gmail.com</span>

<script type="text/javascript">

var setting = {
    width:50,
    height:25,
    pixel:10,
    fps:3,
    gameOver : false,
    paush : false,
    color : "#ef0f6e",
    border: "#ffffff",
    level:{
        "7":[1,0],
        "11":[1,0],
        "14":[1,0],
        "20":[1,1],
        "25":[1,0],
        "30":[1,0],
        "40":[1,1],
        "50":[1,0],
        "70":[1,0],
        "90":[1,0],
        "120":[1,0]
    }
};

var snake = {
    position : [ [2,0],[1,0],[0,0] ],
    keyCode:39,
    forward:[],
    food:[],
    draw : function(){
        ctx.clearRect(0,0,setting.width*setting.pixel,setting.height*setting.pixel)
        var length = this.position.length;
        for(var k = length - 1;k >= 0;k--){
            this.drawDotted( this.position[k] );
        }
        for(var k=0,kk=this.food.length;k<kk;k++){
            this.drawDotted( this.food[k] );
        }
    },
    next:function(){
        var keyCode = snake.keyCode;
        var forwardList = {
            "37" : [-1,0],
            "38" : [0,-1],
            "39" : [1,0],
            "40" : [0,1]
        };
        if( forwardList[keyCode] && snake.forward[0] != forwardList[keyCode][0] && snake.forward[1] != forwardList[keyCode][1] ) snake.forward = forwardList[keyCode];
        var length = this.position.length;
        var last = [ this.position[length-1][0],this.position[length-1][1] ];
        for(var k = length - 1;k >= 0;k--){
            if(k){
                this.position[k][0] = this.position[k-1][0];
                this.position[k][1] = this.position[k-1][1];
            }
        };
        this.position[0][0] += this.forward[0];
        this.position[0][1] += this.forward[1];
        for(var k = length - 1;k >= 0;k--){
            if(k){
                if( this.position[0][0] == this.position[k][0] && this.position[0][1] == this.position[k][1] )setting.gameOver = true;
                if( this.position[0][0] < 0 || this.position[0][1] < 0 || this.position[0][0] >= setting.width || this.position[0][1] >= setting.height)setting.gameOver = true;
            }
        }
        for(var k=0,kk=this.food.length;k<kk;k++){
            if( this.position[0][0] == this.food[k][0] && this.position[0][1] == this.food[k][1] ){
                this.position.push( last );
                this.createFood(k);
            }
        }
        if( setting.level[length]){
            if( setting.level[length][0] )setting.fps+=setting.level[length][0];
            if( setting.level[length][1] ){
                this.createFood(this.food.length)
            }
            setting.level[length] = false;
        }
    },
    createFood:function(key){
        var r = function(n){
            return parseInt(Math.random()*n) + 1;
        }
        var x = r(setting.width-1);
        var y = r(setting.height-1);
        var length = this.position.length;
        for(var k =0;k<length;k++){
            if( x == this.position[k][0] && y == this.position[k][1] ){
                createFood(key);
                return;
            }
        }
        this.food[key] = [x,y];
    },
    drawDotted:function(pos){
        ctx.fillRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );
        ctx.strokeRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );
    }
}

document.body.onkeydown = function(e){
    e = e || window.event;
    var keyCode = e.keyCode;
    if(keyCode == 32){
        setting.paush = !setting.paush;
        return;
    };
    snake.keyCode = keyCode;
}

var canvas = document.getElementById("canvas");
canvas.width = setting.width * setting.pixel;
canvas.height = setting.height * setting.pixel;
var ctx=canvas.getContext("2d");
ctx.fillStyle = setting.color;
ctx.strokeStyle = setting.border;


snake.createFood(0);
loop();
function loop(){
    if(!setting.paush){
        snake.next();
        if(setting.gameOver){
            alert("game over");
            return;
        };
        snake.draw();
    }
    setTimeout( loop,1000/setting.fps );
}


</script>

</body>
</html>