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

最新推荐文章于 2024-05-15 16:14:45 发布
最新推荐文章于 2024-05-15 16:14:45 发布
阅读量2.4k 收藏 20
点赞数 2
分类专栏： js高级 文章标签： 面向对象 封装函数 贪吃蛇 小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alightman/article/details/78221430
版权

页面中的地图map

html结构
    <div id = "map"></div>
样式
    #map{
        width:800px;
        height:600px
        margin:0 auto;
        background-color:#ccc;
        position:relative;
    }

食物的对象

  • Food
    • 属性
      • 宽度width
      • 高度height
      • 背景色bgColor
      • 横向坐标x
      • 纵向坐标y
    • 方法：
      • 出现在地图上
书写贪吃蛇食物小点的构造函数
function Food(options){
    options = options||{};
    this.width = options.width||20;
    this.height = options.height||20;
    this.bgColor = options.bgColor||"blue"
    this.x = options.x||0;
    this.y = options.y||0;
}

等同于构造函数function Food(width,height,bgColor){
};
Food(options){};options是一个置入的对象作为形参，可以多个参数传入，优点

    function Food（options）{
        ...
    }
var f = new Food({
        width:50,
        height:50,
        ....
    });
在Food的原型对象上创建共同的行为render渲染函数

将食物小块随机放在map地图上

Food.prototype.render = function(target){
    //创建一个div
    var div = document.createElement("div");
    target.appendChild(div);
    //设置div的一些样式 width height 背景色 left top
    div.style.width = this.width+"px";
    div.style.height = this.height+"px";
    div.style.backgroundColor = this.bgColor;
    //设置div的left值与top值
    //this.x是0-800/20之间的随机数
    this.x = parseInt(Math.random()*target.offsetWidth/this.width);
    this.y = parseInt(Math.random()*target.offsetHeight/this.height);
    div.style.left = this.x*this.width+"px";
    div.style.top = this.y*this.height+"px";
    div.style.position = "absolute";
}

蛇的对象

  • Snake由多个小方块格div组成
    • 属性
      • width蛇的小方块格宽度
      • height蛇的小方块格高度
      • headColor蛇头颜色
      • bodyColor身体颜色
    • 方法
      • 渲染render()
      • 移动move()
创建Snake构造函数
function Snake(options){
    options = options||{};
    this.width = options.width ||20;
    this.height = options.height ||20;
    this.headColor = options.headColor ||"blue";
    this.bodyColor = options.bodyColor||"pink";
    //蛇的核心，蛇是由一个个小方块组成，默认蛇是由三个小方块组成
    this.body = [
        {x:2,y:0,bgColor:this.headColor},
        {x:1,y:0,bgColor:this.bodyColor},
        {x:0,y:0,bgColor:this.bodyColor}
    ]；
    this.direction = "right";
}
在原型中创建Snake通用渲染方法
Snake.prototype.render = function(target){
    for(var i = 0;i<this.body.length;i++){
        var span = document.createElement("span");
        target.appendChild(span);
        span.style.width = this.width+"px";
        span.style.height = this.height+"px";
        span.style.backgroundColor = this.body[i].bgColor;
        span.style.position = "absolute";
        span.style.left = this.body[i].x*this.width;
        span.style.top = this.body[i].y*this.height;
    }
}
在原型对象中创建Snake通用的移动方法
Snake.prototype.move = function(target,food){
//移动的思路：
    //1. 移动蛇的身体
    //2. 根据方向移动蛇头
    //3. 删除整条蛇
    //4. 重新渲染这条蛇
    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;
    }
    switch(this.direction){//控制蛇头的方向和变化
    //记录一个方向条件，判断，方向的的变化控制x的增减或y,改蛇头
        case "right":
        this.body[0].x++;
        break;
        case "left":
        this.body[0].x--;
        break;
        case "top":
        this.body[0].y--;
        break;
        case "bottom":
        this.body[0].y++;
        break;
    }

    //用于蛇的身体加长，吃food，改变蛇的自身
    //1. 判断蛇头的位置与食物的位置是否重合。
    //2. 把移动前的那个蛇尾位置push到body中，添加蛇尾的思想
    //3. 把原先的食物删除
    //4. 重新渲染一个新的食物
     if(head.x === food.x && head.y === food.y){
            this.body.push({
                x:last.x,
                y:last.y,
                bgColor:this.bodyColor
            });
        //删除食物，让食物重新渲染
        var div = target.querySelector("div");
        target.removeChild(div);
        food.render(target);
        }

    //去除所有的span标签
    var spans =target.querySelectorAll("span");
    for(var i = 0;i < spans.length;i++){
    target.removeChild(span[i]);
    }
}

