当前位置： 文江博客话题详情

无法向 DOM 添加元素

发布于 2024-12-18 09:31:19 字数 6343 浏览 1 评论 0原文

我正在制作一个小游戏框架，它将 Canvas 元素附加到 DIV，但是每当我向 DIV 添加元素时，最后一个元素就会被删除。

这是我的html：

<!DOCTYPE html>
<html>

    <head>

        <!-- Meta -->

        <meta charset=utf-8 />
        <title>Gimmick | Just another JS Game Framework</title>

        <!-- Styles -->

        <link rel="stylesheet" type="text/css" href="css/layout.css" />

        <!-- Scripts -->

            <!-- Framework -->

            <script type="text/javascript" src="js/gimmick/preloader.js"></script>
            <script type="text/javascript" src="js/gimmick/graphicsentity.js"></script>
            <script type="text/javascript" src="js/gimmick/entitycontainer.js"></script>
            <script type="text/javascript" src="js/gimmick/staticsprite.js"></script>

            <!-- Game -->



            <!-- Main thread -->

            <script type="text/javascript" src="js/main.js"></script> <!-- Main Thread -->

    </head>

    <body>

        <div id="game">

            <!-- Game Content is auto-generated by code -->

        </div><!-- Game -->

    </body>

主要代码：

document.addEventListener("DOMContentLoaded", function() {

    // Create new Stage
    //var mainStage = new EntityContainer("game");

    // Create some dummy DisplayObjects
    var blocks = [];
    var game = document.getElementById("game");


    for(var i = 0; i < 5; i++) {

        var block = new StaticSprite({ x: 0, y: 32 * i });
        game.appendChild(block.DOMElement)

    }

    /*window.setInterval(function() {

        for(var block in blocks) {
            blocks[block].x+= 1;
            blocks[block].y+= 1;
        }

    }, 12); */


}, false);

以及类：

/**
  * Class for drawing static sprites, like trees and blocks
  */

function StaticSprite(args) {

    // Private Fields
    var texture = new Image();
    var graphics = this.graphics;

    // Events
    function textureLoaded() {

        // Draw image
        graphics.drawImage(texture, 0, 0, texture.width, texture.height);

        // Destroy unused vars
        delete graphics;

    }

    // Constructor

    // Add event listeners
    texture.addEventListener("load", textureLoaded, false);

    // Load texture
    texture.src = "img/assets/wall1.png";

    if(args != undefined) {

        // Set local fields
        this.x = args.x || this.x;
        this.y = args.y || this.y;
        this.z = args.z || this.z;
        this.width = args.width || this.width;
        this.height = args.height || this.height;

    }

    this.width = 32;
    this.height = 32;

}

// Inherit from GraphicsEntity
StaticSprite.prototype = new GraphicsEntity();

其他类：

/**
  * Class for presentation of graphical objects.
  */

