JS MVC 游戏动态对象？

Question

我不知道如何在浏览器屏幕上将类/对象表示为图像或 div。 div 将具有属性和方法。假设我正在制作一款敌方飞船随机出现并四处移动的游戏。

那么我是否在 JQuery.append 每次创建实例时都添加一个 div 标签？如何将 div 连接/绑定到类？ 还是有更高效的 MVC 框架？

谢谢。

Answer 1

首先，MVC 不一定非常适合游戏，但理解它可以帮助您更好地处理 OOP，并且类似的东西可能是有意义的。

假设 CSS 设置背景图像，使 .spaceObject 元素绝对并默认为 0,0 并使 body 成为实际设置的宽度/高度框等...

JS 没有类。它改为使用函数构造函数。我不建议尝试模拟类。构造函数没有任何问题，当您深入了解原型等时，它们实际上具有一些不错的优势。

function BuildSpaceDiv(divID){
    var $_spaceDiv = $('<div id="'+divID+'" class="spaceObject" />').appendTo('body');

    this.move = function(x,y){
        $_spaceDiv.animate({ top:x, left:y });
    }
}

不使用 new 关键字，它就像一个函数一样工作。您使用 new 关键字来创建对象/实例（不是类/对象，即构建的图表和事物，对象和实例是可互换的术语）。

var deathSun = new BuildSpaceDiv('death_sun');

您可以根据需要创建任意数量或添加新参数来设置起始坐标等...我喜欢在我的 JS 构造函数中使用选项对象。请注意，它仍然像函数一样触发，因此如果您愿意，构建实例可能会产生副作用，并且 $_spaceDiv 变量对于每个实例都是唯一的并且是持久的。