游戏对象的封装

  • 游戏构造函数，管理所有的对象，地图
  • 属性
    • 蛇 食物 地图
  • 方法开始游戏
游戏对象以及初始化
function Game(target){
    this.target = target;
    this.snake = new Snake();
    this.food = new Food();
    //初始化游戏
    this.init();
}
Game.prototype.init = function(){
    //渲染蛇和食物
    this.snake.render(this.target);
    this.food.render(this.target);
    var that = this;
    //由于在下面的函数中要使用当前函数中的this
    //但是下面的函数中有自己的this，如果直接用this，是访问不到我们这个函数中的this的
    //所以我们声明一个新的变量that 将当前函数中的this赋值给这个that
    //that和this的值就是相同的了
    //在下面的函数中我们就可以使用that来访问到当前函数中的this了！
        //onkeyup事件只能给有焦点的东西注册，或者是document
        //document.onkeyup = function (e) {
       // console.log(e.keyCode);可以打印出来按键的code字符
    //}
     document.onkeyup = function(e){
         switch(e.keyCode){
             case 37://控制左键
             if(that.snake.direction != "right"){
                 that.snake.direction = "left"
             }
             break;
             //后面三个控制方向一样
               case 38://控制上键
             if(that.snake.direction != "bottom"){
                 that.snake.direction = "top"
             }
             break;  case 39://控制右键
             if(that.snake.direction != "left"){
                 that.snake.direction = "right"
             }
             break;  case 40://控制下键
             if(that.snake.direction != "top"){
                 that.snake.direction = "bottom"
             }
             break;
         }
     }
}
游戏开始的方法
var timer;
Game.prototype.start = function(){
    var that = this;//that存储外部this;
    timer = setInterval(function(){
    //在定时器中this是指的window对象
        that.snake.move(that.target,that.food);
        //撞墙的逻辑限制，如果蛇头的位置超出了地图，则说明暂停，停止定时器
        var head = that.snake.body[0];//蛇头
        if(head.x<0||head.x>that.target.offsetWidth/that.snake.width-1||head.y<0||head.y>that.target.offsetHeight/that.snake.height-1){
            clearInterval(timer);
            alert("已撞墙,game over");
        }
        //撞身体的判断，判断蛇头和身体位置是否重合，重合即失败
        for(var i = 3;i < that.snake.body.length;i++){
            if(head.x === that.snake.body[i].x&& head.y ===that.snake.body[i].y){
                clearInterval(timer);
                alert("撞自己，game over");
            }
        }
    },150)
}
沙箱模式封装

沙箱模式其实就是一个自调用函数
沙箱的作用，就是对代码起到保护作用，隔离作用

(function(window,undefined){
    var a = 10;
    var b = 100;
    function Food(){
    }
    //将Food暴露到沙箱外面
    window.Food = Food;
})(window)
var food = new Food();

运用了;(function(){})();函数自调用隔离，前后加分号用来防止前后结束，习惯。
+ 传参的必要性:
如果在沙箱中使用的沙箱外部的内容，那么就必须将内容以传参的形式传递到沙箱中进行使用
+ 原因：
+ 可以实现逻辑上的隔离
+ 有利于代码压缩

代码压缩

将所有不必要的空格和换行全部移除，将所有的变量全部重新命名成单个字母的形式，有利于代码压缩

tip:最后将所有的构造函数封装起来

