JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.envyum.nl/canvas/kinetic-v4.3.3.min.js"></script>
<div id="test"></div>
CSS
* {
margin: 0px;
padding: 0px;
}
JavaScript
//Timer is used to control the amount of bullets fired
var timer = 0;
//The speed of when a bullet has to be fired
var enemyAttackSpeed = 8;
var attackSpeed = 15;
var playerBurstSpeed = 3;
var enemyShootTimer = 0;
var enemyBurstCounter = 1; // Enemies are spawned with one bullet
var enemyShootTime = 180; // The time in fps(60/enemyshoottime) before another burst shot appears from enemy
var amountOfBulletsInBurst = 5;
function refreshLoop() {
enemyShootTimer++;
//When a mousedown occurs the isFiring is set to true. In this loop it'll make the player keep firing until a mouseup event
if (isFiring == true && timer > playerBurstSpeed) {
fireBullet();
timer = 0;
}
//If there are bullets the bullets should be redrawn individually
if (bullets.length > 0) {
for (var i = 0; i < bullets.length; i++) {
bullets[i].draw(i);
}
}
//If there are enemies they should be checked
var burstTime = 10; // 10 frames between bullets, 3 per second
var needToShoot = ((enemyShootTimer % burstTime) == 0);
if (enemies.length > 0) {
for (var i = 0; i < enemies.length; i++) {
enemies[i].draw();
enemies[i].move();
if (enemyBurstCounter < amountOfBulletsInBurst && needToShoot) {
createEnemyBullet(enemies[i]);
}
if (enemies[i].bullets.length > 0) {
for (var j = 0; j < enemies[i].bullets.length; j++) {
enemies[i].bullets[j].draw(i, j);
}
}
}
if ((enemyShootTimer % enemyShootTime) == 0) {
enemyBurstCounter = 0;
} else if (needToShoot) {
enemyBurstCounter++;
}
}
cursorBoundingBox(cursor.getX(), cursor.getY());
player.draw();
timer++;
}
function youWin() {
alert('You win');
stopListeners();
}
function youLose() {
//Save the score to show on the lost screen before it's destroyed in the stopListeners function
var finishedScore = score.getScore();
stopListeners();
new Lostscreen(finishedScore);
}
function stopListeners()...