2 changed files with 79 additions and 18 deletions
+ 52
- 18
index.html
View File
| <body> | <body> | ||||
| <div id="sections"> | <div id="sections"> | ||||
| <div class="loading hidden"> | <div class="loading hidden"> | ||||
| <div class="arg"></div> | |||||
| <img src="assets/loading.gif"> | <img src="assets/loading.gif"> | ||||
| </div> | </div> | ||||
| <div class="error hidden"> | <div class="error hidden"> | ||||
| Error: Couldn't connect to server. | |||||
| <div class="arg"></div> | |||||
| </div> | </div> | ||||
| <div class="pre hidden"> | <div class="pre hidden"> | ||||
| <script src="node_modules/jquery/dist/jquery.min.js"></script> | <script src="node_modules/jquery/dist/jquery.min.js"></script> | ||||
| <script src="node_modules/socksugar/client.js"></script> | <script src="node_modules/socksugar/client.js"></script> | ||||
| <script src="js/game.js"></script> | |||||
| <script> | <script> | ||||
| window.page = { | window.page = { | ||||
| switchTo: function(name) { | |||||
| switchTo: function(name, arg) { | |||||
| if (page.switchTo.prev) | if (page.switchTo.prev) | ||||
| page.switchTo.prev.addClass("hidden"); | page.switchTo.prev.addClass("hidden"); | ||||
| var elem = $("#sections > ."+name); | |||||
| console.log(elem); | |||||
| elem.removeClass("hidden"); | |||||
| page.switchTo.prev = elem; | |||||
| //We don't want to switch to a page if we're going to | |||||
| //switch again a couple of milliseconds later. | |||||
| if (page.switchTo.timeout) | |||||
| clearTimeout(page.switchTo.timeout); | |||||
| page.switchTo.timeout = setTimeout(function() { | |||||
| var elem = $("#sections > ."+name); | |||||
| elem.removeClass("hidden"); | |||||
| if (arg) | |||||
| elem.children(".arg").html(arg); | |||||
| else | |||||
| elem.children(".ard").html(""); | |||||
| page.switchTo.prev = elem; | |||||
| }, 150); | |||||
| } | } | ||||
| } | } | ||||
| window.game = null; | |||||
| function startGame(type) { | |||||
| page.switchTo( | |||||
| "loading", | |||||
| "Waiting for opponent..." | |||||
| ); | |||||
| sock.send("game/start", { | |||||
| type: type | |||||
| }, function(err, res) { | |||||
| if (err) | |||||
| return page.switchTo("error", err); | |||||
| page.switchTo("game"); | |||||
| window.game = new Game( | |||||
| $("#game-canvas")[0], | |||||
| res.players, | |||||
| res.index, | |||||
| sock | |||||
| ); | |||||
| game.start(); | |||||
| sock.on("gameover", function(data) { | |||||
| game.stop(); | |||||
| page.switchTo("error", data.msg); | |||||
| }); | |||||
| }); | |||||
| } | |||||
| //Start with showincg a loading animation | //Start with showincg a loading animation | ||||
| page.switchTo("loading"); | page.switchTo("loading"); | ||||
| //Initiate a socket connection | //Initiate a socket connection | ||||
| window.sock = new SockSugar("ws://localhost:8081"); | |||||
| window.sock = new SockSugar("ws://weblet.mort.coffee:8083"); | |||||
| //If we can't connect to the server, display an error | //If we can't connect to the server, display an error | ||||
| var errTimeout = setTimeout(function() { | var errTimeout = setTimeout(function() { | ||||
| page.switchTo("error"); | |||||
| page.switchTo("error", "Couldn't connect to the server."); | |||||
| }, 7000); | }, 7000); | ||||
| sock.on("ready", function() { | sock.on("ready", function() { | ||||
| page.switchTo("pre"); | page.switchTo("pre"); | ||||
| $("#play-god").on("click", function() { | $("#play-god").on("click", function() { | ||||
| page.switchTo("loading"); | |||||
| sock.send("startgame/god", {}, function(err, res) { | |||||
| console.log(err, res); | |||||
| }); | |||||
| startGame("god"); | |||||
| }); | }); | ||||
| $("#play-runner").on("click", function() { | $("#play-runner").on("click", function() { | ||||
| page.switchTo("loading"); | |||||
| sock.send("startgame/runner", {}, function(err, res) { | |||||
| console.log(err, res); | |||||
| }); | |||||
| startGame("runner"); | |||||
| }); | }); | ||||
| }); | }); | ||||
| </script> | </script> | ||||
| <script src="sections/browser.js"></script> | |||||
| </body> | </body> | ||||
| </html> | </html> |
+ 27
- 0
js/game.js
View File
| (function() { | |||||
| window.Game = function(canvas, players, index) { | |||||
| this._canvas = canvas; | |||||
| this._ctx = canvas.getContext("2d"); | |||||
| this._players = players; | |||||
| this._player = players[index]; | |||||
| this._sock = sock; | |||||
| this._keys = []; | |||||
| //Keep track of which keys are pressed and which aren't | |||||
| canvas.addEventListener("keydown", function(evt) { | |||||
| this._keys[evt.keyCode] = true; | |||||
| }.bind(this)); | |||||
| canvas.addEventListener("keyup", function(evt) { | |||||
| this._keys[evt.keyCode] = false; | |||||
| }.bind(this)); | |||||
| } | |||||
| Game.prototype.start = function() { | |||||
| console.log("starting game"); | |||||
| } | |||||
| Game.prototype.stop = function() { | |||||
| console.log("Stopping game"); | |||||
| } | |||||
| })(); |
Loading…