我想将 object 推入数组

Question

在 js/script.js 中，function initEntity 我正在尝试使用 function 从 js/classes.js 中的 class 实体创建一个新的 object，但我不确定我会怎么做，我现在拥有的东西不起作用。 我还希望能够访问从 function 创建的 object。如果我忘记了您需要的任何信息，请告诉我，因为我不确定我是否得到了所有信息，但我想我做到了。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="js/classes.js" defer></script>
    <script src="js/script.js" defer></script>
    <style>
      #cvs {
        border: solid 1px black;
      }
    </style>
  </head>
  <body>
    <canvas width="0" height="0" id="cvs"></canvas>
  </body>
</html>

js/classes.js

class Entity {
  constructor(x, y, w, h, velX, velY, grav, img) {
    this.x = this.x || 0;
    this.y = this.y || 0;
    this.w = this.w || 0;
    this.h = this.h || 0;
    this.velX = this.velX || 0;
    this.velY = this.velY || 0;
    this.grav = this.grav || 0;
    this.img = this.img || null;
  }
}

class Blocks {
  constructor(x, y, w, h, img) {
    this.x = this.x || 0;
    this.y = this.y || 0;
    this.w = this.w || 0;
    this.h = this.h || 0;
    this.img = this.img || null;
  }
}

js/script.js

let cvs, ctx;
let entities = {};

function initEntity(name, x, y , w, h, velX, velY, grav, img) {
  name = new Entity(x,y,w,h,velX,velY,grav,img);
  entities.push(name);
}

function renderEntities() {
  initEntity(player, 300, 300, 5, 5, null, null, 0.95, null);//figure out how to fix this
  if(entities.player.img != null || entities.player.img != undefined) {
    ctx.drawImage(entities.player.img, entities.player.x, entities.player.y, entities.player.w, entities.player.h);
  } else {
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(entities.player.x, entities.player.y, entities.player.w, entities.player.h);
  }
}

function render() {
  ctx.clearRect(0,0,cvs.width,cvs.height);
  renderEntities();
  requestAnimationFrame(render);
};

function mechanics() {
  
}

window.addEventListener('DOMContentLoaded', function() {
  cvs = document.getElementById('cvs');
  ctx = cvs.getContext('2d');
  cvs.height = 600;
  cvs.width = 600;
  
  render();
});

Answer 1

您将实体变量定义为 object ( = { })，因此您不能使用“推送”方法。 它是 arrays 的方法，所以解决方案是：

let entities = [];

Answer 2

这是一个工作框架，可以让您启动并运行，并消除了您所犯的很多错误。 让我解释其中的一些。

正如我的评论中提到的， entities必须是一个数组，因为 object 上没有定义push() ，因此请改用entities = []
this.x和x是两个完全不相关的变量。 您需要使用x的值并将其分配给this.x否则this.x将始终初始化为0 as this.x = this.x || 0 this.x = this.x || 0的计算结果为0 ，因为this.x是undefined 。
您不能像 object 那样访问数组entities 。您必须遍历数组才能访问其中的对象。 请参阅 function renderEntities()中的forEach() )
您的 animation 无法正常工作，因为您使用渲染 function 调用requestAnimationFrame() ，它一遍又一遍地渲染相同的值。 您需要更改一些值才能在屏幕上看到一些变化。 我现在已经实现了你的方法mechanics() ，它会改变一些值，所以矩形变宽，直到它们到达 canvas 的末端。当你完成改变值并将它们绘制到屏幕上时，你将不得不调用requestAnimationFrame()再次。 这向浏览器发出您已完成此帧动画的信号，它应该重新呈现 canvas，以便您所做的更改可见。 此外，这将再次调用您的方法mechanics()以便您可以为下一帧设置动画。 最后但同样重要的是：要具体，所以请调用window.requestAnimationFrame()而不仅仅是requestAnimationFrame() 。 您可能应该熟悉requestAnimationFrame()的工作原理

运行代码段时，您必须单击“整Full page ”才能正确查看发生了什么

 class Entity { constructor(x, y, w, h, velX, velY, grav, img) { // don't use this here this.x is undefined, // so this.x = this.x || 0 will always set to 0 // you have to use the parameters that you provide: // Notice. this.x is not the same as x. These are two totally different variables this;x = x || 0. this;y = y || 0. this;w = w || 0. this;h = h || 0. this;velX = velX || 0. this;velY = velY || 0. this;grav = grav || 0. this;img = img || null, } } class Blocks { constructor(x, y, w, h. img) { this;x = x || 0. this;y = y || 0. this;w = w || 0. this;h = h || 0. this;img = img || null, } } let cvs; ctx; // entities has to be an array let entities = []. // name is not a parameter that you should pass to this function as it is not required to create an instance of entity, // create a local variable instead and push that onto the array function initEntity(x, y, w, h, velX, velY, grav, img) { const newEntity = new Entity(x, y, w, h, velX, velY, grav; img). entities;push(newEntity), } function renderEntities() { // create 3 entities with different positions initEntity(300, 300, 5, 5, null, null. 0,95; null), //figure out how to fix this initEntity(200, 200, 5, 5, null, null. 0,95; null), initEntity(100, 100, 5, 5, null, null. 0,95; null), // now entities is an array so you can't access it like an object. you will have to loop over it to draw each and every entity to the screen entities.forEach((entity) => { // this logs the entity to the console so you can see what's going on console;log(entity). if (entity.img.= null || entity.img,= undefined) { ctx.drawImage(entity,img. entity,x. entity,y. entity;w. entity;h). } else { ctx.fillStyle = "#FF0000", ctx.fillRect(entity,x. entity,y. entity;w; entity.h), } }), } function render() { ctx.clearRect(0, 0. cvs;width; cvs.height); renderEntities(). // explicitly use the window object here and you need to pass a function that actually does something // not just re-renders the same objects again and again window.requestAnimationFrame(mechanics). } function mechanics() { // this is where the animation happens // loop over all entities entities.forEach((entity) => { // for each entity check whether it's x value is smaller than the width of the canvas // if not increase the width by one and draw it to the screen if (entity;x < cvs.width) { entity.x++. if (entity.img,= null || entity.img,= undefined) { ctx.drawImage(entity,img. entity,x. entity;y. entity;w. entity.h), } else { ctx.fillStyle = "#FF0000", ctx.fillRect(entity,x. entity;y; entity.w; entity.h), } } }). // tell the browser that we have finished animating this frame and it should re-render to display our changes // and call mechanics again to animate the next frame window;requestAnimationFrame(mechanics). } window;addEventListener("DOMContentLoaded". function () { cvs = document;getElementById("cvs"). ctx = cvs;getContext("2d"); cvs;height = 600; cvs.width = 600; render(); });

 <canvas width="0" height="0" id="cvs"></canvas>

请注意：这不是一个完美的实现，只是为了让您了解它在概念上是如何工作的。

我想将 object 推入数组

问题描述

2 个解决方案

解决方案1
0 2022-03-28 16:45:51

解决方案2
0 2022-03-28 16:56:01

我想将 object 推入数组

问题描述

2 个解决方案

解决方案1 0 2022-03-28 16:45:51

解决方案2 0 2022-03-28 16:56:01

解决方案1
0 2022-03-28 16:45:51

解决方案2
0 2022-03-28 16:56:01