Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
GUI Stuff, Movement, More
Small updates of movement (Still having problems if you try to change
to quick), gui (Mouse only at the moment…), changed the announcement
visual effect
  • Loading branch information
LexTheGreat committed Mar 11, 2015
1 parent b3df1b9 commit 7ae676e
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 20 deletions.
25 changes: 21 additions & 4 deletions public/game/game.js
@@ -1,10 +1,14 @@
window.GameEngine = function() { window.GameEngine = function() {
this.Canvas = document.getElementById('gameCanvas'); this.Canvas.width = window.innerWidth; this.Canvas.height = window.innerHeight; this.Canvas = document.getElementById('gameCanvas'); this.Canvas.width = window.innerWidth; this.Canvas.height = window.innerHeight;


this.gameWidth = window.innerWidth;
this.gameheight = window.innerHeight;

this.Canvas.addEventListener("keydown", onKeyDown, false); this.Canvas.addEventListener("keydown", onKeyDown, false);
this.Canvas.addEventListener("keyup", onKeyUp, false); this.Canvas.addEventListener("keyup", onKeyUp, false);


this.NetVar = { this.NetVar = {
netMessage: "",
myIndex: "", myIndex: "",
isOnline: false, isOnline: false,
Players: {} // Needs something in there.. Players: {} // Needs something in there..
Expand Down Expand Up @@ -61,6 +65,7 @@ window.GameEngine = function() {
// Start Draw objects here // Start Draw objects here
this.parent.DrawnObject.drawPlayers(this.ctx) this.parent.DrawnObject.drawPlayers(this.ctx)
this.parent.DrawnObject.drawFPS(this.ctx, this.fps); this.parent.DrawnObject.drawFPS(this.ctx, this.fps);
if(this.parent.NetVar.netMessage.length > 0) { this.parent.DrawnObject.drawNetMessage(this.ctx) };
// End Draw Objects Here // End Draw Objects Here
this.ctx.restore(); this.ctx.restore();
this.fps = this.parent.FPS.getFPS(); this.fps = this.parent.FPS.getFPS();
Expand All @@ -70,6 +75,7 @@ window.GameEngine = function() {
// this.Text = this.RenderObjects.textObject() // this.Text = this.RenderObjects.textObject()
this.DrawnObject = { this.DrawnObject = {
parent: this, parent: this,
netMessageToggle: false,
// Text // Text
drawText: function(ctx, text, x, y, color) { drawText: function(ctx, text, x, y, color) {
color = typeof color !== 'undefined' ? color : "black"; color = typeof color !== 'undefined' ? color : "black";
Expand Down Expand Up @@ -122,6 +128,18 @@ window.GameEngine = function() {
this.drawNameText(ctx, player.Username, "#000", player.Position.x+(96/2), player.Position.y-100); this.drawNameText(ctx, player.Username, "#000", player.Position.x+(96/2), player.Position.y-100);
this.drawSprite(ctx, player.Sprite, player.Position.x, player.Position.y, player.Position.dir, player.Position.ani) this.drawSprite(ctx, player.Sprite, player.Position.x, player.Position.y, player.Position.dir, player.Position.ani)
} }
},
drawNetMessage: function(ctx) {
this.netMessageToggle += 1;

if (this.netMessageToggle >= 15) {
color = "green";
} else {
color = "red";
}

if (this.netMessageToggle >= 30) { this.netMessageToggle = 0; }
this.drawText(ctx, this.parent.NetVar.netMessage, this.parent.gameWidth/2, 15, color);
} }
} }


Expand All @@ -136,9 +154,6 @@ window.GameEngine = function() {


self.parent.Render.draw(); self.parent.Render.draw();
}, 1000/60); }, 1000/60);
//setInterval(function() {

//}, 500);
} }
}; };


