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 on line classes that teach audience how to build games such as www.3schools.com and www.Codecademy.com. 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 codes, and then t you run your codes in Google Chrome. The canvas in Google Chrome will show the result of your coding. When the codes are executed, the images are displayed and audio is played.
Note:Two things you need to pay attention when adding audio, for example a song. First, make sure the copyright of the song that use can 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
<script>
var myMusic = document.getElementById("myMusic"); \ declare variable myMusic that for audio playing
function playMus() \ definition variable playMus
{
myMusic.play();
}
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 www.3schools.com. In this case
\ it is orange
}
draw(); \ call fumction draw to add the image
</script>
</body>
</html>
图标图像:
