diff options
author | jak1 <jak1@themanaworld.org> | 2023-01-13 21:24:31 +0100 |
---|---|---|
committer | jak1 <jak1@themanaworld.org> | 2023-01-13 21:24:31 +0100 |
commit | 88dd93374aab6417d7bc9f1c996d3aec0d9f5c20 (patch) | |
tree | 16e46f3fdb53a8336197b4ff4ab982701b081e35 | |
parent | 4bdc18de454724f09db27a133df9ea3060b4738f (diff) | |
download | thepixelworld-88dd93374aab6417d7bc9f1c996d3aec0d9f5c20.tar.gz thepixelworld-88dd93374aab6417d7bc9f1c996d3aec0d9f5c20.tar.bz2 thepixelworld-88dd93374aab6417d7bc9f1c996d3aec0d9f5c20.tar.xz thepixelworld-88dd93374aab6417d7bc9f1c996d3aec0d9f5c20.zip |
-rw-r--r-- | app.js | 1 | ||||
-rw-r--r-- | client/index.html | 81 | ||||
-rw-r--r-- | server/Entities/Player.js | 10 |
3 files changed, 74 insertions, 18 deletions
@@ -11,6 +11,7 @@ app.get('/', function(req,res) { }); app.use('/client', express.static(__dirname + '/client')); +app.use('/favicon.ico', express.static(__dirname + '/client/favicon.ico')); serv.listen(2000); console.log("Server started."); diff --git a/client/index.html b/client/index.html index 24403e3..de22cc0 100644 --- a/client/index.html +++ b/client/index.html @@ -47,9 +47,9 @@ <!-- Game --> <div id="gameDiv" style="display:none;"> <div id="game"> - <canvas id="ctx" width="500" height="500" tabindex="1" + <canvas id="ctx" width="1000" height="650" tabindex="1" style="position:absolute; border:1px solid #000000;"></canvas> - <div id="ui" tabindex="2" style="position:absolute; width:502px; height:502px; display:none;"> + <div id="ui" tabindex="2" style="position:absolute; width:1002px; height:652px; display:none;"> <div id="ui-statusbar" style="position:absolute; border:1px solid #000000; top:50px; left:0px; width:450px; height: 40px;"> Status Bar @@ -88,17 +88,17 @@ </div> </div> </div> - <div id="chat" style="margin-top:520px;"> - <div id="chat-wrapper" style="width:500px; height:20px; overflow: hidden; white-space: nowrap;"> + <div id="chat" style="margin-top:670px;"> + <div id="chat-wrapper" style="width:1000px; height:20px; overflow: hidden; white-space: nowrap;"> <div class="chat-tab" id='active' onclick="setActiveChatTab('world', this)">WORLD</div> <!-- TODO only show up on permission to use the GM tab. <div class="chat-tab" onclick="setActiveChatTab('gm', this)"> GM</div> --> <div class="chat-tab" onclick="setActiveChatTab('guild', this)">[#] Guild (WIP)</div> <div class="chat-tab" onclick="setActiveChatTab('party', this)">[.] Party (WIP)</div> </div> - <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"></div> + <div id="chat-text" style="width:1000px; height:100px; overflow-y:scroll;"></div> <form id="chat-form"> - <input id="chat-input" type="text" style="width:500px;"></input> + <input id="chat-input" type="text" style="width:1000px;"></input> </form> </div> </div> @@ -229,6 +229,8 @@ self.sit = false; self.inInventory = false; self.ignorePlayerAttack = initPack.ignorePlayerAttacky; + self.current_animation_index = 0; + self.isMoving = false; self.drawPlayer = function () { @@ -238,20 +240,28 @@ // 'player' var width = 64; var height = 64; + animated_tiles = 7; if (self.sit) { finalWidth = width * self.dir; finalHeight = height * 4; + animated = 0; } else { finalWidth = 0; finalHeight = height * self.dir; + animated = self.current_animation_index; + if (self.isMoving) + self.current_animation_index += 1; } + if (self.current_animation_index >= animated_tiles) + self.current_animation_index = 0; ctx.drawImage(Img.player, - finalWidth /* base sprite */, finalHeight, + finalWidth + (animated * width) /* base sprite */, finalHeight, width, height, x - width / 2, y - height / 2, width, height); + } self.drawPlayerName = function () { @@ -350,6 +360,8 @@ p.inInventory = pack.inInventory; if (pack.ignorePlayerAttack != undefined) p.ignorePlayerAttack = pack.ignorePlayerAttack; + if (pack.isMoving !== undefined) + p.isMoving = pack.isMoving; } } for (var i = 0; i < data.bullet.length; i++) @@ -399,7 +411,7 @@ { if (!selfId || errno != 0) return; - ctx.clearRect(0, 0, 500, 500); + ctx.clearRect(0, 0, WIDTH, HEIGHT); drawMapGround(); drawGFXGround(); drawEntities(); @@ -487,18 +499,36 @@ self.shift = true; // inventory (i) if (event.keyCode === 73) + { socket.emit('keyPress', { inputId: 'inInventory', state: !Player.list[selfId].inInventory, shift: self.shift }); + self.isMoving = false; + } // movement - if (event.keyCode === 68 || event.keyCode === 39) // d + if (event.keyCode === 68 || event.keyCode === 39) + { // d socket.emit('keyPress', { inputId: 'right', state: true, shift: self.shift }); - else if (event.keyCode === 65 || event.keyCode === 37) // a + self.isMoving = true; + } + else if (event.keyCode === 65 || event.keyCode === 37) + { // a socket.emit('keyPress', { inputId: 'left', state: true, shift: self.shift }); - else if (event.keyCode === 83 || event.keyCode === 40) // s + self.isMoving = true; + } + else if (event.keyCode === 83 || event.keyCode === 40) + { // s socket.emit('keyPress', { inputId: 'down', state: true, shift: self.shift }); - else if (event.keyCode === 87 || event.keyCode === 38) // w + self.isMoving = true; + } + else if (event.keyCode === 87 || event.keyCode === 38) + { // w socket.emit('keyPress', { inputId: 'up', state: true, shift: self.shift }); + self.isMoving = true; + } else if (event.keyCode === 88) + { // x (sit) socket.emit('keyPress', { inputId: 'sit', state: !Player.list[selfId].sit, shift: self.shift }); + self.isMoving = false; + } } } @@ -508,14 +538,26 @@ if (event.keyCode === 16) self.shift = false; // movement - if (event.keyCode === 68 || event.keyCode === 39) // d + if (event.keyCode === 68 || event.keyCode === 39) + { // d socket.emit('keyPress', { inputId: 'right', state: false, shift: self.shift }); - else if (event.keyCode === 65 || event.keyCode === 37) // a + self.isMoving = false; + } + else if (event.keyCode === 65 || event.keyCode === 37) + { // a socket.emit('keyPress', { inputId: 'left', state: false, shift: self.shift }); - else if (event.keyCode === 83 || event.keyCode === 40) // s + self.isMoving = false; + } + else if (event.keyCode === 83 || event.keyCode === 40) + { // s socket.emit('keyPress', { inputId: 'down', state: false, shift: self.shift }); - else if (event.keyCode === 87 || event.keyCode === 38) // w + self.isMoving = false; + } + else if (event.keyCode === 87 || event.keyCode === 38) + { // w socket.emit('keyPress', { inputId: 'up', state: false, shift: self.shift }); + self.isMoving = false; + } } document.onmousedown = function (event) @@ -525,20 +567,23 @@ document.activeElement === document.getElementById('ctx')) { socket.emit('keyPress', { inputId: 'attack', state: true }); + self.isMoving = false; } } document.onmouseup = function (event) { socket.emit('keyPress', { inputId: 'attack', state: false }); + self.isMoving = false; } document.onmousemove = function (event) { - var x = -250 + event.clientX - 8; - var y = -250 + event.clientY - 8; + var x = -(WIDTH / 2) + event.clientX - 8; + var y = -(HEIGHT / 2) + event.clientY - 8; var angle = Math.atan2(y, x) / Math.PI * 180; socket.emit('keyPress', { inputId: 'mouseAngle', state: angle }); + self.isMoving = false; } </script> diff --git a/server/Entities/Player.js b/server/Entities/Player.js index 2e70d2a..c43fe29 100644 --- a/server/Entities/Player.js +++ b/server/Entities/Player.js @@ -23,6 +23,7 @@ var Player = function (id) self.sit = false; self.inInventory = false; self.ignorePlayerAttack = false; + self.isMoving = false; var super_update = self.update; self.update = function () @@ -71,7 +72,10 @@ var Player = function (id) self.speedY = 0; // dont sit while moving, in case we dont press shift(rotation/dir) if (self.pressingAttack + self.pressingDown + self.pressingLeft + self.pressingRight + self.pressingUp != 0 && self.move) + { self.sit = false; + self.isMoving = true; + } } self.getInitPack = function () @@ -104,6 +108,7 @@ var Player = function (id) sit: self.sit, inInventory: self.inInventory, ignorePlayerAttack: self.ignorePlayerAttack, + isMoving:self.isMoving, }; } Player.list[id] = self; @@ -130,25 +135,30 @@ Player.onConnect = function (socket, pName) { player.pressingLeft = data.state; player.dir = 1; + player.isMoving = data.state; } else if (data.inputId === 'right') { player.pressingRight = data.state; player.dir = 3; + player.isMoving = data.state; } else if (data.inputId === 'up') { player.pressingUp = data.state; player.dir = 2; + player.isMoving = data.state; } else if (data.inputId === 'down') { player.pressingDown = data.state; player.dir = 0; + player.isMoving = data.state; } else if (data.inputId === 'sit') { player.sit = data.state; + player.isMoving = false; } else if (data.inputId === 'attack') { |