I created a bullet function in this mini game where an ellipse will spawn on where the player is and move to the right. I then created a console.log command for when the ellipse goes off screen. But nothing seems to happen after multiple ellipse went off.
(The main codes that makes the bullet work is in the keyPressed function in sketch.js, the gameOn function in helpers.js, the bullets.js itself, and the off screen detection is in the checkCollision function in gameOnHelpers.js.)
(I created most of the bullet function by watching Daniel Shiffman’s space invader video but I didn’t put in the same collision detection, I just wanted to see if the array will give a feedback when it goes off screen)
(The “enemy” image is placed on top of a wall object which is a green rectangle)
Here are my codes:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Sketch</title>
<script src="p5.js"></script>
<script src="sketch.js"></script>
<script src="helpers.js"></script>
<script src="gameOnHelpers.js"></script>
<script src="bullets.js"></script>
<style>
body {
text-align: center;
background-color: grey;
}
</style>
</head>
<body>
</body>
</html>
sketch.js
var player = {};
var enemyone = {};
var enemytwo = {};
var enemythree = {};
var gameState;
var gameOverTimer;
var wall1, wall2, wall3, wallSpeed;
var score;
var bullets = [];
var show;
//preload
function preload () {
player.img = loadImage("assets/one.png");
enemyone.img = loadImage("assets/enemy1.png");
enemytwo.img = loadImage("assets/enemy2.png");
enemythree.img = loadImage("assets/enemy3.png");
}
// SETUP FUNCTION - Runs once at beginning of program
function setup() {
createCanvas(800, 600);
initialize();
}
// DRAW FUNCTION - Loops @ 60FPS by default
function draw() {
if (gameState == "start") {
drawStartScreen();
} else if (gameState == "gameOn") {
gameOn();
} else {
gameOver();
}
}
function mousePressed() {
if (gameState == "start") {
gameState = "gameOn";
}
}
function keyPressed() {
if (keyCode == 32) {
console.log("New Bullet");
var bullet = new Bullet(player.x, player.y);
bullets.push(bullet);
}
}
helpers.js:
function initialize() {
player.x = 100;
player.y = height / 2;
gameState = "start";
wall1 = {
x: 500,
y: random(50, height - 150),
w: 68,
h: 64,
};
wall2 = {
x: 800,
y: random(70, height - 150),
w: 68,
h: 64,
};
wall3 = {
x: 1100,
y: random(90, height - 150),
w: 68,
h: 64,
};
wallSpeed = 0.25;
score = 0;
}
function drawStartScreen() {
background(0);
noStroke();
fill(0, 255, 0);
rect(0, 0, width, 50);
rect(0, height - 50, width, 50);
image(player.img, player.x, player.y);
fill(255);
textSize(42);
text("CLICK TO START!", width / 2, height / 2);
}
function gameOn() {
score++;
movePlayer();
moveEnemy();
checkCollision();
drawGameOn();
for (var i = 0; i < bullets.length; i++) {
bullets[i].show();
bullets[i].move();
}
}
function gameOver() {
if (frameCount - gameOverTimer < 120) {
fill(255);
text("game over", width / 2, height / 2);
} else {
initialize();
}
}
gameonhelpers.js:
function movePlayer() {
if (keyIsDown(UP_ARROW)) {
player.y -= 5;
} else if (keyIsDown(DOWN_ARROW)) {
player.y += 5;
}
}
function moveEnemy() {
wall1.x -= wallSpeed;
if (wall1.x + wall1.w < 0) {
wall1.x = width;
wall1.y = random(50, height - 150);
}
wall2.x -= wallSpeed;
if (wall2.x + wall1.w < 0) {
wall2.x = width;
wall2.y = random(70, height - 150);
}
wall3.x -= wallSpeed;
if (wall3.x + wall1.w < 0) {
wall3.x = width;
wall3.y = random(90, height - 150);
}
}
function checkCollision() {
if (player.y < 50 || player.y + 41 > height - 50) {
gameState = "gameOver";
gameOverTimer = frameCount;
}
if (player.x > wall1.x && player.x < wall1.x + wall1.w && player.y > wall1.y && player.y < wall1.y + wall1.h) {
gameState = "gameOver";
gameOverTimer = frameCount;
}
if (player.x > wall2.x && player.x < wall2.x + wall2.w && player.y > wall2.y && player.y < wall2.y + wall2.h) {
gameState = "gameOver";
gameOverTimer = frameCount;
}
if (player.x > wall3.x && player.x < wall3.x + wall3.w && player.y > wall3.y && player.y < wall3.y + wall3.h) {
gameState = "gameOver";
gameOverTimer = frameCount;
}
if (this.x > width) {
console.log("out of range");
}
}
function drawGameOn() {
background(0);
noStroke();
fill(0, 255, 0);
rect(0, 0, width, 50);
rect(0, height - 50, width, 50);
image(enemyone.img, wall1.x, wall1.y, wall1.w, wall1.h);
image(enemytwo.img, wall2.x, wall2.y, wall2.w, wall2.h);
image(enemythree.img, wall3.x, wall3.y, wall3.w, wall3.h);
image(player.img, player.x, player.y);
fill(255);
text("Score: " + score, width / 2, height - 10);
}
bullets.js
function Bullet(x, y) {
this.x = x;
this.y = y;
this.r = 3;
// this.toDelete = false;
this.show = function () {
noStroke();
fill(225, 225, 10);
ellipse(this.x, this.y, this.r * 2, this.r * 2);
}
//
// this.range = function () {
// this.toDelete = true;
// }
this.move = function () {
this.x = this.x + 1;
}
}
(I have the images stored in the asset folder in this same project)