JavaScript:Grid Attack - HTML5 game
/*global console: false, window: false, document: false*
/*jslint browser: true*/
window.onload = function () {
"use strict";
// Getting the media elements
var video = document.getElementById('video');
var audio = document.getElementById('audio');
// Getting the buttons
var playOrPauseVideoButton = document
.getElementById("playOrPauseVideoButton");
var playOrPauseAudioButton = document
.getElementById("playOrPauseAudioButton");
var stopVideoButton = document
.getElementById("stopVideoButton");
var stopAudioButton = document
.getElementById("stopAudioButton");
var increaseVideoVolumeButton = document
.getElementById("increaseVideoVolumeButton");
var increaseAudioVolumeButton = document
.getElementById("increaseAudioVolumeButton");
var decreaseVideoVolumeButton = document
.getElementById("decreaseVideoVolumeButton");
var decreaseAudioVolumeButton = document
.getElementById("decreaseAudioVolumeButton");
var syncPlayOrPauseButtonWithMedia = function (mediaElement, button) {
/* Set the button's innerHTML to 'Pause' or 'Play' depending on if
* the media element is paused or not.*/
if (mediaElement.paused)
{
button.innerHTML = "Play";
}
else
{
button.innerHTML = "Pause";
}
};
var mediaEventHandler = function (event) {
console.log("mediaEventHandler called with event:", event);
/*
* Now that a media element is playing or just paused (perhaps
* due to being stopped) set the appropriate button's content to
* 'Pause' or to 'Play' by calling
* syncPlayOrPauseButtonWithMedia with the correct arguments. Remember
* both the keyword 'this' and the 'event.target' object refer to
* whatever HTML Media Element called the mediaEventHandler
* function by triggering a playing, pause, or ended event.
*/
if (event.target.id== "video"){
syncPlayOrPauseButtonWithMedia
(event.target, playOrPauseVideoButton);
}
else if (event.target.id=="audio")
syncPlayOrPauseButtonWithMedia
(event.target,playOrPauseAudioButton);
};
/*
* Use addEventListener to bind video and audio elements to call our
* mediaEventHandler(event) function in reaction to 'play', 'pause', and 'ended' events.
*/
audio.addEventListener("play", mediaEventHandler, false);
audio.addEventListener("pause", mediaEventHandler, false);
audio.addEventListener("ended", mediaEventHandler, false);
video.addEventListener("play", mediaEventHandler, false);
video.addEventListener("pause", mediaEventHandler, false);
video.addEventListener("ended", mediaEventHandler, false);
playOrPauseVideoButton.onclick = function (event) {
// play or pause the video
if (event.target.innerHTML =="Play") {
video.pause();
// video.firstChild.nodeValue = "play";
} else {
video.play();
// event.target.innerHTML ="pause"
// video.firstChild.nodeValue = "pause";
}
};
playOrPauseAudioButton.onclick = function (event) {
// play or pause the audio
// if (!audio.paused)
if (event.target.innerHTML =="Play")
{
audio.pause();
// event.target.innerHTML ="play"
// audio.firstChild.nodeValue = "play";
} else {
audio.play();
// event.target.innerHTML ="pause"
// audio.firstChild.nodeValue = "pause";
}
};
var stop = function (mediaElement) {
mediaElement.pause();
mediaElement.currentTime = 0;
};
stopVideoButton.onclick = function (event) {
// event.target.innerHTML ="stop";
stop(video);
};
stopAudioButton.onclick = function (event) {
// event.target.innerHTML ="stop";
stop(audio);
};
var increaseVolume = function (mediaElement) {
/*
* Increase the volume property of the media element ONLY when it
* is safe (don't go higher than a volume of 1.0 because that will cause
* an error) and set the volume to 1.0 if the current volume is too
* close to 1.0
*/
if (mediaElement.volume<=0.9)
mediaElement.volume+=0.1;
else
mediaElement.volume =1.0;
};
increaseVideoVolumeButton.onclick = function (event) {
increaseVolume(video);
};
increaseAudioVolumeButton.onclick = function (event) {
increaseVolume(audio);
};
var decreaseVolume = function (mediaElement) {
/*
* Decrease the volume property of the media element ONLY when it
* is safe (don not go lower than a volume of 0.0 because that will cause
* an error) and set the volume to 0.0 if the current volume is too
* close to 0.0*/
if (mediaElement.volume>=0.1)
mediaElement.volume-=0.1;
else
mediaElement.volume =0.0;
};
decreaseVideoVolumeButton.onclick = function (event) {
decreaseVolume(video);
};
decreaseAudioVolumeButton.onclick = function (event) {
decreaseVolume(audio);
};
};