Showing posts with label quick tip. Show all posts
Showing posts with label quick tip. Show all posts

Monday, 20 June 2011

Quick Tip - HTML5 Audio for Game

Note: Audio file used in this page is non-existant. Must update this page soon.

I'll just show HTML5 Audio being used with javascript without a canvas. Using it in canvas you just include it in the javascript like normal by calling the function that plays the sound.
The JavaScript accesses the HTML5 audio, and in effect makes an <audio> element. But it's good this way, as it's less cluttered without the tags actually being there or being created.

Example:
var boingSound = new Audio("http://slashgame.net/boing.wav");
function playSound() {
 boingSound.currentTime = 0;
 boingSound.play();
}

Notice how it sets the currentTime to 0 before playing. This is because you can't play the same sound object twice without moving the time back to the start again.

Here is a use of the result of that:
---CLICK HERE---

Sunday, 19 June 2011

Quick Tip - fillText JavaScript Function - HUD

context2D.fillStyle = "white";
context2D.font = 'bold 30px sans-serif';
context2D.fillText("POINTS: "+numOfPoints, canvas.width-200, 30);
That right there is an example of drawing text to the canvas. It writes it on the top right of the canvas. That particular example is what would serve as the HUD in a game.


Here it is in practise:
(you get points for moving right and left)
Browser not compatible.
Recent versions of Firefox, Opera, Google Chrome and Safari work for this game.
If you are using Internet Explorer; Stop using it immediately before you die of idiocy.