利用JS实现贪吃蛇的游戏(具体分析)之三游戏的封装

最新推荐文章于 2022-03-19 12:16:49 发布

风铭大师

最新推荐文章于 2022-03-19 12:16:49 发布

阅读量3.3k

点赞数

分类专栏： javaScript 文章标签： js高级

本文链接：https://blog.youkuaiyun.com/weixin_42839080/article/details/81457489

版权

javaScript 专栏收录该内容

40 篇文章

订阅专栏

在JS里面是基于对象的语言,那么我们在前面两篇文章中具体分析了Food.js文件的作用,以及Snake.js的文件作用,在我们的顶层Game.js文件中来调用这些方法就可以了,而页面中只需要调用我们的Game.js里面的方法就可以实现整体的功能,这就是面向对象:找一个专业的人来完成所有的功能
游戏对象模块的设计:
在游戏模块中设计好所有的内容为顶层模块,在这里设计好所有的功能与接口交互,这样在结构代码中只需要几行代码就能实现所有功能.
一:需求分析:
在这里设计好所有的功能以及接口交互,在HTML中引用就可以了

二:思路分析:
1. 创建游戏对象,在这里创建地图,食物,蛇的对象,并拥有他们自身所有的方法与属性.
2. 开始游戏,在这里设计将蛇,食物渲染到地图上,因为蛇的移动设计到渲染问题,所以将蛇的移动功能也设计在这里.同时在移动过程中又设计到边界检测所以在这里完成:移动边界检测渲染的功能
3. 绑定按键的功能blinkey()函数的作用,判断按下的是哪一个键,如果按下的是下键改变蛇里面的this.director属性

三:代码实现:

/*
** Create by Alex on 2018/8/4
*/
//创建游戏对象将游戏里面的所有内容都放到这里
(function  ( window ) {
    var that = null;//定义全局that,让this的指向一直游戏对象
    //游戏对象
    function Game ( map ) {
        this.food = new Food();
        this.snake = new Snake();
        this.map = map;
        that = this;
    }

    //游戏开始的方法
    Game.prototype.start = function (  ) {
        this.food.render(this.map);
        this.snake.render(this.map);
        bindKey();
        snakeAutoMove();
    }

    //让蛇每隔一定的时间就动起来
    function snakeAutoMove () {
        var timeID = setInterval(function (  ) {
            //此时this指向的就是游戏对象
           this.snake.snakemove(this.food,this.map); //蛇身的移动
           this.snake.render(this.map); //渲染到页面
           //----------------边界检测----------------------
            var snakeHeadX = this.snake.body[0].x * this.snake.width;
            var snakeHeadY = this.snake.body[0].y * this.snake.height;
            if(snakeHeadX < 0 || snakeHeadY < 0 || snakeHeadX >= this.map.offsetWidth || snakeHeadY >= this.map.offsetHeight ) {
                alert('Game Over');
                clearInterval(timeID);
            }
        }.bind(that),300)
    }

    //添加按键信息
    function bindKey(){
        window.onkeydown = function (e) {
            e = e || window.event;
            //获取按的是那个键(按得是上键,还是下键,还是左键还是右键.)
            //console.log(e.keyCode); //左37  上38  右39  下40
            switch (e.keyCode){
                case 37:
                    //改变蛇的方向为左.
                    if(this.snake.direction != "right"){
                        this.snake.direction = "left";
                    }
                    break;
                case 38:
                    //改变蛇的方向为上.
                    if(this.snake.direction != "bottom"){
                        this.snake.direction = "top";
                    }
                    break;
                case 39:
                    //改变蛇的方向为右.
                    if(this.snake.direction != "left"){
                        this.snake.direction = "right";
                    }
                    break;
                case 40:
                    //改变蛇的方向为下.
                    if(this.snake.direction != 'top'){
                        this.snake.direction = "bottom";
                    }
                    break;
            }
        }.bind(that);
    }

    //暴露接口
    window.Game = Game;
}(window))

四.页面的结构代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .map {
            width: 800px;
            height: 600px;
            background-color: #ccc;
            position: relative;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="map" id="map"></div>

<script src="Food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
<script>
    //整个HTML的页面带中只有这几行代码就可以实现所有的功能
    var map = document.getElementById('map');
    var game = new Game(map);
    game.start();
</script>

</body>
</html>

所有功能的实现都已经完结,下一章讲终极封装.