From 7e5d0b93a9e085df546e168a6cb673275607034b Mon Sep 17 00:00:00 2001 From: Simon Giesel Date: Wed, 25 Apr 2018 23:38:04 +0200 Subject: [PATCH] Fix physics --- assets/char_luigi_x4_left.png | Bin 0 -> 1365 bytes assets/char_mario_x4_box.png | Bin 0 -> 1336 bytes assets/char_mario_x4_left.png | Bin 0 -> 1327 bytes server.js | 12 ++- src/views/server.hbs | 182 ++++++++++++++++++++++++---------- 5 files changed, 139 insertions(+), 55 deletions(-) create mode 100644 assets/char_luigi_x4_left.png create mode 100644 assets/char_mario_x4_box.png create mode 100644 assets/char_mario_x4_left.png diff --git a/assets/char_luigi_x4_left.png b/assets/char_luigi_x4_left.png new file mode 100644 index 0000000000000000000000000000000000000000..428adbb10e3c9663c1238d62f935e9462126dc1b GIT binary patch literal 1365 zcmXw(4OCKR7{{p)nL<)J4NoST`Oya^bg(pOw5iuimq~%xUQqiKc@*^j@mBr*rPND2bgI#WC=f3ZK&w1|i+~;}!&+mP|XGKR~ z9o!ud2n3cv58n%|bZ8EsQPBJ9sNZpDK^@%_5st9h9%=h^F=Y8Hi++HEKoHm3=90W? zJ8~hTeGY?3vww-ie~z^i{YkrqKp)Cu4@6U`VZqj9Tg#xw$sb zU$nf)Efncx0*Xs;0eX=Om+V!$>wuJd1NVTA3=98zU7cXye!uh!66S$x(jasFGOwo8 zj&ENV6jVvHRoY2Ten#bs7rnYuAMROCWehWY#bwy{2mLQxnTbBq*;*`CiUBnTfdp8E zSxmf3&YRKNtXGK!%O&huqC?kFTzMFNszpiRPt7@|#V3;ckg@4CgpDX5jkTT}nZ6Qs z8N-k??Gs^@s;bta5HSk}{j46ZGM`ByMY(+h&2=Q==pE94a3_#};Vtd{diuDt_m@M) zQudcIv^Zv39Q|njSP4MSl9uZH(|2C#a20v`d1ZB=ACl#UHy7uECwZe$h zY=iE0u2cSE7cFzXV(vr3zVR!)(B1&>_g9~t5S*Qp!}s=mTcEB1M3!i z3|u2&l#zwJ`c=rHQ2uz7LJ-9X`s40u2Oa_Ku-{{gyC9Ry7~Uka2-|MuTJ>JZpv+EB zIQ%X87qTazJqqfIieL)YGO^r7ZEXTafcfo4zbH_ zyajBH?5YA}Q3_Dr*k9RxyK2nn6xLcN%vTn$NXK+9df|l2GeqGkQwxRPUq)>VsXk+U za(;hv`CKO`{)AQoy3I2#aiUIWbfg4GjOLMG_C15SP}UJ+zvvkOKpg$`Seo;Ts_j5u zTSLtrI4B&Yxgn_2uW|0_^()WLo;z);vjmg4rGt8FUk|vjqrP80AG=WAFyjPsdba{- zoJ>{lZK4rK{uP|SPXYbuY6}jgHwmAXwD2g|bLwUUGsay2;J6}eo8|E3Nw5e;d6>_ zP2vaMURu!e-_A;HrpjtT09~k!@0r)$vNZ=17gq><__*S#`=R`|?Ptk^O%A4o=Eu893%=icw$bHDrD@B4ng``ud}yD!Qf_7w~S z0@+i@5eI;o3`hsm1{g#7(mjC5CM6~+0%W!{NngulKx3OlPGW*Uer^_7!)+$A0VU)N zWp5rR=weGRZK>D>7^S;@=Wz=B@ExS_iPp2tv0=M`yM@ z>-E$H%eLj}N2{v-8`^wUIfZY}7@;ccma5e{^>AB+Td))Aad;@Gx2t zr(64}KefWcA=33C3@`{%hm!MuFe1e*=e4<1B;bBkLpr3tc0<{+$1l?#qnnhfxM#D- zgSn|p;`nOS_9JFKVyy62VZ>V30O<8vh|?Kdm+R&;xOc09k%N~i5goaE=yWlf<1BSk zK>n?je>lx3U6f-g%2w;Umetk>)w#nxop!L_^&a?>k2j`Pu=&fHST5lmrX#S%`;Bp6MB7Mw znCca-3<$$(mOq!eDP-o-mqRT)z~T5lIIO2TS{p1=vl&P86Vn+zXw;B7mPB61yAEHd z9j{7YN2N0m$+~8p647U#*=fTZ1@;<6#r*vZ8ShgQsbzgh6ZPR15VbT+Qb-MDD@$Ugp(@tyTNQ*JDne})Fc$Bp}1xgo=`A3kw57lD~l2) zSW&t_cUn&G$r0J-!Br(~HK;&TFl%l)r7$gN%r1cVK5QG=0fup@@hce2YKj9&cN| g#=<3(*LY4QE6=16w?OUze;kMsxi8}8u4BCa0HM-h2><{9 literal 0 HcmV?d00001 diff --git a/assets/char_mario_x4_left.png b/assets/char_mario_x4_left.png new file mode 100644 index 0000000000000000000000000000000000000000..33cdef4584a1d3c81bbb5af781cf42fe23494f30 GIT binary patch literal 1327 zcmeAS@N?(olHy`uVBq!ia0vp^9zeW>gAGWU@6A#LQfx`y?k)`fL2$v|<&%LToCO|{ z#S9F3${@^GvDCf{D9B#o>Fdh=h(%JAN9E|GlwAxAEPFg%978H@y`Agp5fUhJ{P|bQ zK3>tREP1CZi!Lni6=2m>S<;k|s9PeK_(ZA0sUXwEakfI|qSh&nj(ItPjgGSy9AHvx z5s6}Pjgrce_nDSyx|ZwQ#dmLuYV-Hi{l7cY{Jq_?^FRMvKEG4>p7mvk)wAYplZ5_G zyx#O&O|2qM%W4tHHsvn0@cd_u}l< zS=q*~Jk4&{bn`eR35aNkJ-y8@B`<3#r?00c_HpT}S6fa_KB1t(<~Vb0bD!4PSG%73 z9d)I*O@=tqFzgeHfCM*63nmp-Cb)4bcy7e z=5_vlUHq@IPu&R%kc!`3HuqQ4mjxRy3O+9SRWn;XbBkH7@Wetx_wMkoe{yAZCjZR0fq55R-+ZMsTYat1shK8nppd&|rSXRQ zM^#_$-ZrcKalJfE3LK|&`K9FKxME%@y_MX>x6$$ZhObptdAUWOZSKyV=;*=IRJ4wd zD@1mYjpsF0&C~nBJ~yrkc)eoV+&Gs6ak^;1vamanta*w!hS*iJ&BKRo-zf? zZuxpc*NCIjF+i?*!r94wUrmntlwQ2|efi#X<@^7<@xS8GFIjEFg*mQ~Q@5C9$*J#{TKD|IPQk`-K9pRDVnnU~vqntDdlyFUxB8=^wSV_y0aSCG@zemR}ld zKIDgK37jty-vd_oWmiNB4 z_kLUa%Q61g?i(Q6rnt+Quy_9Y8`~Xgb6nJ{|5C-5SH|E(Uj9LvdA8Fe!mdKI;Vst0Iv*6kpKVy literal 0 HcmV?d00001 diff --git a/server.js b/server.js index 18f6812..47ee38f 100644 --- a/server.js +++ b/server.js @@ -9,7 +9,7 @@ const express = require('express'), qrCode = require('branded-qr-code'); /** CONSTANTS */ -const HOST = 'http://192.168.0.105:8080/client/'; +const HOST = 'http://100.119.37.224:8080/client/'; const players = [ { @@ -63,6 +63,8 @@ app.get(['/', '/index.html'], (req, res) => { layout: false, marioURL: HOST + players[0].id, luigiURL: HOST + players[1].id, + marioId: players[0].id, + luigiId: players[1].id, }); }); @@ -143,6 +145,10 @@ monitorNSP.on('connection', socket => { }); }); +function getPlayerFromId(id) { + return players.filter(el => el.id == id)[0]; +} + function guid() { function s4() { return Math.floor((1 + Math.random()) * 0x10000) @@ -151,7 +157,3 @@ function guid() { } return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } - -function getPlayerFromId(id) { - return players.filter(el => el.id == id)[0]; -} \ No newline at end of file diff --git a/src/views/server.hbs b/src/views/server.hbs index 9fb06ec..5c275d6 100644 --- a/src/views/server.hbs +++ b/src/views/server.hbs @@ -7,7 +7,9 @@ padding: 0; } - body {} + body { + overflow-x: hidden; + } img.check { filter: blur(10px); @@ -42,13 +44,13 @@ - + Mario - + Luigi @@ -56,7 +58,9 @@ + + @@ -100,44 +104,65 @@ let lastBtn; socket.on('moveStart_right', type => { if (type == 'mario') { - player.vel = 3; - lastBtn = 'right'; + playerMario.vel = playerMario.speed; + playerMario.lastBtn = 'right'; + } else if (type == 'luigi') { + playerLuigi.vel = playerLuigi.speed; + playerLuigi.lastBtn = 'right'; } }) socket.on('moveEnd_right', type => { - if (type == 'mario' && lastBtn == 'right') { - player.vel = 0; + if (type == 'mario' && playerMario.lastBtn == 'right') { + playerMario.vel = 0; + } else if (type == 'luigi' && playerLuigi.lastBtn == 'right') { + playerLuigi.vel = 0; } }) socket.on('moveStart_left', type => { if (type == 'mario') { - player.vel = -3; - lastBtn = 'left'; + playerMario.vel = -playerMario.speed; + playerMario.lastBtn = 'left'; + } else if (type == 'luigi') { + playerLuigi.vel = -playerLuigi.speed; + playerLuigi.lastBtn = 'left'; } }) socket.on('moveEnd_left', type => { - if (type == 'mario' && lastBtn == 'left') { - player.vel = 0; + if (type == 'mario' && playerMario.lastBtn == 'left') { + playerMario.vel = 0; + } else if (type == 'luigi' && playerLuigi.lastBtn == 'left') { + playerLuigi.vel = 0; } }) socket.on('moveStart_jump', type => { if (type == 'mario') { - if (player.velUp == 0) - player.velUp = 14; - console.log(player.velUp) + if (playerMario.velUp == 0 && playerMario.onGround) + playerMario.velUp = JUMP_HEIGHT; + } else if (type == 'luigi') { + if (playerLuigi.velUp == 0 && playerLuigi.onGround) + playerLuigi.velUp = JUMP_HEIGHT; } }) /** CANVAS VARS **/ const BLOCK_SIZE = 128, + GRAVITY = 14, + JUMP_HEIGHT = 20, canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), right = window.innerWidth, bottom = window.innerHeight, char_mario = document.getElementById('char_mario'), + char_mario_left = document.getElementById('char_mario_left'), char_luigi = document.getElementById('char_luigi'), + char_luigi_left = document.getElementById('char_luigi_left'), block_dirt = document.getElementById('block_dirt'), block_grass = document.getElementById('block_grass'); + + /*let player = { "mario": new Player('char_mario'), "luigi": new Player('char_luigi') };*/ + let playerMario = new Player('char_mario'); + let playerLuigi = new Player('char_luigi'); + let colliders = []; initGame(); function initGame() { canvas.width = window.innerWidth; @@ -146,9 +171,6 @@ window.requestAnimationFrame(draw); } - let player = new Player('char_mario'); - let colliders = []; - const grav = 5; function draw() { colliders = []; ctx.clearRect(0, 0, right, bottom); @@ -164,50 +186,110 @@ colliders.push({ x: x * BLOCK_SIZE, y: bottom - 3 * BLOCK_SIZE }); } + ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 6 * BLOCK_SIZE); + colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 6 * BLOCK_SIZE }); + ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE); + colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 5 * BLOCK_SIZE }); + ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 4 * BLOCK_SIZE); + colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 4 * BLOCK_SIZE }); + // ctx.drawImage(char_mario, 6 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE + 76); // 76 == offest to full block // ctx.drawImage(char_luigi, 5 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE + 48); // 48 == offest to full block - ctx.drawImage(char_mario, player.x, player.y); + ctx.drawImage(playerMario.vel < 0 ? char_mario_left : char_mario, playerMario.x, playerMario.y); + ctx.drawImage(playerLuigi.vel < 0 ? char_luigi_left : char_luigi, playerLuigi.x, playerLuigi.y); + + playerMario.move(); + playerMario.gravity(); + playerLuigi.move(); + playerLuigi.gravity(); - player.move(); - player.gravity(); window.requestAnimationFrame(draw); } function Player(type) { - this.x = 4 * BLOCK_SIZE; - this.y = 300; + this.x = 0; + this.y = 0; this.vel = 0; - this.height = 180; - this.width = 72; + this.speed = 6; this.type = type; + this.height = (type === 'char_mario') ? 180 : 208; + this.width = 72; this.velUp = 0; - - Player.prototype.gravity = () => { - if (this.y >= bottom - this.height) return; - if (this.velUp > 0) return; - if (this.vel >= 0 && colliders.filter(el => this.y + this.height >= el.y && this.y + this.height <= el.y + BLOCK_SIZE && this.x >= el.x && this.x <= el.x + BLOCK_SIZE).length) - return; - if (this.vel < 0 && colliders.filter(el => this.y + this.height >= el.y && this.y + this.height <= el.y + BLOCK_SIZE && this.x + this.width >= el.x && this.x + this.width <= el.x + BLOCK_SIZE).length) - return; - this.y = this.y + grav; - }; - - Player.prototype.move = () => { - if (this.velUp > 5) - this.y = this.y - 20; - if (this.velUp > 0) - this.velUp--; - if (this.x <= 0 && this.vel < 0) - return; - if (this.x >= right - this.width) - return; - if (this.vel >= 0 && colliders.filter(el => this.x + this.width >= el.x && this.x + this.width <= el.x + BLOCK_SIZE && this.y + this.height - 10 >= el.y && this.y + this.height - 10 <= el.y + BLOCK_SIZE).length) - return; - if (this.vel < 0 && colliders.filter(el => this.x >= el.x && this.x <= el.x + BLOCK_SIZE && this.y + this.height - 10 >= el.y && this.y + this.height - 10 <= el.y + BLOCK_SIZE).length) - return; - this.x = this.x + this.vel; - } + this.padding = 5; + this.lastBtn = ''; + this.onGround = false; } + + Player.prototype.gravity = function () { + if (this.y >= bottom - this.height) return; + if (this.velUp > 0) return; + // right movement and stopped movement + if (this.vel >= 0) { + let collision = colliders.filter(el => between(this.y + this.height + GRAVITY, el.y, el.y + BLOCK_SIZE) && between(this.x, el.x - this.width + this.padding, el.x + BLOCK_SIZE - this.padding)); + if (collision.length) { + this.y = collision[0].y - this.height; + this.onGround = true; + return; + } + } + //left movement + if (this.vel < 0) { + let collision = colliders.filter(el => between(this.y + this.height + GRAVITY, el.y, el.y + BLOCK_SIZE) && between(this.x, el.x - this.width + this.padding, el.x + BLOCK_SIZE - this.padding)); + if (collision.length) { + this.y = collision[0].y - this.height; + this.onGround = true; + return; + } + } + this.y = this.y + GRAVITY; + this.onGround = false; + }; + + Player.prototype.move = function () { + if (this.velUp > 3) + this.y = this.y - 27; + if (this.velUp > 0) + this.velUp--; + if (this.x <= 0 && this.vel < 0) + return; + if (this.x >= right - this.width && this.vel > 0) + return; + if (this.vel >= 0 && colliders.filter(el => between(this.x + this.width, el.x, el.x + BLOCK_SIZE) && between(this.y + this.height - this.padding, el.y, el.y + BLOCK_SIZE)).length) + return; + if (this.vel < 0 && colliders.filter(el => between(this.x, el.x, el.x + BLOCK_SIZE) && between(this.y + this.height - this.padding, el.y, el.y + BLOCK_SIZE)).length) + return; + this.x = this.x + this.vel; + } + + function between(val, min, max) { + return val >= min && val <= max; + } + + + + \ No newline at end of file