Add games

index.html

@@ -164,6 +164,10 @@ <h1>Tyler's Game Hub</h1>
           <br><br>
           <a href="snake">Snake</a>
           <br><br>
+          <a href="snowrider3d"></a>
+          <br><br>
+          <a href="soccerrandom"></a>
+          <br><br>
           <a href="spacecompany">Space Company</a>
           <br><br>
           <a href="spaceinvaders">Space Invaders</a>

snowrider3d/Build/SnowRider3D-gd-1.json

@@ -0,0 +1,12 @@
+{
+"companyName": "Snow Rider",
+"productName": "Snow Rider 3D",
+"dataUrl": "SnowRider3D-gd-1.data.unityweb",
+"wasmCodeUrl": "SnowRider3D-gd-1.wasm.code.unityweb",
+"wasmFrameworkUrl": "SnowRider3D-gd-1.wasm.framework.unityweb.js",
+"TOTAL_MEMORY": 268435456,
+"graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
+"webglContextAttributes": {"preserveDrawingBuffer": false},
+"splashScreenStyle": "Dark",
+"backgroundColor": "#231F20"
+}

snowrider3d/TemplateData/UnityProgress.js

@@ -0,0 +1,167 @@
+const rootPath = 'TemplateData';
+
+function UnityProgress(gameInstance, progress) {
+    if (!gameInstance.Module) {
+        return;
+    }
+
+    if (!gameInstance.logo) {
+        gameInstance.logo = document.createElement("div");
+        gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
+        gameInstance.container.appendChild(gameInstance.logo);
+    }
+
+    if (!gameInstance.progress) {
+        gameInstance.progress = document.createElement("div");
+        gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
+        gameInstance.progress.empty = document.createElement("div");
+        gameInstance.progress.empty.className = "empty";
+        gameInstance.progress.appendChild(gameInstance.progress.empty);
+        gameInstance.progress.full = document.createElement("div");
+        gameInstance.progress.full.className = "full";
+        gameInstance.progress.appendChild(gameInstance.progress.full);
+        gameInstance.container.appendChild(gameInstance.progress);
+        gameInstance.textProgress = document.createElement("div");
+        gameInstance.textProgress.className = "text";
+        gameInstance.container.appendChild(gameInstance.textProgress);
+    }
+
+    gameInstance.progress.full.style.width = (100 * progress) + "%";
+    gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
+
+    //gameInstance.textProgress.innerHTML = 'Loading - ' + Math.floor(progress * 100) + '%' + ' <img src="' + rootPath + '/gears.gif" class="spinner" />';
+
+    if(progress>= 0.9 && progress<1)
+    {
+        gameInstance.textProgress.innerHTML = '100% - Running, Wait..';
+        gameInstance.progress.style.display = 'none';
+    }
+    else
+    {
+        gameInstance.textProgress.innerHTML = 'Loading - ' + Math.floor(progress * 100) + '%';
+    }
+
+    /*
+    if (progress == 1) {
+        gameInstance.textProgress.innerHTML = 'Running, Please Wait.. <img src="' + rootPath + '/gears.gif" class="spinner" />';
+        gameInstance.progress.style.display = 'none';
+    }
+    */
+
+    if (progress == 'complete') {
+        SendMessage = gameInstance.SendMessage;
+        gameInstance.logo.style.display = 'none';
+        gameInstance.progress.style.display = 'none';
+        gameInstance.textProgress.style.display = 'none';
+    }
+}
+
+window.Game = (function() {
+    var Game = function() {
+        this.registerEvents();
+    };
+
+    Game.prototype.registerEvents = function() {
+        var _this = this;
+
+        window.addEventListener("keydown", function(e) {
+            // space and arrow keys
+            if ([8, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
+                e.preventDefault();
+            }
+        }, false);
+
+        document.onmousedown = function() {
+            window.focus();
+        };
+
+        document.addEventListener('DOMContentLoaded', function() {
+            _this.resize();
+        }, false);
+
+        window.addEventListener('resize', function() {
+            setTimeout(function() {
+                _this.resize();
+            }, 1000);
+        }, false);
+    };
+
+    Game.prototype.getQueryVariable = function(variable) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i = 0; i < vars.length; i++) {
+            var pair = vars[i].split("=");
+            if (pair[0] == variable) {
+                return pair[1];
+            }
+        }
+        return (false);
+    }
+
+    var enableratioTolerant = true;
+    Game.prototype.resize = function() {
+
+    var ratioTolerant   = this.getQueryVariable('ratio_tolerant');
+
+    if (!enableratioTolerant || this.fullscreen()) {
+      return;
+    }
+
+    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
+    var gameContainer   = document.getElementById('gameContainer');
+    var canvas          = document.getElementById('#canvas');
+
+    var gameSizeRatio   = gameContainer.offsetWidth / gameContainer.offsetHeight;
+    var maxHeight       = this.maxHeight();
+    var maxWidth        = window.innerWidth;
+    var windowSizeRatio = maxWidth / maxHeight;
+    var newStyle        = {
+      width: gameContainer.offsetWidth,
+      height: gameContainer.offsetHeight
+    };
+
+    if (ratioTolerant == 'true') {
+      newStyle = { width: maxWidth, height: maxHeight };
+    } else if (ratioTolerant == 'false') {
+      if (gameSizeRatio > windowSizeRatio) {
+        newStyle = { width: maxWidth, height: maxWidth / gameSizeRatio };
+      } else {
+        newStyle = { width: maxHeight * gameSizeRatio, height: maxHeight };
+      }
+    }
+
+    if(enableratioTolerant)
+    {
+        newStyle = { width: maxWidth, height: maxHeight };
+    }
+
+    this.updateStyle(gameContainer, newStyle);
+
+    // canvas does not exists on page load
+    if (canvas) {
+      this.updateStyle(canvas, newStyle);
+    }
+  };
+
+  Game.prototype.maxHeight = function() {
+    return window.innerHeight;
+  };
+
+  Game.prototype.updateStyle = function(element, size) {
+    element.setAttribute('width', size.width);
+    element.setAttribute('height', size.height);
+    element.style.width = size.width + 'px';
+    element.style.height = size.height + 'px';
+  };
+
+  Game.prototype.fullscreen = function() {
+    return document.fullscreenElement ||
+           document.webkitFullscreenElement ||
+           document.mozFullScreenElement ||
+           document.msFullscreenElement;
+  };
+
+  return Game;
+})();
+
+new Game();

