JavaScript面向对象编程小游戏---贪吃蛇

1 面向对象编程思想在程序项目中有着非常明显的优势:

1- 1 代码可读性高.由于继承的存在，即使改变需求，那么维护也只是在局部模块

1- 2 维护非常方便并且成本较低。

2 这个demo是采用了面向对象的编程思想. 用JavaScript 语言编写的游戏小程序--贪吃蛇.

代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想.

该小Demo已上传GitHub,欢迎下载! 觉得好的话,随手给个star, 您的star是我最大的动力!

https://github.com/XingJYGo/snakePlay#javascript-经典面向对象demo-贪吃蛇

代码展示:

代码结构:

--index.html 地图页面,展示蛇和食物,进行游戏

--food.js 构造食物对象

--game.js 构造游戏对象

--snake.js 构造蛇对象

--tool.js 常用数据工具封装

--index.html 地图页面

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    #map{

      width: 500px;

      height: 500px;

      background-color: lightblue;

      position: relative;

    }

  </style>

</head>

<body>

<div id="map">

</div>

<button id="btn">模拟蛇吃到食物</button>

<script src="tool.js"></script>

<script src="food.js"></script>

<script src="snake.js"></script>

<script src="game.js"></script>

<script>

////==========前后方向设定后 ==================

var game = new Game();

game.start();

</script>

</body>

</html>

--food.js 构造食物对象

// 封装一个食物对象

//沙箱模式

(function(){

  var container; //用于存储之前的食物

  function Food(option) {

    //防止用户不传参数会报错

    option = option || {};

    this.width = option.width || 20;

    this.height = option.height || 20;

    this.bgc = option.bgc || 'orange';

    this.x = option.x || 0;

    this.y = option.y || 0;

    this.borderRadius = option.borderRadius |10;

  }

  Food.prototype.render = function () {

    //每一次渲染新的之前就把原来的移除掉

    if(container){

      map.removeChild(container);

    }

    // 创建食物对象

    var food = document.createElement('div');

    //存到全局变量里

    container = food;

    food.style.width = this.width + 'px';

    food.style.height = this.height + 'px';

    food.style.backgroundColor = this.bgc;

    food.style.position = 'absolute';

      //获得随机位置

      //由于要让食物的位置在每一个格子里面,所有获取随机数的算法要重新计算

    this.x = Tool.getRandom(0, (map.offsetWidth/ this.width-1)) * this.width;

    this.y = Tool.getRandom(0, (map.offsetHeight/ this.height-1)) * this.height;

    food.style.left = this.x + 'px';

    food.style.top = this.y + 'px';

    food.style.borderRadius = this.borderRadius + 'px';

    //渲染上食物

    map.appendChild(food);

  }

  //因为要在全局使用Food,需要把Food拿到全局中

  window.Food = Food;

})();

--game.js 构造游戏对象

