Adding Audio and a Shape Into a Game Using JavaScript* at IUEE - ThaoH

Playing a game is fun. But knowing how to build a game, a person can even have more fun. In order to do this, one needs to be creative and patient. There are online classes that teach audience how to build games such as and You can teach yourself step by step to create your own game.

From the very beginning, you need tools to work on such as notepad++ and Google Chrome. These two software programs can be downloaded free. You need both of them to work together to execute the programming. Notepad++ is used to write your code, and then you run your code in Google Chrome. The canvas in Google Chrome will show the result of your coding. When the code is executed, the images are displayed and audio is played. 

Note:There are two things you need to pay attention to when adding audio, for example, a song. First, make sure the copyright of the song that you use can let you download and use it. Second, make sure the location of the audio and its source (name, type, file) in  the code are the same. For instance, go to the location of the song, copy it and paste it on your desktop, so they are the same.

The following is a very basic sample of how to add audio and add a shape (rectangle) in your product. Try to change the music you want and run it. You can create your own product now.

<html> \ create the canvas

<head>SAMPLE</head> \ title of the canvas

<body> \ give the dimension of the canvas 

<canvas id = "First Canvas" width = 500 height = 500 style = "border: 5px solid purple"> </canvas>  \ define its border type, color

<audio id = "myMusic" src = "ThisOleHouse.mp3" type = "audio/mpeg"> </audio>  \ declare the music source


var myMusic = document.getElementById("myMusic");  \ declare variable myMusic that for audio playing

function playMus()  \ definition variable playMus



playMus();  \ call function to play audio

function draw() {  \ create function to add image/shape to the canvas

var canvas=document.getElementById("First Canvas");  \ declare the variable canvas

var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";  \ give a color for the object, one way is to type the name of the color you want and put it in quotation marks

ctx.fillRect(36,10, 100, 100); \ "draw" an image/shape to the canvas with the dimension, the first two numbers 36 and 10 are the distance from the object to the top edge and the left edge of the canvas, the last two numbers are the dimention of the rectangle (width and length)

ctx.fillStyle = "#FF4000";  \ another way to give color for the object by check up the color codes from website In this case

                                                     \ it is orange


draw();  \ call fumction draw to add the image