snowrider3d/TemplateData/style.css

@@ -0,0 +1,132 @@
+body {
+    margin: 0px;
+    padding: 0px;
+    overflow: hidden;
+}
+.webgl-content * {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+#gameContainer canvas {
+    display: block;
+    background: #222;
+    /*background: url('tunnelRush.jpg') no-repeat center;*/
+    /*background-color: black;*/
+}
+
+.webgl-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    /*disable selection in games which select content when dragging mouse*/
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+    .webgl-content .logo,
+    .progress,
+    .text {
+        position: absolute;
+        left: 50%;
+        top: 40%;
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    }
+
+    .webgl-content .logo {
+        background: url('logo.png') no-repeat center / contain;
+        width: 500px;
+        height: 155px;
+    }
+
+    .webgl-content .progress {
+        height: 26px;
+        width: 211px;
+        margin-top: 120px;
+    }
+
+        .webgl-content .progress .empty {
+            background: url('progressEmpty.Light.png') no-repeat right / cover;
+            float: right;
+            width: 100%;
+            height: 100%;
+            display: inline-block;
+        }
+
+        .webgl-content .progress .full {
+            background: url('progressFull.Light.png') no-repeat left / cover;
+            float: left;
+            width: 0%;
+            height: 100%;
+            display: inline-block;
+        }
+
+    .webgl-content .text {
+        margin-top: 170px;
+        /*color: blueviolet;*/
+        color: white;
+        font-family: 'Times New Roman', Times, serif, Haettenschweiler, 'Arial Narrow Bold', sans-serif, Helvetica, Verdana, sans-serif;
+        font-weight: 700;
+        font-size: 25px;
+        width: 500px;
+        text-align: center;
+    }
+
+    .webgl-content .spinner {
+        vertical-align: middle;
+        height: 100px;
+    }
+
+    .webgl-content .logo.Dark {
+        //background-image: url('logo.png');
+    }
+
+    .webgl-content .progress.Dark .empty {
+        background: white;
+    }
+
+    .webgl-content .progress.Dark .full {
+        background: royalblue;
+    }
+
+    .webgl-content .footer {
+        margin-top: 5px;
+        height: 38px;
+        line-height: 38px;
+        font-family: Helvetica, Verdana, Arial, sans-serif;
+        font-size: 18px;
+        background: #fff;
+    }
+
+        .webgl-content .footer .webgl-logo,
+        .title,
+        .fullscreen {
+            height: 100%;
+            display: inline-block;
+            background: transparent center no-repeat;
+        }
+
+        .webgl-content .footer .webgl-logo {
+            background-image: url('webgl-logo.png');
+            width: 204px;
+            float: left;
+        }
+
+        .webgl-content .footer .title {
+            margin-right: 10px;
+            float: right;
+        }
+
+        .webgl-content .footer .fullscreen {
+            background-image: url('fullscreen.png');
+            width: 38px;
+            float: right;
+        }

snowrider3d/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Snow Rider 3D</title>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
+    <meta name="description" content="Snow Rider 3D, Snow Rider 3D Mathnook, Snow Rider 3D Unblocked">
+    <meta property="og:image" content="snow-rider-3d.png" />
+    <script src="TemplateData/UnityProgress.js"></script>
+    <script src="Build/UnityLoader.js"></script>
+    <script>
+        var gameInstance = UnityLoader.instantiate("gameContainer", "Build/SnowRider3D-gd-1.json", { onProgress: UnityProgress, Module: { onRuntimeInitialized: function () { UnityProgress(gameInstance, "complete") } } });
+    </script>
+</head>
+
+<body style="overflow:hidden; margin:0; padding:0;">
+    <div class="webgl-content" style="position: absolute; width: 100%; height: 100%;">
+        <div id="gameContainer" style="width: 960px; height: 600px; margin: auto"></div>
+    </div>
+</body>
+
+</html>