//Food，命名新建food.js，以调用
;(function(window,undefined){
    function Food(options){
    options = options||{};
    this.width = options.width||20;
    this.height = options.height||20;
    this.bgColor = options.bgColor||"blue"
    this.x = options.x||0;
    this.y = options.y||0;
}
    Food.prototype.render = function(target){
    //创建一个div
    var div = document.createElement("div");
    target.appendChild(div);
    //设置div的一些样式 width height 背景色 left top
    div.style.width = this.width+"px";
    div.style.height = this.height+"px";
    div.style.backgroundColor = this.bgColor;
    //设置div的left值与top值
    //this.x是0-800/20之间的随机数
    this.x = parseInt(Math.random()*target.offsetWidth/this.width);
    this.y = parseInt(Math.random()*target.offsetHeight/this.height);
    div.style.left = this.x*this.width+"px";
    div.style.top = this.y*this.height+"px";
    div.style.position = "absolute";
}
window.Food = Food;
})(window);
//蛇部,命名snake.js以调用
    ;(function(window,undefined){
        function Snake(options){
    options = options||{};
    this.width = options.width ||20;
    this.height = options.height ||20;
    this.headColor = options.headColor ||"blue";
    this.bodyColor = options.bodyColor||"pink";
    //蛇的核心，蛇是由一个个小方块组成，默认蛇是由三个小方块组成
    this.body = [
        {x:2,y:0,bgColor:this.headColor},
        {x:1,y:0,bgColor:this.bodyColor},
        {x:0,y:0,bgColor:this.bodyColor}
    ];
    this.direction = "right";
}
//蛇旋渲染
Snake.prototype.render = function(target){
    for(var i = 0;i<this.body.length;i++){
        var span = document.createElement("span");
        target.appendChild(span);
        span.style.width = this.width+"px";
        span.style.height = this.height+"px";
        span.style.backgroundColor = this.body[i].bgColor;
        span.style.position = "absolute";
        span.style.left = this.body[i].x*this.width+"px";
        span.style.top = this.body[i].y*this.height+"px";
    }
}
//蛇部移动
Snake.prototype.move = function(target,food){
//移动的思路：
    //1. 移动蛇的身体
    //2. 根据方向移动蛇头
    //3. 删除整条蛇
    //4. 重新渲染这条蛇
    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;
    }
    switch(this.direction){//控制蛇头的方向和变化
    //记录一个方向条件，判断，方向的的变化控制x的增减或y,改蛇头
        case "right":
        this.body[0].x++;
        break;
        case "left":
        this.body[0].x--;
        break;
        case "top":
        this.body[0].y--;
        break;
        case "bottom":
        this.body[0].y++;
        break;
    }
        var head = this.body[0];
        var last =this.body[this.body.length - 1];
    //用于蛇的身体加长，吃food，改变蛇的自身
    //1. 判断蛇头的位置与食物的位置是否重合。
    //2. 把移动前的那个蛇尾位置push到body中，添加蛇尾的思想
    //3. 把原先的食物删除
    //4. 重新渲染一个新的食物
     if(head.x === food.x && head.y === food.y){
            this.body.push({
                x:last.x,
                y:last.y,
                bgColor:this.bodyColor
            });
        //删除食物，让食物重新渲染
        var div = target.querySelector("div");
        target.removeChild(div);
        food.render(target);
        }

    //去除所有的span标签
    var spans =target.querySelectorAll("span");
    for(var i = 0;i < spans.length;i++){
    target.removeChild(spans[i]);
    }
    //删除之后重新显现
    this.render(target);
}
    window.Snake = Snake;
    })(window);
//游戏对象封装,命名Game.js以调用
;(function(window,undefined){
    function Game(target){
    this.target = target;
    this.snake = new Snake();
    this.food = new Food();
    //初始化游戏
    this.init();
}
Game.prototype.init = function(){
    //渲染蛇和食物
    this.snake.render(this.target);
    this.food.render(this.target);
    var that = this;
    //由于在下面的函数中要使用当前函数中的this
    //但是下面的函数中有自己的this，如果直接用this，是访问不到我们这个函数中的this的
    //所以我们声明一个新的变量that 将当前函数中的this赋值给这个that
    //that和this的值就是相同的了
    //在下面的函数中我们就可以使用that来访问到当前函数中的this了！
        //onkeyup事件只能给有焦点的东西注册，或者是document
        //document.onkeyup = function (e) {
        //console.log(e.keyCode);可以打印出来按键的code字符
       //}
     document.onkeyup = function(e){
         switch(e.keyCode){
             case 37://控制左键
             if(that.snake.direction != "right"){
                 that.snake.direction = "left"
             }
             break;
             //后面三个控制方向一样
               case 38://控制上键
             if(that.snake.direction != "bottom"){
                 that.snake.direction = "top"
             }
             break;  case 39://控制右键
             if(that.snake.direction != "left"){
                 that.snake.direction = "right"
             }
             break;  case 40://控制下键
             if(that.snake.direction != "top"){
                 that.snake.direction = "bottom"
             }
             break;
         }
     }
}
var timer;
Game.prototype.start = function(){
    var that = this;//that存储外部this;
    timer = setInterval(function(){
    //在定时器中this是指的window对象
        that.snake.move(that.target,that.food);
        //撞墙的逻辑限制，如果蛇头的位置超出了地图，则说明暂停，停止定时器
        var head = that.snake.body[0];//蛇头
        if(head.x<0||head.x>that.target.offsetWidth/that.snake.width-1||head.y<0||head.y>that.target.offsetHeight/that.snake.height-1){
            clearInterval(timer);
            alert("已撞墙,game over");
        }
        //撞身体的判断，判断蛇头和身体位置是否重合，重合即失败
        for(var i = 3;i < that.snake.body.length;i++){
            if(head.x === that.snake.body[i].x&& head.y ===that.snake.body[i].y){
                clearInterval(timer);
                alert("撞自己，game over");
            }
        }
    },150)
}
window.Game = Game;
})(window);