function GraphicsEntity(args) {

    // Private Fields
    var x = 0; // The X-position of the GraphicsEntity relative to it's parent container
    var y = 0; // The Y-position of the GraphicsEntity relative to it's parent container
    var z = 0; // The Z-position of the GraphicsEntity relative to it's parent container
    var width = 0; // The width of the GraphicsEntity
    var height = 0; // The height of the GraphicsEntity

    // Public Fields
    this.DOMElement = null; // Reference to the corresponding HTML Element
    this.graphics = null; // The 2D context for rendering 2D onto the element.
    this.name = ""; // The name of the GraphicsEntity

    // Properties
    // The Alpha or transparency value of the GraphicsEntity, 1 is completely opaque, 0 is completely transparent.
    Object.defineProperty(this, "alpha", {

        get: function() { return parseFloat(this.DOMElement.style.opacity); },
        set: function(value) { this.DOMElement.style.opacity = value; }

    });

    // The height of the GraphicsEntity
    Object.defineProperty(this, "height", {

        get: function() { return height; },
        set: function(value) {

            height = value; // Set internal width
            this.DOMElement.setAttribute("height", height); // Set DOMElement width

        }

    });

    // The width of the GraphicsEntity
    Object.defineProperty(this, "width", {

        get: function() { return width; },
        set: function(value) {

            width = value; // Set internal width
            this.DOMElement.setAttribute("width", width); // Set DOMElement width

        }

    });

     // The X-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "x", {

        get: function() { return x; },
        set: function(value) {

            x = value; // Set internal X-axis
            this.DOMElement.style.left = Math.ceil(x) + "px"; // Set DOMElement X-axis

        }

    });

    // The Y-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "y", {

        get: function() { return y; },
        set: function(value) {

            y = value; // Set internal Y-axis
            this.DOMElement.style.top = Math.ceil(y) + "px"; // Set DOMElement Y-axis

        }

    });

    // The Z-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "z", {

        get: function() { return z; },
        set: function(value) { this.DOMElement.style.zIndex = parseInt(value); }

    });

    // Constructor

    // Get constructor values of use default
    if(args) {

        x = args.x || x;
        y = args.y || y;
        z = args.z || z;
        width = args.width || width;
        height = args.height || height;

    }

    // Create a new canvas element
    this.DOMElement = document.createElement('canvas');

    // Set postion
    this.DOMElement.style.position = "absolute"; // Positioning style
    this.DOMElement.style.left = x + "px"; // X-axis
    this.DOMElement.style.top = y + "px";  // Y-axis
    this.DOMElement.style.zIndex = z; // Z-Axis
    this.DOMElement.width = width;
    this.DOMElement.height = height;

    // Set opacity/alpha
    this.DOMElement.style.opacity = 1;

    // Get 2d canvas context
    this.graphics = this.DOMElement.getContext('2d');

}
原文

I'm making a little game framework that appends Canvas elements to a DIV but whenever I add an element to the DIV the last element gets removed.

Here is my html:

<!DOCTYPE html>
<html>

    <head>

        <!-- Meta -->

        <meta charset=utf-8 />
        <title>Gimmick | Just another JS Game Framework</title>

        <!-- Styles -->

        <link rel="stylesheet" type="text/css" href="css/layout.css" />

        <!-- Scripts -->

            <!-- Framework -->

            <script type="text/javascript" src="js/gimmick/preloader.js"></script>
            <script type="text/javascript" src="js/gimmick/graphicsentity.js"></script>
            <script type="text/javascript" src="js/gimmick/entitycontainer.js"></script>
            <script type="text/javascript" src="js/gimmick/staticsprite.js"></script>

            <!-- Game -->



            <!-- Main thread -->

            <script type="text/javascript" src="js/main.js"></script> <!-- Main Thread -->

    </head>

    <body>

        <div id="game">

            <!-- Game Content is auto-generated by code -->

        </div><!-- Game -->

    </body>

The main code:

document.addEventListener("DOMContentLoaded", function() {

    // Create new Stage
    //var mainStage = new EntityContainer("game");

    // Create some dummy DisplayObjects
    var blocks = [];
    var game = document.getElementById("game");


    for(var i = 0; i < 5; i++) {

        var block = new StaticSprite({ x: 0, y: 32 * i });
        game.appendChild(block.DOMElement)

    }

    /*window.setInterval(function() {

        for(var block in blocks) {
            blocks[block].x+= 1;
            blocks[block].y+= 1;
        }

    }, 12); */


}, false);

And the classes:

/**
  * Class for drawing static sprites, like trees and blocks
  */

function StaticSprite(args) {

    // Private Fields
    var texture = new Image();
    var graphics = this.graphics;

    // Events
    function textureLoaded() {

        // Draw image
        graphics.drawImage(texture, 0, 0, texture.width, texture.height);

        // Destroy unused vars
        delete graphics;

    }

    // Constructor

    // Add event listeners
    texture.addEventListener("load", textureLoaded, false);

    // Load texture
    texture.src = "img/assets/wall1.png";

    if(args != undefined) {

        // Set local fields
        this.x = args.x || this.x;
        this.y = args.y || this.y;
        this.z = args.z || this.z;
        this.width = args.width || this.width;
        this.height = args.height || this.height;

    }

    this.width = 32;
    this.height = 32;

}

