June 29, 2015 3:41 pm

Creating a game with JavaScript and Processing.js part 1

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.

Creating a game with JavaScript and Processing.js part 1

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.

Creating a game with JavaScript and Processing.js part 2

Creating a game with JavaScript and Processing.js part 3

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)

<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:

<canvas id="myAnimation"> </canvas>

We define the object that will initialize and keep the game running

var CosmicFighter = function() {    CosmicFighter.initialize();}

We define the variables that our game will be using within our main game object:

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

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *