Generate projectiles within a game periodically

Question

Generate projectiles within a game periodically

I've created a game that features a main character and enemy soldiers who shoot back. I'm facing an issue where only one enemy soldier shoots at intervals, even though I initially used setInterval for both of them. Any suggestions on how to fix this problem would be greatly appreciated!

            function enemies() {
        if (enemy_soldiers.length == 0) {
            level += 0.2;
            for (var i = 0; i<(1 + Math.floor(Math.round(level))); i++) {
                var gx = 1450
                var gy = getRandom(430, 630);
                enemy_soldiers.push({
                    x: gx,
                    y: gy,
                    l: gl,
                    d: getRandom(350, 600),
                    shooting: false,
                    interval: setInterval (function() {enemy.shooting = true;},fire_rate),
                    shoot: function() {
                        enemy_bullets.push({
                            x: enemy.x+40,
                            y: enemy.y+87,
                            vel: 10,
                    });
                    }
                });
            }
        }
        var enemy;
        gctx.clearRect(0, 0, 1400, 800);
        for (var i in enemy_soldiers) {
            enemy = enemy_soldiers[i];
            drawenemy(enemy.x, enemy.y, enemy.l);
            //ai
            if (distance(enemy.x, enemy.y, cx, cy) >= enemy.d && enemy.x>cx) {
                enemy.x-=vel;
            }
            else if (distance(enemy.x, enemy.y, cx, cy) >= enemy.d && enemy.x<cx) {
                enemy.x+=vel;
            }
            if (distance(enemy.x, enemy.y, cx, cy) <= 600) {
                if (enemy.shooting == true) {
                    enemy.shoot(enemy.x,enemy.y);
                    enemy.shooting = false;
                }
                gbctx.clearRect(0, 0, 1400, 800);
                for (var j in enemy_bullets) {
                    enemy_bullet = enemy_bullets[j];
                    enemy_bullet.x -= enemy_bullet.vel;
                if (enemy_bullet.x > 1400 || enemy_bullet.x < -5 || enemy_bullet.y > 800 || enemy_bullet.y < -5) {
                    enemy_bullets.splice(j,1);
                }
                drawEnemyBullet(enemy_bullet.x, enemy_bullet.y);
            }
        }
    }}

javascript arrays object

Answer 1

Answer №1

This method utilizes the Date.now() function to retrieve the current time in milliseconds. Each enemy is able to determine their next firing time independently, allowing for varying shot intervals.

A graphic has been included to visualize when enemies are firing, but it can be easily modified to use raycasting or projectile particle spawning instead.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: black;
}

canvas {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
border: solid 1px white;
border-radius: 1px;
}
</style>
</head>

<body>
<canvas id="canvas"></canvas>
<script type="application/javascript">

// Enemy constructor
function Enemy(x,y) {
this.x = x;
this.y = y;
this.isFiring = false;
this.fireDelay = (500 + Math.random() * 500) | 0; // Time between shots
this.lastFired = Date.now(); // Last time at which the enemy fired
}

/*
Enemy prototype
(All objects created using the constructor share these properties)

E.G.

var e1 = new Enemy(10,0);
var e2 = new Enemy(20,0);

if (e1.__proto__ === e2.__proto__) {
console.log("Match");
}

prints "Match"
*/
Enemy.prototype = {
WIDTH: 10,
HEIGHT: 20,

FIRE_DURATION: 100, // Amount of time 'fire' graphic is shown
FIRE_WIDTH: 10,
FIRE_HEIGHT: 10,

update: function() {
// If current time - time when I last fired > the amount of time between shots
if (Date.now() - this.lastFired > this.fireDelay) {
this.lastFired = Date.now();
this.isFiring = true;

// If you were using projectile particles, this is where you would spawn one
}

if (this.isFiring && Date.now() - this.lastFired > this.FIRE_DURATION) {
this.isFiring = false;
}
},

render: function(ctx) {
ctx.fillStyle = "darkred";
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.beginPath();

ctx.rect(
this.x,
this.y,
this.WIDTH,
this.HEIGHT
);

ctx.fill();
ctx.stroke();

if (this.isFiring) {
ctx.fillStyle = "yellow";
ctx.strokeStyle = "darkyellow";
ctx.lineWidth = 3;
ctx.beginPath();

ctx.rect(
this.x + this.WIDTH,
this.y + this.HEIGHT * 0.5 - this.FIRE_HEIGHT * 0.5,
this.FIRE_WIDTH,
this.FIRE_HEIGHT
);

ctx.fill();
ctx.stroke();
}
}
};

var canvasWidth = 180;
var canvasHeight = 160;
var canvas = null;
var ctx = null;

var enemies = [];

window.onload = function() {
canvas = document.getElementById("canvas");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
ctx = canvas.getContext("2d");

for (var i = 0; i < 5; ++i) {
enemies[i] = new Enemy(20 + i * 3,10 + i * 30);
}

loop();
}

