Creating a game with JavaScript and Processing.js part 1
Публикувано: 2018-09-29 18:58:23
The game that we are going to make is a simple 2D fighting game. You have a certain number of lives and the enemy has a certain number of lives and your goal is to avoid being hit by him or his stars while shooting him with your own stars until his lives deplete. Demo and download will be included with last part.
We are going to build upon the article that I published here in PHPGang some time ago which was about creating a simple animation with Processing.js.
We only create the basics but you can edit it in any way you want – by adding levels, weapons placed on a random place on a random time that give the player different bonuses – like shooting many stars in different directions, setting a time limit for round completion and so on.
Processing.js concepts used:
Rect(xPos,yPos,width,height) –> creates a rectangle starting at x,y coordinates with a certain width and height
Text(“text”,xPos,yPos) –> draws the text in the first argument starting at certain x,y coordinates
mouseX and mouseY –> global variables that contain the current x/y coordinates of the mouse
fill(red,green,blue) -> sets the fill color for future shapes and texts
textSize(font-size) -> sets the font-size for future text
stroke(red,green,blue) -> sets the rgb color values of the strokes in shapes and text
draw() function -> similar to setInterval() but with already predefined interval. Code inside will be executed around 30 times per second.
keyPressed -> global variable. True if a key has been pressed by the user
keyCode -> global variable. Contains the special key that was pressed. For example – LEFT, RIGHT, DOWN, UP
loadImage(“IMG_PATH”) –> loads an image for future use
image(imageResource,xPos,yPos, width, height) -> displays an image starting at the specified x,y coordinates with a particular width and height.
You can use loadImage(“IMG_PATH”) as imageResource
mousePressed() -> executes when the mouse has been pressed
Processing.js uses canvas so we define a script tag with type attribute set to “application/processing” and define the target (the name of the canvas where the game will run)
|
1 |
<script type="application/processing" data-processing-target="myAnimation"> |
Of course, we also have to create a canvas element with the id that we set in the target:
|
1 |
<canvas id="myAnimation"> </canvas> |
We define the object that will initialize and keep the game running
|
1 |
var CosmicFighter = function() { CosmicFighter.initialize();} |
We define the variables that our game will be using within our main game object:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
CosmicFighter.data = {
width : 750, height : 700, dinoStartX : 0, dinoStartY : height/2, xFactor : 1, yFactor : 5, starX : 0, starY : 0, star : loadImage("img/star.png"), dino : loadImage("img/bad.png"), planet : loadImage("img/planet.png"), player : loadImage("img/good.png"), heart : loadImage("img/heart.png"), heart2 : loadImage("img/heart2.png"), dinoSizeOfStars : null, heartSize : 25, playerLives : 6, gameOver : true, playerSize : 125, playerSpeedY : 10, playerStars : [], playerStarSpeed : 10, dinoLives : 12, dinoStarsSize : [], lastShotMillis : millis(), dinoStarsPos : [], message : '', playerWins : localStorage.getItem('playerWins') || 0, dinoWins : localStorage.getItem('dinoWins') || 0, difficulty : 'easy', dinoTotalStars : null, dinoXFactor : null, dinoYFactor : null, shotWaitingTime : 500 } |
Afterwards, we will be adding properties and methods to it that dictate the game’s logic.
Author Ivan Dimov
Article source: https://www.phpgang.com/creating-a-game-with-javascript-and-processing-js-part-1_1687.html