// Inherit from GraphicsEntity
StaticSprite.prototype = new GraphicsEntity();

Other class:

/**
  * Class for presentation of graphical objects.
  */

function GraphicsEntity(args) {

    // Private Fields
    var x = 0; // The X-position of the GraphicsEntity relative to it's parent container
    var y = 0; // The Y-position of the GraphicsEntity relative to it's parent container
    var z = 0; // The Z-position of the GraphicsEntity relative to it's parent container
    var width = 0; // The width of the GraphicsEntity
    var height = 0; // The height of the GraphicsEntity

    // Public Fields
    this.DOMElement = null; // Reference to the corresponding HTML Element
    this.graphics = null; // The 2D context for rendering 2D onto the element.
    this.name = ""; // The name of the GraphicsEntity

    // Properties
    // The Alpha or transparency value of the GraphicsEntity, 1 is completely opaque, 0 is completely transparent.
    Object.defineProperty(this, "alpha", {

        get: function() { return parseFloat(this.DOMElement.style.opacity); },
        set: function(value) { this.DOMElement.style.opacity = value; }

    });

    // The height of the GraphicsEntity
    Object.defineProperty(this, "height", {

        get: function() { return height; },
        set: function(value) {

            height = value; // Set internal width
            this.DOMElement.setAttribute("height", height); // Set DOMElement width

        }

    });

    // The width of the GraphicsEntity
    Object.defineProperty(this, "width", {

        get: function() { return width; },
        set: function(value) {

            width = value; // Set internal width
            this.DOMElement.setAttribute("width", width); // Set DOMElement width

        }

    });

     // The X-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "x", {

        get: function() { return x; },
        set: function(value) {

            x = value; // Set internal X-axis
            this.DOMElement.style.left = Math.ceil(x) + "px"; // Set DOMElement X-axis

        }

    });

    // The Y-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "y", {

        get: function() { return y; },
        set: function(value) {

            y = value; // Set internal Y-axis
            this.DOMElement.style.top = Math.ceil(y) + "px"; // Set DOMElement Y-axis

        }

    });

    // The Z-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "z", {

        get: function() { return z; },
        set: function(value) { this.DOMElement.style.zIndex = parseInt(value); }

    });

    // Constructor

    // Get constructor values of use default
    if(args) {

        x = args.x || x;
        y = args.y || y;
        z = args.z || z;
        width = args.width || width;
        height = args.height || height;

    }

    // Create a new canvas element
    this.DOMElement = document.createElement('canvas');

    // Set postion
    this.DOMElement.style.position = "absolute"; // Positioning style
    this.DOMElement.style.left = x + "px"; // X-axis
    this.DOMElement.style.top = y + "px";  // Y-axis
    this.DOMElement.style.zIndex = z; // Z-Axis
    this.DOMElement.width = width;
    this.DOMElement.height = height;

    // Set opacity/alpha
    this.DOMElement.style.opacity = 1;

    // Get 2d canvas context
    this.graphics = this.DOMElement.getContext('2d');

}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

雪化雨蝶 2024-12-25 09:31:19

首先看一下：

StaticSprite.prototype = new GraphicsEntity();

稍后在 GraphicsEntity() 中：

this.DOMElement = document.createElement('canvas');

block.DOMElement 将始终是相同的元素，在 GraphicsEntity() 中创建的画布元素并分配给StaticSprite 的原型。

1st take a look at this:

StaticSprite.prototype = new GraphicsEntity();

later in GraphicsEntity():

this.DOMElement = document.createElement('canvas');

block.DOMElement will always be the same element, the canvas-element created in GraphicsEntity() and assigned to the prototype of StaticSprite.

回复 原文
~没有更多了~

关于作者

舞袖。长

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

池予

文章 0 评论 0

仲春光

文章 0 评论 0

seven

文章 0 评论 0

愿与i

文章 0 评论 0

燃烧我的卡路李先生

文章 0 评论 0

蒗幽

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文