Question

我有它，所以当你（PaintBrush）点击完成时，一切都会清除，并出现一个按钮。单击该按钮时，它将从第二级开始，在此处创建一个新画布。我添加了一些代码，以便在单击按钮时删除旧画布，然后创建新画布。但是，这需要画布具有id。我如何得到这段代码：

canvas: document.createElement("canvas"),

还包括一个id？我不能说var canvas =等等等等 canvas.id =“canvas”; 因为我设置它的方式。

如果你需要知道，删除代码就是这个：

Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
    if(this[i] && this[i].parentElement) {
        this[i].parentElement.removeChild(this[i]);
    }
}
}

并在按钮“点击”功能区域中我将其放入删除：

document.getElementById("canvas").remove();

请帮忙！在此先感谢！

编辑：这是一些额外的代码来帮助，它是PaintBrush完成时发生的事情：

else if (PaintBrush.crashWith(Finish)) {
  PaintBrush.y = 50;
var button = document.createElement("button");
button.innerHTML = "Level 3";
button.id = "button-2";  // add the id to the button
document.body.appendChild(button); // append to body
GameArena2.clear();
GameArena2.stop();
button.addEventListener ("click", function() {
startGame2();
document.getElement("canvas").remove();
document.getElementById("button-2").remove();
});

编辑2：游戏画布代码：

var GameArena2 = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 1280;
    this.canvas.height = 480;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea2, 20);
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop: function() {
    clearInterval(this.interval);
  },
  drawGameOver: function() {
    ctx2 = GameArena2.context;
        ctx2.fillStyle = "rgba(0,0,0,"+fader +")";
        ctx2.fillRect(0,0,GameArena2.width,GameArena2.height);
        drawStatic(fader/2);
        fader += .1 * 1/fps
        ctx2.fillStyle = "rgba(255,255,255," + fader + ")";
        ctx2.font = "72px sans-serif";
        ctx2.fillText("GAME OVER",GameArena2.width/2 - 220,GameArena2.height/2);
    }
}
function everyinterval(n) {
  if ((GameArena.frameNo / n) % 1 == 0) {
    return true;
  }
  else if ((GameArena.frameNo / n) % 1 == 0) {
    return true;
  }
  return false;
}

Answer 1

我认为最好的方法是创建一个这样的静态函数：

＆＃13;

function createElementOnDom (type,id) {
   var element=document.createElement(type);
   element.id=id;
   return element;
}

console.log(createElementOnDom('CANVAS','myId'));

＆＃13;

因此，您只需创建画布，使用您需要的简单单行函数调用将其特定ID添加到其中。

我只知道在jQuery上直接做这个的方法，你不想使用它。

只需要这样做：

function createElementOnDom (type,id) {
       var element=document.createElement(type);
       element.id=id;
       return element;
    }

var GameArena2 = {
  canvas: createElementOnDom('CANVAS','myId'),

Answer 2

简单！只需在创建GameArena2对象后立即分配。

var GameArena2 = {
    canvas: document.createElement("canvas"),
    start: function() { 
      ...
      ...        
}

// give id to a canvas
GameArena2.canvas.id = "GameArena2";

function everyinterval(n) {
    if ((GameArena.frameNo / n) % 1 == 0) { 
        ...
        ...        
}

将id赋给画布

2 个答案: