JavaScript�Games�Using JS GUI

How to create Games �in JS GUI

• To create a Game we have to know basic things like
• Create a sprite(hero or enemies)
• Create a background.
• Create controllers to move the object (or) sprite.

​

​

​

We have to create a game like this

click here to see game

How to create Background

We can create background by using background color or background image.

You can find background in Scene section as shown below.

Select this one to change the color.

Select this one to change image

Choose which color you want

Output

According to background color you can see the output here.

Click here to see background color output

Create background image

Select this one to add background image.

Click here to select background images in gallery

Click here to see background image output

Create a sprite(Hero)

This helps to create sprites

Create a sprite(Hero or enemy)

Click on this empty space you will find different types of sprites in gallery or you can draw the arrow in editor as shown below

Click here to see how to draw bow

Move your sprite

Select this one to move your Sprite

This option helps you to move the sprite in required direction

Click here to see to bow is moving

Fix borders to your sprite

Click here to see how the bow is moving out of the screen

As you can see how the sprite is moving out of the box.

To fix this problem we have to use my sprite stay in screen (block).

In sprites drag this one to workspace

Make sure that it should be ON

Output

Use your Arrow keys to move the bow around the screen.

Click here to see output

Function (Coding Concept)

What is a Function? A function in coding is a set of instructions that you give to a computer to do a specific task.

It's like a recipe that you can use over and over again without having to write the whole recipe each time.

Imagine you have a toy robot that can do tricks. You can tell the robot to do a trick by writing instructions. One of the tricks is to spin around. Instead of telling the robot to turn right, turn right, turn right, and turn right every time you want it to spin, you can create a function called "spin."

​

Here's how it looks:

​

def spin():

turn_right()

turn_right()

turn_right()

turn_right()

​

Now, whenever you want the robot to spin, you just call the function: spin()

​

This makes it easier and faster to tell the robot to spin! Also it can be used multiple times by simply calling it.

Create Enemy

Create function called Enemyanimation as shown below.

Create Enemy

Click on this to select sprite

Drag this one to create one more sprite

Select this sprite

Click here to change player name

Create enemy

Now we have to move enemy from left to right.

Select these two options and change my sprite name to my sprite 2 by clicking on it.

Position in game panel

Imagine a graph on game panel like this.

Select x =155 pick random position for y from 7 to 107

Enemy position in game panel

Click here to see output

Now we have to our enemy towards left direction that is in x direction, let see how.

Velocity (Physics Concept)

What is Velocity? Velocity is a way to describe how fast something is moving and in which direction.

It tells you where the object is going with what speed.

Example: Imagine you are riding your bike. If you are going 10 miles per hour to the east, your velocity is 10 miles per hour east. If you turn around and go 10 miles per hour to the west, your velocity changes to 10 miles per hour west.

So, velocity = speed + direction.

Position in game panel

Imagine a graph on game panel like this.

Our x position is at 155 that is at extreme right. Now have to move to left that is negative values of x . Choose VX= -89 and VY=0

Now we have make enemy move up and down

Vx to move left and right .

Vy to move up and down.

Click here to see output

Set the sprite position

Game update

Our enemy has to appear for every 1350 millisecond.

Select this option and drag it

You can change time here

Now call Enemyanimation from game update

shoot arrow when A is pressed

Select this event to provide arrows when A is pressed

When A or space is pressed our bow has to project Arrow from it.

Projectile (Physics Concept)

What is a Projectile? A projectile is any object that is thrown or launched into the air and is only affected by gravity and air resistance. It moves along a curved path called a trajectory.

When you throw a basketball towards the hoop, the basketball is a projectile. When you throw it, it goes up in the air, moves forward, and then comes down into the hoop. The path that the basketball follows is called its trajectory.

Imagine you're at the park with a friend, and you have a ball. When you throw the ball to your friend, it goes up in the air and then comes back down into your friend's hands. The ball is a projectile, and the curved path it takes is its trajectory.

The stars (*) show the path the ball takes as it flies through the air.

​

Here's a simple drawing to help visualize it:

*

* *

* *

* *

* *

* *

–----------------

Project a Arrow from bow

Select this projectile to project Arrow from bow.

Click here to draw the arrow

Set Vx= 100 and Vy =0 to move horizontal right direction.

Destroy enemy with Arrow

• When our projectile touches enemy, it has to destroy. Let’s see how to do it.

Drag this one to work space.

Select projectile from here

Game over when hero collides with enemy

• When our enemy collide with the hero, hero has to destroy. Let’s see how to do it.

Drag this one to work space.

Select game over block from Game section

Game part 2

Create count down or life

Create score and change score

Create music for actions

Create animation for bird

How to create count down

In info you will find the score, time , life.

Drag this one to on start to set time

Create score

Drag this one to on start to create score. It is like creating a variable.

Drag this one to change the score we arrow(projectile) hits bird(enemy).

Create music

In music section you will find the music drag and drops as shown below. Drag them where ever you want.

As per our game requirement, we have to set the sound or music when arrow is released from bow and when enemy is destroyed.

Select this one to create sound .

Create music

Drag play sound block to on event and projectile over lapps.

Game end

Once the count down ends we have to end the game and show score on the screen.

Show final score

In the place of 0(zero ) drag score here.

Create Animation for Enemy

In Advanced section click on Extensions it will redirect to Extension page as shown in below. In Extensions page select animation.

Create Animation for Enemy

You will find the Animation section here

Create Animation for Enemy

• In animation drag animate block to function as shown in below.

Change mySprite to mySprite2 and interval to 100ms

Create Animation for Enemy

Click on frames it will show the below window

Switch to gallery to select different frames

Create Animation for Enemy

Select this image

Click on this to add one more frame. Like this we need to have 4 frames.

Create Animation for Enemy

• For each frame select this four images as shown below.

Create Animation for Enemy

Click on done to save the frames

Create Animation for Enemy

• Final step is to Switch ON the loop button as shown below.

www.startcoding.co.in