Expand Down Expand Up @@ -191,6 +206,7 @@ function del(array, obj) {


var Dir = -1; var Dir = -1;
var isMoving = false; var isMoving = false;
var heldKey = 0;
function onKeyDown(event) { function onKeyDown(event) {
var self = this; var self = this;
var code = event.keyCode || event.which; var code = event.keyCode || event.which;
Expand All @@ -215,6 +231,7 @@ function onKeyDown(event) {


if(code == 83 || code == 68 || code == 87 || code == 65) { if(code == 83 || code == 68 || code == 87 || code == 65) {
if(!isMoving) { if(!isMoving) {
heldKey = code;
Network.sendStartMovement(Dir); Network.sendStartMovement(Dir);
isMoving = true; isMoving = true;
} }
Expand All @@ -229,7 +246,7 @@ function onKeyUp(event) {


// Movement Keys // Movement Keys
if(code == 83 || code == 68 || code == 87 || code == 65) { if(code == 83 || code == 68 || code == 87 || code == 65) {
if(isMoving) { if(isMoving && heldKey == code) {
Network.sendStopMovement(true); Network.sendStopMovement(true);
isMoving = false; isMoving = false;
} }
Expand Down
5 changes: 3 additions & 2 deletions public/game/network.js
Expand Up @@ -52,10 +52,11 @@ var Network = function() {
}); });


Socket.on('onNotice', function(data) { Socket.on('onNotice', function(data) {
typewrite.Console.writeline(data); Game.NetVar.netMessage = data;
//typewrite.Console.writeline(data);


setTimeout(function(){ setTimeout(function(){
$('#Notice').text("") Game.NetVar.netMessage = "";
}, 30000); }, 30000);
}); });
} }
Expand Down
Binary file added public/img/gui/click.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/gui/mouse.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/gui/uipackSpace_sheet.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 81 additions & 0 deletions public/img/gui/uipackSpace_sheet.xml
@@ -0,0 +1,81 @@
<TextureAtlas imagePath="sheet.png">
<SubTexture name="barHorizontal_blue_left.png" x="400" y="78" width="6" height="26"/>
<SubTexture name="barHorizontal_blue_mid.png" x="388" y="420" width="16" height="26"/>
<SubTexture name="barHorizontal_blue_right.png" x="400" y="0" width="6" height="26"/>
<SubTexture name="barHorizontal_green_left.png" x="400" y="104" width="6" height="26"/>
<SubTexture name="barHorizontal_green_mid.png" x="386" y="366" width="16" height="26"/>
<SubTexture name="barHorizontal_green_right.png" x="400" y="26" width="6" height="26"/>
<SubTexture name="barHorizontal_red_left.png" x="400" y="130" width="6" height="26"/>
<SubTexture name="barHorizontal_red_mid.png" x="386" y="340" width="16" height="26"/>
<SubTexture name="barHorizontal_red_right.png" x="400" y="156" width="6" height="26"/>
<SubTexture name="barHorizontal_shadow_left.png" x="400" y="182" width="6" height="26"/>
<SubTexture name="barHorizontal_shadow_mid.png" x="386" y="314" width="16" height="26"/>
<SubTexture name="barHorizontal_shadow_right.png" x="400" y="208" width="6" height="26"/>
<SubTexture name="barHorizontal_white_left.png" x="402" y="314" width="6" height="26"/>
<SubTexture name="barHorizontal_white_mid.png" x="399" y="236" width="16" height="26"/>
<SubTexture name="barHorizontal_white_right.png" x="402" y="366" width="6" height="26"/>
<SubTexture name="barHorizontal_yellow_left.png" x="400" y="52" width="6" height="26"/>
<SubTexture name="barHorizontal_yellow_mid.png" x="399" y="262" width="16" height="26"/>
<SubTexture name="barHorizontal_yellow_right.png" x="402" y="340" width="6" height="26"/>
<SubTexture name="barVertical_blue_bottom.png" x="26" y="500" width="26" height="6"/>
<SubTexture name="barVertical_blue_mid.png" x="336" y="322" width="26" height="16"/>
<SubTexture name="barVertical_blue_top.png" x="104" y="506" width="26" height="6"/>
<SubTexture name="barVertical_green_bottom.png" x="130" y="506" width="26" height="6"/>
<SubTexture name="barVertical_green_mid.png" x="336" y="370" width="26" height="16"/>
<SubTexture name="barVertical_green_top.png" x="78" y="506" width="26" height="6"/>
<SubTexture name="barVertical_red_bottom.png" x="130" y="500" width="26" height="6"/>
<SubTexture name="barVertical_red_mid.png" x="336" y="386" width="26" height="16"/>
<SubTexture name="barVertical_red_top.png" x="0" y="506" width="26" height="6"/>
<SubTexture name="barVertical_shadow_bottom.png" x="104" y="500" width="26" height="6"/>
<SubTexture name="barVertical_shadow_mid.png" x="386" y="314" width="16" height="26"/>
<SubTexture name="barVertical_shadow_top.png" x="0" y="500" width="26" height="6"/>
<SubTexture name="barVertical_white_bottom.png" x="26" y="506" width="26" height="6"/>
<SubTexture name="barVertical_white_mid.png" x="336" y="354" width="26" height="16"/>
<SubTexture name="barVertical_white_top.png" x="78" y="500" width="26" height="6"/>
<SubTexture name="barVertical_yellow_bottom.png" x="52" y="506" width="26" height="6"/>
<SubTexture name="barVertical_yellow_mid.png" x="336" y="338" width="26" height="16"/>
<SubTexture name="barVertical_yellow_top.png" x="52" y="500" width="26" height="6"/>
<SubTexture name="crossair_black.png" x="300" y="468" width="32" height="32"/>
<SubTexture name="crossair_blackOutline.png" x="300" y="400" width="36" height="36"/>
<SubTexture name="crossair_blue.png" x="332" y="436" width="32" height="32"/>
<SubTexture name="crossair_blueOutline.png" x="300" y="328" width="36" height="36"/>
<SubTexture name="crossair_red.png" x="300" y="436" width="32" height="32"/>
<SubTexture name="crossair_redOutline.png" x="300" y="364" width="36" height="36"/>
<SubTexture name="crossair_white.png" x="332" y="468" width="32" height="32"/>
<SubTexture name="crossair_whiteOutline.png" x="300" y="292" width="36" height="36"/>
<SubTexture name="cursor_hand.png" x="336" y="292" width="30" height="30"/>
<SubTexture name="cursor_pointer3D.png" x="380" y="212" width="20" height="24"/>
<SubTexture name="cursor_pointer3D_shadow.png" x="364" y="450" width="20" height="27"/>
<SubTexture name="cursor_pointerFlat.png" x="364" y="477" width="20" height="24"/>
<SubTexture name="cursor_pointerFlat_shadow.png" x="366" y="292" width="20" height="27"/>
<SubTexture name="dotBlue.png" x="362" y="322" width="24" height="24"/>
<SubTexture name="dotGreen.png" x="364" y="426" width="24" height="24"/>
<SubTexture name="dotRed.png" x="362" y="370" width="24" height="24"/>
<SubTexture name="dotWhite.png" x="362" y="346" width="24" height="24"/>
<SubTexture name="dotYellow.png" x="360" y="402" width="24" height="24"/>
<SubTexture name="dot_shadow.png" x="336" y="402" width="24" height="24"/>
<SubTexture name="glassPanel.png" x="0" y="0" width="100" height="100"/>
<SubTexture name="glassPanel_cornerBL.png" x="0" y="100" width="100" height="100"/>
<SubTexture name="glassPanel_cornerBR.png" x="0" y="200" width="100" height="100"/>
<SubTexture name="glassPanel_cornerTL.png" x="200" y="400" width="100" height="100"/>
<SubTexture name="glassPanel_cornerTR.png" x="300" y="0" width="100" height="100"/>
<SubTexture name="glassPanel_corners.png" x="100" y="200" width="100" height="100"/>
<SubTexture name="glassPanel_projection.png" x="200" y="300" width="100" height="100"/>
<SubTexture name="glassPanel_tab.png" x="300" y="100" width="100" height="112"/>
<SubTexture name="metalPanel.png" x="200" y="200" width="100" height="100"/>
<SubTexture name="metalPanel_blue.png" x="200" y="100" width="100" height="100"/>
<SubTexture name="metalPanel_blueCorner.png" x="200" y="0" width="100" height="100"/>
<SubTexture name="metalPanel_green.png" x="100" y="400" width="100" height="100"/>
<SubTexture name="metalPanel_greenCorner.png" x="100" y="300" width="100" height="100"/>
<SubTexture name="metalPanel_plate.png" x="300" y="212" width="80" height="80"/>
<SubTexture name="metalPanel_red.png" x="100" y="100" width="100" height="100"/>
<SubTexture name="metalPanel_redCorner.png" x="100" y="0" width="100" height="100"/>
<SubTexture name="metalPanel_yellow.png" x="0" y="400" width="100" height="100"/>
<SubTexture name="metalPanel_yellowCorner.png" x="0" y="300" width="100" height="100"/>
<SubTexture name="squareBlue.png" x="384" y="450" width="19" height="26"/>
<SubTexture name="squareGreen.png" x="380" y="262" width="19" height="26"/>
<SubTexture name="squareRed.png" x="384" y="394" width="19" height="26"/>
<SubTexture name="squareWhite.png" x="384" y="476" width="19" height="26"/>
<SubTexture name="squareYellow.png" x="380" y="236" width="19" height="26"/>
<SubTexture name="square_shadow.png" x="386" y="288" width="19" height="26"/>
</TextureAtlas>
19 changes: 5 additions & 14 deletions public/index.html
Expand Up @@ -6,7 +6,8 @@
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<title>JsGame</title> <title>JsGame</title>
<style> <style>
* { margin:0; padding:0; } * { margin:0; padding:0; cursor: url(/img/gui/mouse.png), default;}
*:active { cursor: url(/img/gui/click.png), default; }
html, body,#container { width:100%; height:100%; position: relative; } html, body,#container { width:100%; height:100%; position: relative; }
canvas { display: block; width: 100%; height: 100%; } canvas { display: block; width: 100%; height: 100%; }
*[hidden] { display: none; } *[hidden] { display: none; }
Expand All @@ -18,14 +19,6 @@
display: block; display: block;
width: 100%; width: 100%;
} }
#NoticeBox
{
width: 50%;
height: 10px;
left: 45%;
top: 1%;
position: absolute;
}
#loginGUI #loginGUI
{ {
bottom: 50%; bottom: 50%;
Expand All @@ -48,6 +41,7 @@
#chatBox #chatBox
{ {
width: 50%; width: 50%;
cursor: text;
} }
</style> </style>


Expand All @@ -63,14 +57,11 @@
<canvas id='gameCanvas' tabindex='1'></canvas> <canvas id='gameCanvas' tabindex='1'></canvas>
<menu id="loginGUI"> <menu id="loginGUI">
<form> <form>
Username: <input id="LoginUsername" type="text" value="Username"><br> Username: <input id="LoginUsername" type="text" value="Username" style="cursor: text;"><br>
Password: <input id="LoginPassword" type="Password" value="Password"><br> Password: <input id="LoginPassword" type="Password" value="Password" style="cursor: text;"><br>
<input id="LoginButton" type="button" value="Submit" onclick="Network.sendLogin();"> <input id="LoginButton" type="button" value="Submit" onclick="Network.sendLogin();">
</form> </form>
</menu> </menu>
<menu id="NoticeBox">
<p id="Notice" style="color: #FF3300;font-weight:bold;"></p>
</menu>
<menu id="gameGUI" style="display: none;"> <menu id="gameGUI" style="display: none;">
<div id="chatLog"> <div id="chatLog">
</div> </div>
Expand Down

0 comments on commit 7ae676e

Please sign in to comment.