(function () {

//    1 由于游戏对象要控制蛇和食物,

//     所以游戏对象应该拥有蛇的实例和食物的实例

    //存储定时器的id

    var timeid;

    function Game() {

        this.snake = new Snake();

        this.food = new Food();

    }

    //2 开始游戏

    Game.prototype.start = function () {

        this.snake.render();

        this.food.render();

        // 2-1 游戏一开始,蛇和食物就渲染出来

        timeid = setInterval(function () {

            //2-2 -1 蛇的数据改变

            this.snake.move();

           // 2-3 判断蛇是否到达边界

            var snakeHead = this.snake.body[0];

            //2-3-1 求蛇头可以移动的水平/垂直坐标的最大位置

            var maxX = map.offsetWidth/this.snake.width -1;

            var maxY = map.offsetHeight/this.snake.height -1;

            if (snakeHead.x <0 ||snakeHead.x > maxX ||snakeHead.y <0 ||snakeHead.y > maxY){

                clearInterval(timeid);

                alert("gave over");

                //注:当X超出范围,代码应立即终止,

                // 防止2-2-2 渲染出下一个盒子.展示出来

                return;

            }

            //2-4 蛇吃食物

            //依据: 蛇头的坐标 和 食物的坐标重合

            var snakeX = snakeHead.x * this.snake.width;

            var snakeY = snakeHead.y * this.snake.height;

            var foodX =  this.food.x;

            var foodY = this.food.y;

            //如果符合条件, 证明吃到了食物

             if (snakeX === foodX && snakeY === foodY){

                 // 2-4-1 食物消失, 渲染新食物

                 this.food.render();

                 // 2-4-2 蛇,变长

                 //    其实就是往snake.body.push个新对象

                 //    bug: 为了解决新添加蛇节闪下的问题, 把蛇的最后一节对象,作为新的对象.

                 var last = this.snake.body[this.snake.body.length -1];

                 this.snake.body.push({

                     x:last.x,

                     y:last.y,

                     col:last.col

                 })

                 // this.snake.body.push(last);

                 // 注:last本身已经在数组中了,

             }

            //2-2 -2渲染到页面上,真正看到的蛇动起来

            this.snake.render();

        }.bind(this), 150)

        // 3 给页面注册键盘按下的事件

        // 3-1 监听用户是否按下了上,下,左,右的按键

        document.onkeydown = function(e){

            // console.log(this);

            e = e || window.event;

            console.log(e.keyCode);

            // 左37  上38  右39   下40

            switch(e.keyCode){

                case 37:

                    //3-11 需要找到蛇,修改蛇的direction属性

                    //防止原地掉头

                    if(this.snake.direction === 'right'){

                        return;

                    }

                    this.snake.direction = 'left';

                    break;

                case 38:

                    if(this.snake.direction === 'bottom'){

                        return;

                    }

                    this.snake.direction = 'top';

                    break;

                case 39:

                    if(this.snake.direction === 'left'){

                        return;

                    }

                    this.snake.direction = 'right';

                    break;

                case 40:

                    if(this.snake.direction === 'top') return; //如果if中只有一行代码就可以不写花括号,然后这一行代码要紧跟在if后面记得加分号

                    this.snake.direction = 'bottom';

                    break;

            }

        }.bind(this);

    };

    //2-2 蛇变量赋予全局

    window.Game = Game;

})();

--snake.js 构造蛇对象

(function () {

    var arr = []; //用于存储蛇的每一节数据

    // 1 创建蛇对象

    function Snake(option) {

        option = option || {};

        this.width = option.width || 20;

        this.height = option.height || 20;

        this.body = [

            {x: 3, y: 2, col: 'green'},//蛇头的位置和颜色

            {x: 2, y: 2, col: 'orange'},//蛇头身体的位置和颜色

            {x: 1, y: 2, col: 'orange'}];

        this.direction = option.direction || 'right';

    }

    //2 渲染蛇的方法

    Snake.prototype.render = function () {

        // 2-3 为了防止多个sanke渲染到页面上,一渲染之前先清除掉原来的

        for (var i = 0; i < arr.length; i++) {

            map.removeChild(arr[i]);//移除页面上的蛇节

        }

        arr.splice(0,arr.length);//蛇节都被移除掉了,那么数组中也应该都移除.

        //2-1 根据body中的个数,动态的创建蛇节

        this.body.forEach(function (item, index) {

            //2-0 动态的创建蛇节

            var snakeNode = document.createElement('div');

            //2-4 遍历添加蛇节新数据

            arr.push(snakeNode);

            snakeNode.style.width = this.width + 'px';

            snakeNode.style.height = this.height + 'px';

            snakeNode.style.position = 'absolute';

            snakeNode.style.left = item.x * this.width + 'px';

            snakeNode.style.top = item.y * this.height + 'px';

            snakeNode.style.backgroundColor = item.col;

            map.appendChild(snakeNode);

        }.bind(this))

        //    2-2 上面的this是在snake里面,指向snake.`

        //    否则,默认指向window

    };

    //3 蛇移动的方法:body 头数组赋值给身体.

    Snake.prototype.move = function () {

        //3-1 蛇后面的数据给前面

        for (var i = this.body.length -1; i >0; i--) {

            this.body[i].x = this.body[i - 1].x;

            this.body[i].y = this.body[i - 1].y;

        }

    //   3-2暂时蛇头往右走

    //     this.body[0].x +=1;

    //

    //3-2蛇头一定的位置,要根据蛇的方向来决定

        switch(this.direction){

            case 'left':

                this.body[0].x -= 1;

                break;

            case 'right':

                this.body[0].x += 1;

                break;

            case 'top':

                this.body[0].y -= 1;

                break;

            case 'bottom':

                this.body[0].y += 1;

                break;

        }

    };

    //赋予全局变量

    window.Snake = Snake;

})();