封装完毕调用
找地图对象作为参数放入封装的代码中

var map = document.getElementById("map");
var g = new Game(map);
g.start();//可以用个按钮装起来，开始。
//好了，开始玩贪吃蛇吧。
alightman
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript面向对象编程小游戏---贪吃蛇代码实例
10-17
在本案例中，我们看到这种编程风格被应用于开发一个经典的贪吃蛇小游戏。贪吃蛇游戏通常由多个关键组件构成，包括蛇、食物、游戏逻辑以及一些辅助工具。 1. **面向对象编程思想**： - **代码可读性高**：面向对象...
【用C++面向对象的思想以及STL完成贪吃蛇游戏】
q_2474932226的博客
03-09 520
用C++面向对象的编程思想以及STL完成的贪吃蛇游戏
面向对象编程案例—贪吃蛇小游戏
weixin_48376132的博客
08-06 730
1. 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { width: 800px; height: 600px; background-color: #ccc; position: relative; } 2. 分析对象 游戏对象 Game 蛇对象 Snake 食物对象 Food 3. 创建食物对象 （1）创建 Food 的构造函数，并设置属性 x y width height color （2）通过原型设置方法 render 随机创建一个食物对象，并输出
2024年最新面向对象完成小游戏贪吃蛇，2024年最新面试培训班有必要吗
最新发布
java_dazhuzhu的博客
05-15 389
其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；Game 游戏类 - 控制器。isOver 判断是否结束。control 游戏控制器。eatFood 吃食物。start 开始游戏。
面向对象-贪吃蛇
Black_Straight的博客
06-05 239
面向对象-贪吃蛇
贪吃蛇游戏（面向对象）
m0_52074342的博客
04-03 4178
游戏设计 对象： 1.地图 高度 宽度 原子--类似小的div x--多少个原子 y--多少个原子 显示画布功能 2.食物 宽度--原子的大小 高度--原子的大小 功能，在地图上显示食物 3.蛇 body---头 体 尾 ---三个div（原子） 高度---原子的大小 宽度---原子...
小游戏JavaScript面向对象编程贪吃蛇
08-10
小游戏: JavaScript 面向对象编程-----贪吃蛇:
JavaScript面向对象编程小游戏—贪吃蛇代码实例
11-26
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在，即使改变需求，那么维护也只是在局部模块 1-2 维护非常方便并且成本较低。 ​2 这个demo是采用了面向对象的编程思想. 用...
Web前端学习笔记——JavaScript之面向对象游戏案例：贪吃蛇
唯恋殊雨的博客
09-24 1570
面向对象游戏案例：贪吃蛇 案例相关源码以上传到 GitHub ：https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址：贪吃蛇 案例目标 游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力，使用面向对象的方式分析问题，需要一个漫长的过程。 功能实现 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { ...
有关贪吃蛇移动问题
kong0299的博客
03-01 732
入参也就是出参，因为返回值已经确定，所以，我们只能用参数来传递头指针和尾指针的值，对于指针来说是值传递，如果指针本身的值在函数内发生改变，是不会影响外面的头指针和尾指针的值的（传递不出来），能改变的只有头指针和尾指针指向的位置的内容，这个可以传递出来。该游戏的核心是通过链表中的节点位置（假设节点中的x,y来表示节点所在的位置信息）和节点个数来描述蛇的长度和身体位置信息，移动方向即控制链表节点的位置信息。看此题，也就是说，整个贪吃蛇其实是一个链表，但是这个链表的节点在我们的观测中其实是它的x值和y值。
用面向对象写贪吃蛇
06-20
用面向对象写贪吃蛇。------
面向对象的方法实现贪吃蛇
03-04
利用面向对象的方法，实现贪吃蛇。 1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。 2. 在使用××.prototype= {}重写原型对象的时候，一定要加上一句constructor:该对象。不然会造成实例化出来的实例的constructor为object。 3. 在underscore中，使用_.random(a,b)即可获得a-b中的一个随机数。 4. 在求食物的随机位置的时候，用到了panel.clientHeight/this.height - 1) * this.height。 原理是使用盒子的高度/小球的高度，可以算得最多放多少个小球。因为要控制小球不能超过边界，所以总数量要减去1，数量×高度即为随机位置的最大值。 5. 在蛇对象中，用body数组存放蛇身体每一个部分对象。蛇的绘制过程就是遍历body，在面板上绘制。 6. 蛇的移动分为两部分。 ① 蛇节移动到前一个蛇节的位置。直到蛇头后一个蛇节移动到蛇头的位置。 ② 根据direction判断蛇头如何移动。 注意：在游戏绘制的过程中，界面的每一次绘制都要**删除**之前的绘制，不然会叠加到一起。 7. 在蛇的闭包中建一个局部数组，存储蛇对象，可以更加方便的删除操作。 8. 只有在原型对象中的方法和属性，外界是可以调用的。 9. 蛇的移动（动画）必然需要定时器协助。定时器的时间，即象征着刷新速度，也就是难度。 10. this所在的函数在哪一个对象中，this就指向谁。单独写一个函数的时候，如果调用之前对象的this，需要备份指针（将对象的this赋值给另一个变量）。 11. JavaScript原生的键盘按下事件（keydown） 中，事件有一个keyCode属性，其值代表按下的键。其中：37—left、38—top、39—right、40—bottom。 12. 边界控制。通过判断蛇头与最大X和Y的关系，判断是否碰到边界。 13. confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。 14. window.location.reload(); 重新加载当前文档 15. window.close() 方法用于关闭浏览器窗口。 16. 与食物的碰撞检测：如果蛇头和食物坐标重叠，将蛇尾添加到body中。并重新绘制一个食物点，将之前的食物删掉。
贪吃蛇小游戏（面向对象）
08-26
贪吃蛇小游戏，基于面向对象设计理念，C#描述。
基于面向对象做的一个小游戏
05-13
这是一个基于面向对象知识写的典型的飞机大战游戏，实现了攻击移动功能。
贪吃蛇C++源码 C++面向对象实现
05-17
完全利用C++面向对象实现贪的吃蛇C++源码 另外使用了EasyX图形库图形库下载http://www.easyx.cn/
面向对象编程---掷骰子游戏
Liu_Bruce的博客
06-03 2753
最近编了一个面向编程的经典游戏案例，根据游戏的规则，设计编程的流程和类，方法，属性。这是一个比较经典和流行的面向对象编程的玩骰子的小游戏。整个游戏分为四个模块：​ ◆ 主菜单模块（main_menu.py)​ ◊ 功能：导入主程序模块，定义一个AllThatDice类, 定义一个run函数​ ◆ 主程序模块（main.py)​ ◊ 功能：程序运行主界面，游戏玩家名单注册、显示游戏的总成绩、进入游戏、退出游戏。​ playGame函数，参数为游戏名， getTable函数​
基于面向对象 来写一个简单的贪吃蛇小游戏（代码可直接用）
zero________________的博客
05-03 3460
分析一下用到的对象（这个案例的地图过于简单，可以不用创建为对象） 食物对象（food） 蛇对象（snake）游戏对象（game）1.food对象属性 ：x, y, width, height, color 方法: render 随机创建一个食物对象，输出到mup（地图）上(function () { var elements = []; // 记录上...
JS实现最简单的贪吃蛇小游戏（面向对象思想）
呵呵到天亮的博客
06-02 3066
本次练习主要是练习javaScript的面对对象思想话不多说，先看看效果图功能描述：1.小蛇在指定地图内移动，撞到边界即弹窗，显示游戏结束                  2.通过上、下、左、右四个按键，控制小蛇运动的方向                   3.随机产生“食物”，小蛇吃到食物就变长。地图再次出现食物                    4.统计分数，每吃一个食物就加一分具体封...
用python写贪吃蛇小游戏的目的
06-02
用 Python 编写贪吃蛇小游戏的目的有以下几个方面： ...总之，用 Python 编写贪吃蛇小游戏的目的是为了提高编程技能、加深对面向对象编程的理解、提高逻辑思维和设计能力，同时也可以增加趣味性和挑战性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值