Creating a game with JavaScript and Processing.js part 3
The next method is a bit lengthy and it involves all collision tests as well as some image visualizations. First, we loop for each star the player has launched and if any of the stars is behind the left edge of the screen, we remove it and continue with the next star. If it is not, we move it to the right, display it and check if it has hit the enemy. If it indeed hit the enemy – we reduce the enemy’s lives by 1 and empty all player stars.
After that, we display the player and check if he has collided with the enemy – if it is we call the onLifeLost() method. In the end, we move the enemy’s stars by a semi-random number and change their size randomly and check if the player has collided with a star of the enemy – if it has – we call the onLifeLost() method again.
CosmicFighter.collisionTest = function() {
//check for collision
for (var i = 0, x = data.playerStars.length; i < x; i++) {
if (data.playerStars[i]) {
if (data.playerStars[i] && data.playerStars[i][0] < 0) {
delete data.playerStars[i];
break;
}
data.playerStars[i][0] -= data.playerStarSpeed;
image(data.star, data.playerStars[i][0], data.playerStars[i][1], 25, 25);
if ((data.playerStars[i][1] < data.dinoY + data.playerSize && data.playerStars[i][1] > data.dinoY) &&
(data.playerStars[i][0] <= data.dinoX + data.playerSize && data.playerStars[i][0] >= data.dinoX)
) { //if your star hits dino
data.dinoLives--;
data.playerStars = [];
data.playerStars.splice(i - 1, 1);
}
}
}
data.playerStars.sort();
image(data.player, data.playerX, data.playerY, data.playerSize, data.playerSize);
if ((((data.dinoX + data.playerSize >= data.playerX && data.dinoX + data.playerSize <= data.playerX + data.playerSize) ||
(data.dinoX > data.playerX+ data.playerSize && data.dinoX + data.playerSize <=
data.playerX + data.playerSize)) && (data.dinoY > data.playerY && data.dinoY < data.playerY + data.playerSize)) ||
((data.dinoY + data.playerSize <= data.playerY + data.playerSize && data.dinoY + data.playerSize > data.playerY)
&& (data.dinoX + data.playerSize >= data.playerX && data.dinoX + data.playerSize <= data.playerX + data.playerSize ))) {
this.onLifeLost();
}
//dino shoots stars
for (var i = 0, x = (Math.random() * data.dinoTotalStars) + 1; i < x ;i++) {
data.starRandomizer = Math.random() * 100;
if (data.starX+data.dinoX+data.starRandomizer > data.width) {
data.starX = 0;
}
if (data.dinoY + data.starRandomizer > data.height) {
data.starY = 0;
}
data.starX++;
data.starY++;
data.dinoStarsSize[i] = Math.random() * data.dinoSizeOfStars;
data.dinoStarsPos[i] = [data.starX+data.dinoX+data.starRandomizer, data.dinoY + data.starRandomizer];
image(data.star, data.dinoStarsPos[i][0], data.dinoStarsPos[i][1],data.dinoStarsSize[i], data.dinoStarsSize[i]);
if (data.dinoStarsPos[i][0] >= data.playerX && data.dinoStarsPos[i][0] <= data.playerX + data.playerSize
&& data.dinoStarsPos[i][1] > data.playerY && data.dinoStarsPos[i][1] < data.playerY + data.playerSize) {
this.onLifeLost();
}
}
}
Afterwards, we define the game menu (when a game has finished or the user has just entered the game) which displays some static text and the results so far.
In the end, we define the draw function which will be called all the time (like what setInterval() does) in which if the game is running, we will initialize the CosmicFighter object and if it is not running – we display the menu. We also check if any of the buttons are clicked and perform the appropriate action, if clicked.
draw = function() {
if (gameOver !== true) {
background(1, 0, 0.5);
// add planet and path
image(planet, 150,100, 400, 400);
var game = new CosmicFighter();
}
else {
CosmicFighter.gameSetup();
}
};
void mousePressed() {
if (mouseX < 100 && mouseY >= 0 && mouseY < 50) { gameOver = false; //restart lives lives = 7; // must be +1 dinoLives = 12; this.onLifeLost(); } //easy button click if (mouseX > width - 75 && mouseY > height - 75) {
difficulty = 'easy';
}
//hard button click
if (mouseX > width - 150 && mouseX < width - 75 && mouseY > height - 75) {
difficulty = "hard";
}
}
Conclusion
By now, you should have some idea of how to create a game relying either on the HTML5 Canvas API or both canvas and Processing.js
Processing.js may transform the low-level canvas drawing to a higher level but both are a great addition to the Web and can be seen as decent substitutes of the Flash snippets and even games we could find before all over the Internet.
Tutorial Categories:
