js-实现贪吃蛇项目

╰半夏微凉° 2022-03-18 06:51 230阅读 0赞

近来在学习JS进阶，便学习着做个网页版贪吃蛇项目。

*  index.html

<!DOCTYPEtml

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <div id="map"></div>
    <script src="js/tools.js"></script>
    <script src="js/food.js"></script>
    <script src="js/snake.js"></script>
    <script src="js/game.js"></script>
    </body>
    </html>

*  style.css

#map{
        width: 800px;
        height: 600px;
        background-color: lightgray;
        position: relative;
    }

*  该项目需要随机生成食物的位置，故先准备好相关函数

tools.js

(function () \{

var Tools = {
            getRandom:function (min,max) {
                return Math.floor(Math.random()*(max - min + 1)) + min;
            }
        }
        window.Tools = Tools;
    })()

*  对食物的相关操作

food.js

*  对蛇的相关操作

snake.js

*  游戏操作角度，实现对食物和蛇的同时操作

game.js(

function () {
        var that;
        function Game(map) {
            this.food = new Food();
            this.snake = new Snake();
            this.map = map;
            that = this;
        }
        Game.prototype.start = function () {
            //渲染蛇和食物
            this.food.render(map);
            this.snake.render(map);
            //开始游戏
            //蛇移动
            runSnake();
            //键盘控制蛇移动
            bindKey();
            //蛇吃到食物，在移动的时候吃到食物，所以在移动方法中写
    
        }
        function runSnake() {
            var timerId = setInterval(function () {
                //定时器的this指的是window，所以需要借助一个that
                that.snake.move(that.food,that.map);
                that.snake.render(that.map);
    
                var headX = that.snake.body[0].x;
                var headY = that.snake.body[0].y;
                var maxX = that.map.offsetWidth / that.snake.width;
                var maxY = that.map.offsetHeight / that.snake.height;
    
                if(headX < 0 || headX >= maxX) {
                    alert('Game Over');
                    clearInterval(timerId);
                }
                if(headY < 0 || headY >= maxY) {
                    alert('Game Over');
                    clearInterval(timerId);
                }
            },150)
        }
        function bindKey(){
            document.addEventListener('keydown',function (e) {
                switch (e.keyCode) {
                    case 37:
                        that.snake.direction = 'left';
                        break;
                    case 38:
                        that.snake.direction = 'bottom';
                        break;
                    case 39:
                        that.snake.direction = 'right';
                        break;
                    case 40:
                        that.snake.direction = 'top';
                        break;
                }
            })
        }
    
        window.Game = Game;
    }) ()
    
    
    /*
    var map = document.getElementById('map');
    var game = new Game(map);
    game.start();*/

*  实现整体操作

main.js

(function () {
        var map = document.getElementById('map');
        var game = new Game(map);
        game.start();
    })()

代码已经整理完，后期还可以继续压缩完善。