Skip to content
Permalink
Browse files

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 7ae676e135a47ddb5cbb1df372807d92997cd982
@@ -1,10 +1,14 @@
window.GameEngine = function() {
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("keyup", onKeyUp, false);

this.NetVar = {
netMessage: "",
myIndex: "",
isOnline: false,
Players: {} // Needs something in there..
@@ -61,6 +65,7 @@ window.GameEngine = function() {
// Start Draw objects here
this.parent.DrawnObject.drawPlayers(this.ctx)
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
this.ctx.restore();
this.fps = this.parent.FPS.getFPS();
@@ -70,6 +75,7 @@ window.GameEngine = function() {
// this.Text = this.RenderObjects.textObject()
this.DrawnObject = {
parent: this,
netMessageToggle: false,
// Text
drawText: function(ctx, text, x, y, color) {
color = typeof color !== 'undefined' ? color : "black";
@@ -122,6 +128,18 @@ window.GameEngine = function() {
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)
}
},
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);
}
}

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

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

//}, 500);
}
};

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

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

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

// Movement Keys
if(code == 83 || code == 68 || code == 87 || code == 65) {
if(isMoving) {
if(isMoving && heldKey == code) {
Network.sendStopMovement(true);
isMoving = false;
}
@@ -52,10 +52,11 @@ var Network = function() {
});

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

setTimeout(function(){
$('#Notice').text("")
Game.NetVar.netMessage = "";
}, 30000);
});
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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>
@@ -6,7 +6,8 @@
<meta name="msapplication-tap-highlight" content="no" />
<title>JsGame</title>
<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; }
canvas { display: block; width: 100%; height: 100%; }
*[hidden] { display: none; }
@@ -18,14 +19,6 @@
display: block;
width: 100%;
}
#NoticeBox
{
width: 50%;
height: 10px;
left: 45%;
top: 1%;
position: absolute;
}
#loginGUI
{
bottom: 50%;
@@ -48,6 +41,7 @@
#chatBox
{
width: 50%;
cursor: text;
}
</style>

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

0 comments on commit 7ae676e

Please sign in to comment.
You can’t perform that action at this time.