What is the most efficient way to modify the variables for numerous images within a JavaScript canvas?

Question

What is the most efficient way to modify the variables for numerous images within a JavaScript canvas?

I'm a newcomer to using Javascript in a canvas, and coding with javascript overall.

My primary goal is the following:

Create numerous fireballs (images) that spawn randomly with each having a fixed y-value and random x-value.
The fireballs should then fall at various speeds determined by individual variables.

I have managed to implement the random x positions and locked y values. However, I am struggling with finding a way to assign separate speed variables for each new image to control their falling rate. It would be ideal if this could be applied to every single fireball individually like so:

fireBallSpeed = 10;
fireBallTop = 0;

if (randomSpawn == 1){
    fireBallTop += fireBallSpeed;
    fireBall.style.top = fireBallTop + 'px';
    ctx.drawImage(fireBall, randomX, fireBallTop, 50, 50);
}

javascript html5-canvas

Answer 1

Answer №1

To keep track of each fireball, store them in an array and iterate through the array to update their positions.

let fireballs = []
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

function gameLoop() {
  // Clear the canvas
  ctx.clearRect(0, 0, 800, 300)

  // Update the position of each fireball in the array
  fireballs.forEach(fireball => {
    ctx.fillRect(fireball.x, fireball.y, 10, 10)
    // Update the position for the next frame based on speed
    fireball.y += fireball.speed
  })

  // Request another frame
  requestAnimationFrame(gameLoop)
}

function gameInit() {
  // Create 5 fireballs
  for (let i = 0; i < 5; i++) {
    fireballs.push({ x: Math.random() * 280, y: 5, speed: Math.random() * 2 })
  }
}

// Initialize the game
gameInit()

// Start the game loop
// This function is used for drawing, setInterval should handle logic
// For simplicity, using this function for both
requestAnimationFrame(gameLoop)

<canvas width="800" height="300"></canvas>

Answer 2

To keep track of each fireball, store them in an array and iterate through the array to update their positions.

let fireballs = []
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

function gameLoop() {
  // Clear the canvas
  ctx.clearRect(0, 0, 800, 300)

  // Update the position of each fireball in the array
  fireballs.forEach(fireball => {
    ctx.fillRect(fireball.x, fireball.y, 10, 10)
    // Update the position for the next frame based on speed
    fireball.y += fireball.speed
  })

  // Request another frame
  requestAnimationFrame(gameLoop)
}

function gameInit() {
  // Create 5 fireballs
  for (let i = 0; i < 5; i++) {
    fireballs.push({ x: Math.random() * 280, y: 5, speed: Math.random() * 2 })
  }
}

// Initialize the game
gameInit()

// Start the game loop
// This function is used for drawing, setInterval should handle logic
// For simplicity, using this function for both
requestAnimationFrame(gameLoop)

<canvas width="800" height="300"></canvas>

What is the most efficient way to modify the variables for numerous images within a JavaScript canvas?

Answer №1

Similar questions

Type for the key in array.reduce that is not specific or unique

Troubles with Promise.all and json() in JavaScript causing errors being logged as "invalid function"

Warning on React component listing due to key issue originating from the parent component

What is the procedure for updating a state property's value?

Retrieve the complete content of a web page, including all HTML and JavaScript elements

Leveraging viewbag information in combination with jQuery JSON techniques

What is the best way to fetch posts that contain an array of user IDs?

Importing JSON data into a Backbone.js model

Attempting to use Vue.js for playing MP3 files

Could you please clarify the specific functionality of this script?

The 'export '__platform_browser_private__' could not be located within the '@angular/platform-browser' module

Guide to dynamically assigning the id attribute of an HTML element using angularjs (1.x)

Having trouble accessing the property 'top' of an undefined object in your Ruby on Rails project?

Is there a way to stop Bootstrap from automatically bolding the font?

Is it possible to trigger a keydown event using a forEach loop?

Maintain cookie persistence beyond browser shutdown

Trouble getting CSS to load in Webpack

Incorporating a new dropdown menu above the content of a pre-existing jQuery accordion dropdown, causing the content to shift downwards

Turn off the incorrect TypeScript error detection

What is the maximum character limit for jQuery?