JS实现简单的贪吃蛇小游戏

最新推荐文章于 2024-08-08 13:37:43 发布

19年，重新开始写

最新推荐文章于 2024-08-08 13:37:43 发布

阅读量4.3k

点赞数 2

分类专栏： JS 文章标签：游戏 javascript

本文链接：https://blog.csdn.net/qq_27905183/article/details/69945339

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

网页布局框架搭建:

<!Doctype html>
<html>
    <head>
        <title>贪吃蛇小游戏</title>
        <meta http-equiv="content-Type" content="text/html;charset=gbk" />
        <meta http-equiv="Window-target" content="_top" />
        <meta http-equiv="progma" content="no-cache" />
        <meta name="description" content="js实现的简单贪吃蛇游戏" />
        <meta name="author" content="成兮" />

        <style>
            canvas{border:1px solid grey;}
        </style>

        <script>

        </script>
    </head>

    <body>
        <canvas id="mycanvas" width="400" height="400"></canvas>
    </body>
</html>

JS脚本代码详解

<script>
    window.onload = function(){
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext('2d');
        //设置蛇移动的频率
        var snake_speed = 200;
        var interval = window.setInterval(snake_leave,snake_speed);
        //设置移动的方向0-3上下左右
        var direction = 3;
        //保存贪吃蛇的实际长度
        var snakelen = 20;
        //保存移动的路径,元素为{'x':x,'y':y}格式
        var map = [];
        //蛇身单元大小
        var size = 8;
        //食物坐标：(a*8,a*8)
        var a = 0;
        //贪吃蛇每次的蛇头坐标
        var x = 8;
        var y = 8;

        //贪吃蛇移动函数
        function snake_leave(){
            //根据移动方向来移动
            switch(direction){
                case 0:y -= size;
                    break;
                case 1:y += size;
                    break;
                case 2:x -= size;
                    break;
                case 3:x += size;
                    break;
            }
            //判断是否撞墙
            if(x > 400 || y > 400 || x < 0 || y < 0){
                alert("你撞墙死了");
                window.clearInterval(interval);
            }
            //判断是否撞到自己
            for(var i=0; i<map.length; i++){
                var xx = parseInt(map[i].x);
                var yy = parseInt(map[i].y);
                if(xx == x && yy == y){
                    alert("你撞自己死了");
                    window.clearInterval(interval);
                }
            }   
            //每次移动一下，蛇身最后都要减去1
            if(map.length > snakelen){
                //把数组的第一个元素删除并返回,map中的数据为{key:value}形式
                var foot = map.shift();
                        context.clearRect(foot['x'],foot['y'],size,size);
            }
            //判断是否吃到了食物
            if(x == a*8 && y == a*8){
                snakelen++;
                snake_food();
            }
            //每次移动，进行蛇头的改变
            map.push({'x':x,'y':y});
            context.fillStyle = "#069";
            context.strokeStyle = "#069";
            context.fillRect(x,y,size,size);
        };

        //添加方向键键盘控制事件
        document.onkeydown = function(event){
            var code = event.keyCode;
            switch(code){
                case 37:if(direction != 3)  direction = 2;
                    break;
                case 38:if(direction != 1)  direction = 0;
                    break;
                case 39:if(direction != 2)  direction = 3;
                    break;
                case 40:if(direction != 0)  direction = 1;
                    break;
            }
        };

        //产生食物坐标的随机数来生成食物
        function snake_food(){
            a = Math.ceil(Math.random() * 50);
            context.fillStyle = "#000";
            context.strokeStyle = "#000";
            context.fillRect(a*8,a*8,8,8);
        };
        snake_food();
    };
</script>