canvas写的贪吃蛇

最新推荐文章于 2024-09-13 08:33:26 发布

发记

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量101

点赞数

分类专栏： JS 文章标签： canvas js javascript

本文链接：https://blog.csdn.net/u014563888/article/details/109044444

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div style="width: 100%;display: flex;justify-content: center;align-items: center;align-content: center; " >
    <div  style="margin-top:100px;width: 600px;height: 400px;box-shadow: 0 0 0.1rem 0.1rem #ccc;">
        <canvas id="snake" width="600px" height="400px"></canvas>
    </div>
</div>
</body>

<script>
    var canvas = document.getElementById('snake');
    ctx = canvas.getContext("2d");
    var direction = {
        top:1,
        right:2,
        bottom:3,
        left:4
    };
    var current_direction = 2;
    var map_width = 600;
    var map_height = 400;
    var big = 10;
    var move_index,drag_index;
    function Node(){
        this.x = 0;
        this.y = 0;
    }
    function food(){
        this.node = [];
        this.init = function(){
            this.node = [];
            for(var i = 0 ;i<10;i++){
              this.createFood();
            }

        }
        this.createFood = function(){
            var i = 0;
            while(1){
                if(i == 50000){
                    snake.end();
                    alert('游戏结束');
                    break;
                }
                i++;
                var is_r = false;
                var tmp_node = new Node();
                tmp_node.x = Math.ceil(Math.random()*60)*10
                tmp_node.y = Math.ceil(Math.random()*40)*10

                for(var i = 0 ; i < snake.node.length ; i++){
                    if(snake.node[i].x == tmp_node.x && snake.node[i].y == tmp_node.y){
                        is_r = true;
                        break;
                    }
                }
                if(is_r == false){
                    this.node.push(tmp_node);
                    break;
                }
            }


        }

    }
    function snake(){
        this.node = [];
        this.init = function(){
            this.node = [];
            current_direction = direction.right;
            for(var i = 0 ; i < 8 ; i++){
                var tmp_node = new Node();
                tmp_node.x = i * big;
                tmp_node.y = map_width / 2;
                this.node.push(tmp_node)
            }
            food.init();
            move_index = setInterval(function(){
                move();
            },200)
            drag_index =  setInterval(function(){
                drag();
            },100)
        }
        this.end = function(){
            clearInterval(move_index);
            clearInterval(drag_index);
        }
        this.gameover = function(){
            snake.end();
            alert('游戏结束');
            snake.init();
            return;
        }
    }

    var snake = new snake();
    var food = new food();

    snake.init();
    function move(){
        var new_node = new Node();
        var header_node = snake.node[snake.node.length-1];
        switch (current_direction) {
            case direction.top:
                new_node.x = header_node.x;
                new_node.y = header_node.y-big;
                break;
            case direction.right:
                new_node.x = header_node.x+big;
                new_node.y = header_node.y;
                break;
            case direction.bottom:
                new_node.x = header_node.x;
                new_node.y = header_node.y+big;
                break;
            case direction.left:
                new_node.x = header_node.x-big;
                new_node.y = header_node.y;
                break;
        }
        if(new_node.x < 0 ){
            new_node.x = map_width;
        }
        if(new_node.x>map_width){
            new_node.x=0;
        }
        if(new_node.y < 0 ){
            new_node.y = map_height;
        }
        if(new_node.y>map_height){
            new_node.y=0;
        }
        for(var i = 0 ; i < snake.node.length ; i++){
            if(snake.node[i].x == new_node.x && snake.node[i].y == new_node.y){
               snake.gameover();
               return;
            }
        }

        var is_food = false;

        for (var i = 0 ; i < food.node.length ; i++){
            if(food.node[i].x == new_node.x && food.node[i].y == new_node.y){
                is_food = true;
                food.node.splice(i,1);
                break;
            }
        }
        snake.node.push(new_node);
        if(is_food == false){
            snake.node.shift();
        }else{
            food.createFood();
        }
    }
    function drag(){
        ctx.clearRect(0,0,map_width,map_height)
        ctx.fillStyle = "#000";
        ctx.fillRect(0,0,map_width,map_height);
        ctx.stroke();

        for (var i = 0 ;i<snake.node.length;i++){
            ctx.beginPath();
            ctx.fillStyle = "#FFF";
            ctx.fillRect(snake.node[i].x,snake.node[i].y,big,big);
            ctx.stroke();
        }

        for (var i = 0 ;i<food.node.length;i++){
            ctx.beginPath();
            ctx.fillStyle = "#e22b4d";
            ctx.fillRect(food.node[i].x,food.node[i].y,big,big);
            ctx.stroke();
        }
    }



    window.onkeydown = function(e){
        if(e.keyCode == 38){
            current_direction = direction.top;
        }else if(e.keyCode == 39){
            current_direction = direction.right;
        }else if(e.keyCode == 40){
            current_direction = direction.bottom;
        }else if(e.keyCode == 37){
            current_direction = direction.left;
        }
    }


</script>
</html>