"3/3/12 0024"

README.md

@@ -107,4 +107,9 @@ An odd mixture of many genres
 * Moar 3D
 * Made it so that the canvas is even bigger on large screens
 * Web Sockets Test
-* Fullscreen API
+* Fullscreen API
+
+###March 3rd, 2012
+* Added 3D in the background
+* 3D is all controlled by one variable
+* Attempted to move the space background to C9 so I can 3D it. Didn't work.

Scripts/3D.js

@@ -19,7 +19,11 @@ function threed(img) {
     canvasContext.drawImage(img, offset, 0, width, height);
     canvasContext2.drawImage(img, -offset, 0, width, height);
     // grab the pixel data from the <canvas>'s
+    //try {
     var imgData = canvasContext.getImageData(0, 0, width, height);
+    //} catch(e) {
+    //    console.log(img, e);
+    //}
     var imgData2 = canvasContext2.getImageData(0, 0, width, height);
     var data = imgData.data;
     var data2 = imgData2.data;

Scripts/main.js

@@ -5,33 +5,73 @@ window.onload = function() {
     var otherMenu = $("#otherMenu");
     var touchCons = $("#touchControls");
     var stage = new Stage(canvas[0]);
+    var three = true;
 
     var imgs = {
-        playerShip: "Graphics/starship.png",
-        enemyShip: "Graphics/starshipdark_flipped.png",
+        playerShip: "Graphics/starship.svg",
+        enemyShip: "Graphics/starshipdark_flipped.svg",
         speaker: "Graphics/Icons/speaker.svg",
         muted: "Graphics/Icons/speaker_muted.svg",
         pause: "Graphics/Icons/stop_hand.svg",
-        play: "Graphics/Icons/right_arrow.svg"
+        play: "Graphics/Icons/right_arrow.svg",
+        stars: "Graphics/space.svg"
     };
     //alert(Modernizr.svg);
-    if(!Modernizr.svg) {
+    if(!Modernizr.svg || three) {
         imgs.playerShip = "Graphics/starship.png";
         imgs.enemyShip = "Graphics/starshipdark_flipped.png";
+        imgs.stars = "Graphics/space.png";
     }
 
+    function blank() {}
+    var cbs = {
+        playerShip: blank,
+        enemyShip: blank,
+        speaker: blank,
+        muted: blank,
+        pause: blank,
+        play: blank,
+        stars: function() {
+            if(!Modernizr.svg || three) {
+                //console.log(imgs, imgs.stars);
+                canvas.css("background-image", "url("+imgs.stars+")");
+            }
+        }
+    };
+
     function make3D() {
         for(var i in imgs) {
             var a = new Image();
             a.i = i;
             a.onload = function() {
                 imgs[this.i] = threed(this);
+                cbs[this.i].call();
                 //window.open(imgs[this.i]);
             };
             a.src = imgs[i];
         }
-        console.log(imgs);
+        //console.log(imgs);
         //window.open(imgs.playerShip);
+        /*var i = 0;
+        var nxtImg = function(e) {
+            i += 1;
+            console.log(i);
+            if(i>=imgs.length) {
+                alert("Bazinga!");
+                cb();
+            } else {
+                a = new Image();
+                a.onload = nxtImg;
+                a.src = imgs[i];
+            }
+        };
+        var a = new Image();
+        a.onload = nxtImg;
+        a.src = imgs[i];*/
+    }
+    if(three) {
+        $("#3dstyle").attr("rel", "stylesheet");
+        make3D();
     }
 
     //var shootInt = 0;
@@ -67,6 +107,7 @@ window.onload = function() {
             return false;
         }
     }
+
     var playerBullets = [];
     var enemyBullets = [];
     var enemies = [];
@@ -510,7 +551,10 @@ window.onload = function() {
 
     var shipW = (64/640)*canvas.width();
     function init() {
-        if(document.body.webkitRequestFullScreen) document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+        if(document.body.webkitRequestFullScreen) {
+            alert("Durr");
+            document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+        }
         if(document.body.mozRequestFullScreen) document.body.mozRequestFullScreen();
 
         soundManager.url="./Scripts/SoundManager2/swf/soundmanager2.swf";
@@ -567,8 +611,10 @@ window.onload = function() {
         //travelTo(5000);
         //splashScreen(menuScreen);
     }
-
-    make3D();
+    /*if(!Modernizr.svg || three) {
+        console.log(imgs, imgs.stars);
+        canvas.css("background-image", "url("+imgs.stars+")");
+    }*/
     init();
 
     var currentWidth;

Scripts/sockets_test1.js

@@ -1,8 +1,14 @@
 function socketStart() {
-    var connection = new WebSocket('ws://html5rocks.websocket.org/echo');
+    var server = "ws://html5rocks.websocket.org/echo";
+    //var connection = new WebSocket(server)||new MozWebSocket(server);
+    if(WebSocket) {
+        var connection = new WebSocket(server);
+    } else if(MozWebSocket) {
+        var connection = new MozWebSocket(server);
+    }
     // When the connection is open, send some data to the server
     connection.onopen = function () {
-        connection.send('Ping'); // Send the message 'Ping' to the server
+        connection.send('Derp'); // Send the message 'Ping' to the server
     };
     // Log errors
     connection.onerror = function (error) {

Styles/3d.css

@@ -1,6 +1,9 @@
 #menu ul li h2 {
     text-shadow: -0.06em 0 red, 0.06em 0 cyan;
 }
+/*#splash h1 {
+    text-shadow: -0.006em 0 rgba(255,0,0,0.5), 0.006em 0 rgba(0,255,255,0.5);
+}*/
 #menu ul li {
     box-shadow: -1px 0 0 red, 1px 0 0 cyan;
 }

index.html

@@ -12,7 +12,7 @@
         <link rel="stylesheet" href="./Fonts/Segoe WP/stylesheet.css" />
         <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,greek' rel='stylesheet' type='text/css'>
         <link rel="stylesheet" href="./Styles/main.css" />
-        <link rel="stylesheet" href="./Styles/3d.css" media="print" />
+        <link rel="derp" href="./Styles/3d.css" id="3dstyle" />
         <link rel="stylesheet" href="./Styles/desktop.css" media="screen and (min-device-width: 640px)" />
         <script src="Scripts/EaselJS/lib/easel.js"></script>
         <script src="./Scripts/EaselJS/src/easeljs/ui/Touch.js"></script>