--tool.js 常用数据工具封装

//用于存放一些常用的功能性的函数

//   function getRandom(){

//

// }

var Tool = {

  //获取min - max之间的随机整数

  getRandom: function(min, max){

    return Math.floor(Math.random() * (max - min + 1)) + min;

  }

}

// Tool.getRandom()

JavaScript面向对象编程小游戏---贪吃蛇的更多相关文章

使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路首先要解决的问题随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...
第一个windows 小游戏贪吃蛇
最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...
JavaScript 小游戏贪吃蛇
贪吃蛇代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
分享几个原生javascript面向对象设计小游戏
一.序言不知大家是不是和我一样,当初都有个梦想.学编程,就是想开发游戏.结果进入大学学习之后,才知道搞的是数据库应用程序开发!在此,本人就分享下业余时间做的几个小游戏吧!本打算想用winform或w ...
Win32小游戏--贪吃蛇
近日里学习了关于win32编程的相关知识,利用这些知识制作了一款贪吃蛇小游戏,具体细节还是分模块来叙述前期准备:在网上找到一些贪吃蛇的游戏素材图片,以及具体的逻辑框图在正式写功能之前,先把一系列环 ...
用Canvas制作小游戏——贪吃蛇
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
python【控制台】小游戏--贪吃蛇
传统贪吃蛇相信大家都玩过,也是一款很老很经典的游戏,今天我们用python控制台实现项目有很多bug没有解决,因为本人一时兴起写的一个小游戏,所以只是实现可玩部分功能,并没有花较多的时间和精力去维护 ...
手把手教学h5小游戏 - 贪吃蛇
简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...
Java&lowbar;GUI小游戏--贪吃蛇
贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...

随机推荐

介绍几种SSIS部署方式
介绍如果你已经开发完一个不错的SSIS包并且能够在你的本地完美的运行,每个任务都亮起绿色的通过标志.这时为了能够让这个包处理能够在指定时间运行,你需要将其发布到一个服务器上,并做好相关配置.作为开发 ...
AlwaysOn的认识与相关理解
AlwaysOn技术的简要说明: SQL Server2012所支持的AlwaysOn技术集中了故障转移群集.数据库镜像和日志传送三者的优点,但又不相同.故障转移群集的单位是SQL实例,数据库镜像和日 ...
Android学习第六弹之Touch事件的处理
在移动开发过程当中,我们经常会遇到手势处理和事件触摸的情况,如果不了解整个事件的处理机制,对于开发的同学和码农是非常痛苦的,但是事件触摸的处理确实是一个非常复杂的过程,细讲起来,估计我都能讲迷糊,这里 ...
socketserve及其应用
1.cmd命令利用socket socket服务端 import socket import subprocess s = socket.socket() s.bind(("127.0.0 ...
AlarmManager使用注意事项
在使用AlarmManager实现闹钟需要注意的是,intent和pendingintend的context如果是activity,那么当activity回收之后,context对象则不能被Alarm ...
PHP知识分享之session &amp&semi;&amp&semi; cookie
<?php /* * @Content : session && cookie * @author : Mr.xml * @time : 2015-3-17 09:53:49 * ...
linux文件属性权限相关
一个linux目录或者文件,都会有一个所属主和所属组. 所属主,即文件的拥有者,而所属组,即该文件所属主所在的一个组. linux文件属性包括文件类型 - d l b c s 依次表示普通文件 ...
Swift—静态属性- 备
我先来设计一个类:有一个Account(银行账户)类,假设它有3个属性:amount(账户金额).interestRate(利率)和owner(账户名). 在这3个属性中,amount和owner会因 ...
Websphere(was)与Weblogic部署EJB的注意项
复杂的故事简单说,复杂的问题简单做. EJB容器简介本节讲解EJB项目在Weblogic和Was上的部署需要注意设置的一些内容.不同的中间件对EJB支持方式不一样,所以配置的原理也略有差异. 关键 ...
谱聚类（Spectral Clustring）原理
谱聚类(spectral clustering)是广泛使用的聚类算法,比起传统的K-Means算法,谱聚类对数据分布的适应性更强,聚类效果也很优秀,同时聚类的计算量也小很多,更加难能可贵的是实现起来也 ...