Improved IE 10+ support.

Now shows relevant error message if game cannot be ran.

css/main.css

@@ -1,8 +1,18 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+/*This CSS file does not validate to W3 CSS3 due to vendor prefixes required to create gradients in CSS3,
+this causes parsing errors in the validator. The correct syntax has been used according to each browser
+vendor.*/
 body.info {
 	background-image: url("../images/menu/backdrop/stars.png");
 }
 
+h1.error {
+	position:absolute;
+	top: 50%;
+	left: 100px;
+	z-index: -1;
+}
+
 header {
 	text-align: center;
 	text-decoration: underline;
@@ -98,7 +108,7 @@ article#about {
 	top: 70px;
 	left: 4%;
 	width: 90%;
-	color: yellow;	
+	color: yellow;
 	font-size:	130%;
 	font-family: zephyrean_brknormal, Futura, "Trebuchet MS", Arial, sans-serif;
 }

index.html

@@ -25,7 +25,7 @@
     <section id="gameSection">
         <canvas id="gameCanvas" width="1000" height="500">
         </canvas>
-        <h1>Your browser does not support Canvas. Please upgrade your browser.</h1>
+        <h1 class="error">Your browser does not support Canvas. Please upgrade your browser.</h1>
     </section>
 </body>
 

js/controller/gameRunner.js

@@ -1,9 +1,12 @@
 define(["view/draw", "model/game", "controller/gameLogic", "controller/action", "model/canvas", "model/sounds"], function (Draw, Game, GameLogic, Action, Canvas, Sounds) {
     var gameLoop = function gameLoop() {
-        if (window.requestAnimationFrame === null) {
+        if (window.requestAnimationFrame === undefined) {
+			Canvas.context.fillStyle = "#FFFFFF";
+            Canvas.context.fillRect(0, 0, Canvas.canvas.width, Canvas.canvas.height);
+			Canvas.context.fillStyle = "#000000";
             Canvas.context.font = "20px Verdana";
-            Canvas.context.fillText("Your browser does not support requestAnimationFrame", 100, 100);
-            Canvas.context.fillText("Please upgrade your browser", 100, 300);
+            Canvas.context.fillText("Your browser does not support requestAnimationFrame", 100, Canvas.canvasHeight*0.25);
+            Canvas.context.fillText("Please upgrade your browser", 100, Canvas.canvasHeight*0.75);
         } else {
             requestAnimationFrame(GameRunner.gameLoop);
             GameRunner.changeTextSize();

js/controller/listener.js

@@ -6,5 +6,7 @@ define(["controller/action", "model/canvas"], function (Action, Canvas) {
     Canvas.canvas.addEventListener("mouseup", function () {
         Action.mouseClicked(false);
     }, false);
-    window.addEventListener("resize", Action.resize, false);
+	if (window.requestAnimationFrame !== undefined) {
+		window.addEventListener("resize", Action.resize, false);
+	}
 });

js/main.js

@@ -4,7 +4,7 @@ define(["model/sounds", "model/images", "model/canvas", "model/character", "mode
         //end of test
         LSM.init();
         LSM.load();
-        if (!Game.muteMusic) {
+        if (!Game.muteMusic && window.requestAnimationFrame !== undefined) {
             Game.musicCreated = true;
             Sounds.bgMusic.play();
         }

js/model/sounds.js

@@ -1,44 +1,44 @@
 define(["howler"], function (Howler) {
     var bgMusic = new Howl({
-        urls: ["./sound/music/DST-DasElectron.ogg"],
+        urls: ["./sound/music/DST-DasElectron.ogg", "./sound/music/DST-DasElectron.mp3"],
         buffer: true,
         loop: true
     });
 
     var laser1 = new Howl({
-        urls: ["./sound/sfx/sfx_laser1.ogg"]
+        urls: ["./sound/sfx/sfx_laser1.ogg", "./sound/sfx/sfx_laser1.mp3"]
     });
 
     var explosion = new Howl({
-        urls: ["./sound/sfx/explosion.mp3"]
+        urls: ["./sound/sfx/explosion.ogg", "./sound/sfx/explosion.mp3"]
     });
 
     var laser2 = new Howl({
-        urls: ["./sound/sfx/sfx_laser2.ogg"]
+        urls: ["./sound/sfx/sfx_laser2.ogg", "./sound/sfx/sfx_laser2.mp3"]
     });
 
     var playerHit = new Howl({
-        urls: ["./sound/sfx/sfx_shieldDown.ogg"]
+        urls: ["./sound/sfx/sfx_shieldDown.ogg", "./sound/sfx/sfx_shieldDown.mp3"]
     });
 
     var pause = new Howl({
         urls: ["./sound/sfx/pause.wav"]
     });
 
     var select = new Howl({
-        urls: ["./sound/sfx/select.wav"]
+        urls: ["./sound/sfx/select.ogg", "./sound/sfx/select.mp3", "./sound/sfx/select.wav"]
     });
 
     var death = new Howl({
-        urls: ["./sound/sfx/death.wav"]
+        urls: ["./sound/sfx/death.ogg", "./sound/sfx/death.mp3", "./sound/sfx/death.wav"]
     });
 
     var levelUp = new Howl({
-        urls: ["./sound/sfx/levelUp.wav"]
+        urls: ["./sound/sfx/levelUp.ogg", "./sound/sfx/levelUp.mp3", "./sound/sfx/levelUp.wav"]
     });
 
     var powerUp = new Howl({
-        urls: ["./sound/sfx/sfx_zap.ogg"]
+        urls: ["./sound/sfx/sfx_zap.ogg", "./sound/sfx/levelUp.mp3"]
     });
     var Sounds = {
         levelUp: levelUp,