diff --git a/client/src/App.vue b/client/src/App.vue index 8e37374..11c3fb6 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -5,6 +5,15 @@ TronIo logo

tron.io

Start +
+ + + Original + + + Ambiance + + @@ -20,6 +29,11 @@ export default { components: { Game }, + data () { + return { + music: 0 + } + }, computed: { isSocketConnected () { return this.$store.state.game.socketConnected @@ -31,8 +45,12 @@ export default { return this.$store.state.game.loggedIn } }, - mounted () { - sound.startBackgroundMusic() + watch: { + music: function (music) { + console.log('MUSIC ' + music) + sound.stopBackgroundMusic() + sound.startBackgroundMusic(music) + } }, methods: { loginPrompt () { diff --git a/client/src/assets/sound/1992.mp3 b/client/src/assets/sound/1992.mp3 new file mode 100644 index 0000000..5aa6544 Binary files /dev/null and b/client/src/assets/sound/1992.mp3 differ diff --git a/client/src/assets/sound/tmauvais.mp3 b/client/src/assets/sound/tmauvais.mp3 new file mode 100755 index 0000000..c2426dc Binary files /dev/null and b/client/src/assets/sound/tmauvais.mp3 differ diff --git a/client/src/assets/sprite/e.png b/client/src/assets/sprite/e.png new file mode 100644 index 0000000..201b12c Binary files /dev/null and b/client/src/assets/sprite/e.png differ diff --git a/client/src/assets/sprite/q.png b/client/src/assets/sprite/q.png new file mode 100644 index 0000000..498854e Binary files /dev/null and b/client/src/assets/sprite/q.png differ diff --git a/client/src/assets/sprite/r.png b/client/src/assets/sprite/r.png new file mode 100644 index 0000000..276bb10 Binary files /dev/null and b/client/src/assets/sprite/r.png differ diff --git a/client/src/assets/sprite/t.png b/client/src/assets/sprite/t.png new file mode 100644 index 0000000..086e84b Binary files /dev/null and b/client/src/assets/sprite/t.png differ diff --git a/client/src/components/Game.vue b/client/src/components/Game.vue index ee3e65c..9f08511 100644 --- a/client/src/components/Game.vue +++ b/client/src/components/Game.vue @@ -102,7 +102,8 @@ export default { if (player.state === 'DEAD') this.context.globalAlpha = 0.1 render.walls(this.context, this.canvas, this.camera, this.settings, player) - render.player(this.context, this.canvas, this.camera, this.settings, player) + if (player.name === 'e' || player.name === 'q' || player.name === 'r' || player.name === 't') render.playerFace(this.context, this.canvas, this.camera, this.settings, player, player.name) + else render.player(this.context, this.canvas, this.camera, this.settings, player) if (player.state === 'DEAD') this.context.globalAlpha = 1 this.stats.totalWalls += player.walls.length @@ -146,15 +147,6 @@ export default { player.y += this.settings.playerSpeed * Math.sin(player.angle) player.angle = player.targetAngle - // angle lag - /* - if (this.player.targetAngle !== this.player.angle) { - const delta = this.player.targetAngle - this.player.angle - if (delta < 0) this.player.angle += delta / this.settings.playerTurnSpeed - if (delta > 0) this.player.angle += delta / this.settings.playerTurnSpeed - if (delta <= 0.1 && delta >= -0.1) this.player.angle = this.player.targetAngle - } - */ }, interpolatePlayer (pastPlayer, nextPlayer, dt) { var player = {} diff --git a/client/src/game/render.js b/client/src/game/render.js index c817a39..a01b32e 100644 --- a/client/src/game/render.js +++ b/client/src/game/render.js @@ -1,3 +1,12 @@ +const e = new Image() +e.src = require('@/assets/sprite/e.png') +const q = new Image() +q.src = require('@/assets/sprite/q.png') +const r = new Image() +r.src = require('@/assets/sprite/r.png') +const t = new Image() +t.src = require('@/assets/sprite/t.png') + export const render = { borders (context, canvas, camera, settings) { context.strokeStyle = 'white' @@ -18,7 +27,6 @@ export const render = { // context.shadowBlur = 10 // context.shadowColor = player.color context.fillRect(-settings.playerSize, -settings.playerSize, settings.playerSize * 2, settings.playerSize * 2) - context.translate(0, 0) context.restore() @@ -26,6 +34,22 @@ export const render = { context.textAlign = 'center' context.fillText(player.name, canvasX, canvasY - settings.playerSize - 5) }, + playerFace (context, canvas, camera, settings, player, face) { + const canvasX = canvas.width / 2 + player.x - camera.x + const canvasY = canvas.height / 2 + player.y - camera.y + + const posX = canvasX - settings.playerSize * 2 + const posY = canvasY - settings.playerSize * 2 + const sizeL = settings.playerSize * 4 + const sizeH = settings.playerSize * 4 + + switch (face) { + case 'e' : context.drawImage(e, posX, posY, sizeL, sizeH); break + case 'q' : context.drawImage(q, posX, posY, sizeL, sizeH); break + case 'r' : context.drawImage(r, posX, posY, sizeL, sizeH); break + case 't' : context.drawImage(t, posX, posY, sizeL, sizeH); break + } + }, walls (context, canvas, camera, settings, player) { context.beginPath() context.lineWidth = settings.wallSize diff --git a/client/src/game/sound.js b/client/src/game/sound.js index 073b24e..7d9c490 100644 --- a/client/src/game/sound.js +++ b/client/src/game/sound.js @@ -1,23 +1,41 @@ -const music = new Audio(require('@/assets/sound/revengeOfCats.mp3')) +const music1 = new Audio(require('@/assets/sound/revengeOfCats.mp3')) +const music2 = new Audio(require('@/assets/sound/1992.mp3')) +const music3 = new Audio() // const motor = new Audio(require('@/assets/sound/motor.mp3')) const explosion = new Audio(require('@/assets/sound/explosion.mp3')) +const taunt = new Audio(require('@/assets/sound/tmauvais.mp3')) export const sound = { - startBackgroundMusic () { - music.loop = true - music.play() + startBackgroundMusic (n) { + music1.loop = true + music1.volume = 0.5 + music2.loop = true + music2.volume = 0.5 + music3.loop = true + music3.volume = 0.5 + + switch (n) { + case '1': music1.play(); break + case '2': music2.play(); break + case '3': music3.play(); break + } }, stopBackgroundMusic () { - music.pause() + music1.pause() + music2.pause() + music3.pause() }, + explosion () { + if (Math.floor(Math.random() * Math.floor(10)) === 0) taunt.play() + explosion.play() + } + /* startMotor () { motor.loop = true motor.play() }, stopMotor () { motor.pause() - }, - explosion () { - explosion.play() } + */ } diff --git a/client/src/store/socketPlugin.js b/client/src/store/socketPlugin.js index 3f72e3f..d1a8e23 100644 --- a/client/src/store/socketPlugin.js +++ b/client/src/store/socketPlugin.js @@ -1,7 +1,7 @@ import { ToastProgrammatic as Toast } from 'buefy' -const connection = new WebSocket('ws://localhost:8181/socket') -// const connection = new WebSocket('wss://tronio.gltronic.ovh/socket') +// const connection = new WebSocket('ws://localhost:8181/socket') +const connection = new WebSocket('wss://tronio.gltronic.ovh/socket') export default function createSocketPlugin () { return store => {