function loop() {
// Update
for (var i = 0; i < enemies.length; ++i) {
enemies[i].update();
}

// Render
ctx.fillStyle = "gray";
ctx.fillRect(0,0,canvasWidth,canvasHeight);

for (var i = 0; i < enemies.length; ++i) {
enemies[i].render(ctx);
}

//
requestAnimationFrame(loop);
}

</script>
</body>
</html>

Answer 2

This method utilizes the Date.now() function to retrieve the current time in milliseconds. Each enemy is able to determine their next firing time independently, allowing for varying shot intervals.

A graphic has been included to visualize when enemies are firing, but it can be easily modified to use raycasting or projectile particle spawning instead.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: black;
}

canvas {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
border: solid 1px white;
border-radius: 1px;
}
</style>
</head>

<body>
<canvas id="canvas"></canvas>
<script type="application/javascript">

// Enemy constructor
function Enemy(x,y) {
this.x = x;
this.y = y;
this.isFiring = false;
this.fireDelay = (500 + Math.random() * 500) | 0; // Time between shots
this.lastFired = Date.now(); // Last time at which the enemy fired
}

/*
Enemy prototype
(All objects created using the constructor share these properties)

E.G.

var e1 = new Enemy(10,0);
var e2 = new Enemy(20,0);

if (e1.__proto__ === e2.__proto__) {
console.log("Match");
}

prints "Match"
*/
Enemy.prototype = {
WIDTH: 10,
HEIGHT: 20,

FIRE_DURATION: 100, // Amount of time 'fire' graphic is shown
FIRE_WIDTH: 10,
FIRE_HEIGHT: 10,

update: function() {
// If current time - time when I last fired > the amount of time between shots
if (Date.now() - this.lastFired > this.fireDelay) {
this.lastFired = Date.now();
this.isFiring = true;

// If you were using projectile particles, this is where you would spawn one
}

if (this.isFiring && Date.now() - this.lastFired > this.FIRE_DURATION) {
this.isFiring = false;
}
},

render: function(ctx) {
ctx.fillStyle = "darkred";
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.beginPath();

ctx.rect(
this.x,
this.y,
this.WIDTH,
this.HEIGHT
);

ctx.fill();
ctx.stroke();

if (this.isFiring) {
ctx.fillStyle = "yellow";
ctx.strokeStyle = "darkyellow";
ctx.lineWidth = 3;
ctx.beginPath();

ctx.rect(
this.x + this.WIDTH,
this.y + this.HEIGHT * 0.5 - this.FIRE_HEIGHT * 0.5,
this.FIRE_WIDTH,
this.FIRE_HEIGHT
);

ctx.fill();
ctx.stroke();
}
}
};

var canvasWidth = 180;
var canvasHeight = 160;
var canvas = null;
var ctx = null;

var enemies = [];

window.onload = function() {
canvas = document.getElementById("canvas");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
ctx = canvas.getContext("2d");

for (var i = 0; i < 5; ++i) {
enemies[i] = new Enemy(20 + i * 3,10 + i * 30);
}

loop();
}

function loop() {
// Update
for (var i = 0; i < enemies.length; ++i) {
enemies[i].update();
}

// Render
ctx.fillStyle = "gray";
ctx.fillRect(0,0,canvasWidth,canvasHeight);

for (var i = 0; i < enemies.length; ++i) {
enemies[i].render(ctx);
}

//
requestAnimationFrame(loop);
}

</script>
</body>
</html>

Generate projectiles within a game periodically

Answer №1

Similar questions

The issue with Node.js router failing to process delete requests

The supertest request body cannot be found

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

Make sure to execute the fire directive only when ng-repeat has completed

Adjusting ES2015 Map to accommodate the expected functionality

Managing various dropdown select options in pure JavaScript

Is there a way to change the format of the date "Wed Jan 01 2020 00:00:00 GMT+0530 (India Standard Time)" to JAN 01, 2020 in JavaScript?

The function 'find' cannot be invoked on an undefined object

Should one consider using requirejs to enhance individual pages instead of relying solely on vanilla JavaScript applications?

How to manage form submissions in Vue.js using inputs within child components

Sort and incorporate elements by multiple strings present in an array

What is the best way to fetch HTML content using JavaScript?

What is the best way to create an animated, step-by-step drawing of an SVG path

Information displays instantly in the initial milliseconds

What is preventing the function from successfully compiling text from various files that are uploaded using the HTML5 file reader into an array?

Using "array_agg" in a "having clause" with Sequelize

Deliver real-time updates directly to clients using Django Channels and Websockets

Custom palette in Material UI design palette allows users to create

Prisma Hack: excluding properties in type generation

Utilizing PHP and MySQL to link an array of values to a single value in a database record