From d8be7817749a6bdd69afb181ecadaaa454ad1acc Mon Sep 17 00:00:00 2001 From: Bui Date: Wed, 22 Aug 2018 20:31:37 +0100 Subject: [PATCH] updates! --- index.html | 1 + src/js/assets.js | 17 +++- src/js/controller.js | 25 ++++- src/js/lib/SeamlessLoop.js | 201 +++++++++++++++++++++++++++++++++++++ src/js/scoresheet.js | 49 +++++---- src/js/songselect.js | 12 ++- src/js/view.js | 19 +++- 7 files changed, 293 insertions(+), 31 deletions(-) create mode 100644 src/js/lib/SeamlessLoop.js diff --git a/index.html b/index.html index 4e48bcc..dd66216 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@ + diff --git a/src/js/assets.js b/src/js/assets.js index dfbd2d7..81445a0 100644 --- a/src/js/assets.js +++ b/src/js/assets.js @@ -22,7 +22,11 @@ var assets = { 'bg-pattern-1.png', 'bg-pattern-2.png', 'ranking-S.png', - 'ranking-X.png' + 'ranking-X.png', + 'muzu_easy.png', + 'muzu_normal.png', + 'muzu_hard.png', + 'muzu_oni.png' ), audio: new Array( @@ -43,12 +47,19 @@ var assets = { 'cancel.wav', 'results.wav', 'diffsel.wav', + 'fullcombo.wav', + + 'gamefullcombo.wav', + 'gameclear.wav', + 'gamefail.wav', 'note_don.ogg', 'note_ka.ogg', - 'bgm_songsel.mp3', - 'bgm_results.mp3' + 'bgm_songsel.ogg', + 'bgm_songsel_loop.ogg', + 'bgm_result.ogg', + 'bgm_result_loop.ogg' ), songs: new Array(), diff --git a/src/js/controller.js b/src/js/controller.js index 3340e20..2d9d299 100644 --- a/src/js/controller.js +++ b/src/js/controller.js @@ -7,7 +7,7 @@ function Controller(selectedSong, songData){ var _songData = _songParser.getData(); var _game = new Game(this, selectedSong, _songData); - var _view = new View(this, _backgroundURL, selectedSong.title); + var _view = new View(this, _backgroundURL, selectedSong.title, selectedSong.difficulty); var _keyboard = new Keyboard(this); var _mainLoop; var _pauseMenu = false; @@ -74,8 +74,27 @@ function Controller(selectedSong, songData){ this.displayResults = function(){ clearInterval(_mainLoop); - var scoresheet = new Scoresheet(_this, _this.getGlobalScore()); - scoresheet.run(); + + + var score = _this.getGlobalScore(); + + if (score.fail == 0) { + vp = 'fullcombo'; + setTimeout(function(){ + assets.sounds['fullcombo'].play(); + }, 1350); + } else if (score.hp >= 50) { + vp = 'clear'; + } else { + vp = 'fail'; + } + + assets.sounds['game' + vp].play(); + + setTimeout(function(){ + var scoresheet = new Scoresheet(_this, _this.getGlobalScore()); + scoresheet.run(); + }, 7000); } this.displayScore = function(score, notPlayed){ diff --git a/src/js/lib/SeamlessLoop.js b/src/js/lib/SeamlessLoop.js new file mode 100644 index 0000000..a423b5a --- /dev/null +++ b/src/js/lib/SeamlessLoop.js @@ -0,0 +1,201 @@ +/** + * SeamlessLoop.js 2.0 - Reproduces seamless loops on HTML5/Javascript + * https://github.com/Hivenfour/SeamlessLoop + * + * Copyright (c) 2012 Main Software, + * Written by Darío Tejedor Rico. Contact mail: hivenfour@gmail.com + * The source code is freely distributable under the terms of LGPL license. + * License details at http://www.gnu.org/licenses/lgpl-3.0.txt + * + * USAGE: + * - Create the Seamlessloop object + * var loop = new SeamlessLoop(); + * + * - Add as many sounds as you will use, providing duration in miliseconds + * (sounds must be pre-loaded if you want to update the loop without gaps) + * loop.addUri(uri, length, "sound1"); + * loop.addUri(uri, length, "sound2"); + * ... + * + * - Establish your callback function that will be called when all sounds are pre-loaded + * loop.callback(soundsLoaded); + * + * - Start reproducing the seamless loop: + * function soundsLoaded() { + * var n = 1; + * loop.start("sound" + n); + * }; + * + * - Update the looping sound, you can do this + * synchronously (waiting the loop to finish) + * or asynchronously (change sound immediately): + * n++; + * loop.update("sound" + n, false); + * + * - Modify the seamless loop volume: + * loop.volume(0.5); + * loop.volume(loop.volume() + 0.1); + * + * - Stop the seamless loop: + * loop.stop(); + */ + +function SeamlessLoop() { + this.is = { + ff: Boolean(!(window.mozInnerScreenX == null) && /firefox/.test( navigator.userAgent.toLowerCase() )), + ie: Boolean(document.all && !window.opera), + opera: Boolean(window.opera), + chrome: Boolean(window.chrome), + safari: Boolean(!window.chrome && /safari/.test( navigator.userAgent.toLowerCase() ) && window.getComputedStyle && !window.globalStorage && !window.opera) + }; + console.debug("ff: " + this.is.ff); + console.debug("ie: " + this.is.ie); + console.debug("opera: " + this.is.opera); + console.debug("chrome: " + this.is.chrome); + console.debug("safari: " + this.is.safari); + this._total = 0; + this._load = 0; + this.cb_loaded; + this.cb_loaded_flag = new Boolean(); + this.timeout; + this.playDelay = -30; + this.stopDelay = 30; + if(this.is.chrome) this.playDelay = -25; + if(this.is.chrome) this.stopDelay = 25; + if(this.is.ff) this.playDelay = -25; + if(this.is.ff) this.stopDelay = 85; + if(this.is.opera) this.playDelay = 5; + if(this.is.opera) this.stopDelay = 0; + console.debug(this.playDelay + ", " + this.stopDelay); + this.next = 1; + this.audios = new Array(); + this.actual = new Array(); + this.dropOld = new Boolean(); + this.old; + this._volume = 1; + + var t = this; + this._eventCanplaythrough = function(audBool) { + if(audBool == false) { + audBool = true; + t._load++; + if(t._load == t._total) { + t.loaded = true; + if(t.cb_loaded_flag == true) { + t.cb_loaded(); + t.cb_loaded_flag = false; + } + } + } + }; + + this._eventPlaying = function(audMute) { + setTimeout(function() { + audMute.pause(); + try { + audMute.currentTime = 0; + } catch (e){console.debug(e.message);}; + }, t.stopDelay); + + if(t.dropOld == true) { + setTimeout(function() { + if(t.old.paused == false) { + t.old.pause(); + try { + t.old.currentTime = 0; + } catch (e){console.debug(e.message);}; + } + }, t.stopDelay); + t.dropOld = false; + } + }; + + this._eventEnded = function(aud) { + aud.volume = this._volume; + }; + + this.doLoop = function() { + var key = (this.next == 1 ? "_1" : "_2"); + var antikey = (this.next == 1 ? "_2" : "_1"); + + var t = this; + this.timeout = setTimeout(function() {t.doLoop();}, this.actual._length + this.playDelay); + + if(this.is.opera) this.actual[antikey].pause(); + + this.actual[key].play(); + this.next *= -1; + }; + + this.isLoaded = function() { + return Boolean(this._load == this._total); + }; +} + +SeamlessLoop.prototype.start = function(id) { + if(id != "") { + this.actual = this.audios[id]; + } + this.doLoop(); +}; + +SeamlessLoop.prototype.volume = function(vol) { + if(typeof vol != "undefined") { + this.actual._1.volume = vol; + this.actual._2.volume = vol; + this._volume = vol; + } + + return vol; +}; + +SeamlessLoop.prototype.stop = function() { + clearTimeout(this.timeout); + this.actual._1.currentTime = 0; + this.actual._1.pause(); + this.actual._2.currentTime = 0; + this.actual._2.pause(); +}; + +SeamlessLoop.prototype.callback = function(cb_loaded) { + this.cb_loaded = cb_loaded; + if(this.isLoaded() == true) cb_loaded(); + else this.cb_loaded_flag = true; +}; + +SeamlessLoop.prototype.update = function(id, sync) { + //var key = (this.next == 1 ? "_1" : "_2"); + var antikey = (this.next == 1 ? "_2" : "_1"); + + this.old = this.actual[antikey]; + this.actual = this.audios[id]; + if(sync == false) { + if(this.old.paused == false) { + this.dropOld = true; + if(this.is.opera) this.old.pause(); + } + clearTimeout(this.timeout); + this.doLoop(); + } +}; + +SeamlessLoop.prototype.addUri = function(uri, length, id) { + this.audios[id] = new Array(); + this.audios[id]._length = length; + var t = this; + this.audios[id]._1_isLoaded = new Boolean(); + this.audios[id]._2_isLoaded = new Boolean(); + this.audios[id]._1 = new Audio(uri); + this.audios[id]._2 = new Audio(uri); + this._total++; + this.audios[id]._1.addEventListener("canplaythrough", function() {t._eventCanplaythrough(t.audios[id]._1_isLoaded);}); + this.audios[id]._2.addEventListener("canplaythrough", function() {t._eventCanplaythrough(t.audios[id]._2_isLoaded);}); + this.audios[id]._1.addEventListener("playing", function() {t._eventPlaying(t.audios[id]._2);}); + this.audios[id]._2.addEventListener("playing", function() {t._eventPlaying(t.audios[id]._1);}); + this.audios[id]._1.addEventListener("ended", function() {t._eventEnded(t.audios[id]._1);}); + this.audios[id]._2.addEventListener("ended", function() {t._eventEnded(t.audios[id]._2);}); + this.audios[id]._1.load(); + this.audios[id]._2.load(); + this.audios[id]._1.volume = this._volume; + this.audios[id]._2.volume = this._volume; +}; diff --git a/src/js/scoresheet.js b/src/js/scoresheet.js index 9116f1d..ddbc247 100644 --- a/src/js/scoresheet.js +++ b/src/js/scoresheet.js @@ -7,20 +7,23 @@ function Scoresheet(controller, score){ this.setResults = function(){ - if(_score.hp==100) - _mark="double-gold"; - else if(_score.hp>=90 && _score.hp<100) - _mark="gold"; - else if(_score.hp>=70 && _score.hp<90) - _mark="silver"; - + if (_score.fail == 0) { + _mark = 'gold'; + } else if (_score.hp >= 50) { + _mark = 'silver'; + }; + var imgW = (_score.hp*$("#score-hp-bar-colour").width())/100; $("#score-hp-bar-colour img").css("clip", "rect(0, "+imgW+"px, "+$("#score-hp-bar-colour").height()+"px, 0)"); - if(_mark=="double-gold") $("#score-mark").attr("src", $("#ranking-X").attr("src")); - else if(_mark=="gold") $("#score-mark").attr("src", $("#ranking-S").attr("src")); - else $("#score-mark").remove(); - + if (_mark == 'gold') { + $("#score-mark").attr("src", '/assets/img/ranking-X.png'); + } else if (_mark == 'silver') { + $("#score-mark").attr("src", '/assets/img/ranking-S.png'); + } else { + $("#score-mark").remove(); + }; + $("#score-points").html(_score.points+"点"); $("#nb-great").html(_score.great); $("#nb-good").html(_score.good); @@ -74,32 +77,38 @@ function Scoresheet(controller, score){ } this.run = function(){ - assets.sounds["results"].play(); - - assets.sounds["bgm_results"].volume = 1; - assets.sounds["bgm_results"].play(); - _this.positionning(); _this.setResults(); $("#song-select").click(function(){ assets.sounds["don"].play(); - assets.sounds["bgm_results"].pause(); - assets.sounds["bgm_results"].currentTime = 0; + bgmloop2.stop(); controller.songSelection(); }); $("#replay").click(function(){ assets.sounds["don"].play(); - assets.sounds["bgm_results"].pause(); - assets.sounds["bgm_results"].currentTime = 0; + bgmloop2.stop(); controller.restartSong(); }); $(window).resize(_this.positionning); } + + assets.sounds["results"].play(); + console.log('init scoresheet bgm'); + bgmloop2 = new SeamlessLoop(); + bgmloop2.addUri('/assets/audio/bgm_result.ogg', 870, "bgm_result"); + bgmloop2.addUri('/assets/audio/bgm_result_loop.ogg', 16860, "bgm_result_loop"); + bgmloop2.callback(function(){ + bgmloop2.start('bgm_result'); + bgmloop2.update('bgm_result_loop'); + }); + + + $("#screen").load("/src/views/scoresheet.html", _this.run); } \ No newline at end of file diff --git a/src/js/songselect.js b/src/js/songselect.js index bbcf099..9aa4788 100644 --- a/src/js/songselect.js +++ b/src/js/songselect.js @@ -25,8 +25,7 @@ function SongSelect(){ _selectedSong.title = $(this).parent().closest('.song').find('.song-title').html(); _selectedSong.folder = songID+" "+_selectedSong.title; - assets.sounds["diffsel"].pause(); - assets.sounds["diffsel"].currentTime = 0; + bgmloop.stop(); new loadSong(_selectedSong); }); @@ -91,7 +90,14 @@ function SongSelect(){ this.createCode = function(){ - assets.sounds["bgm_songsel"].play(); + bgmloop = new SeamlessLoop(); + bgmloop.addUri('/assets/audio/bgm_songsel.ogg', 1450, "bgm_songsel"); + bgmloop.addUri('/assets/audio/bgm_songsel_loop.ogg', 2085, "bgm_songsel_loop"); + bgmloop.callback(function(){ + bgmloop.start('bgm_songsel'); + bgmloop.update('bgm_songsel_loop') + }); + setTimeout(function(){ assets.sounds["song-select"].play(); }, 200); diff --git a/src/js/view.js b/src/js/view.js index 9da4d33..ec44038 100644 --- a/src/js/view.js +++ b/src/js/view.js @@ -1,4 +1,4 @@ -function View(controller, bg, title){ +function View(controller, bg, title, diff){ var _this = this; var _canvas = document.getElementById('canvas'); @@ -33,6 +33,10 @@ function View(controller, bg, title){ var _HPBarColH;7 var _HPBarColWImage; var _HPBarColWCanvas; + var _diffW; + var _diffH; + var _diffX; + var _diffY; var _circleAnimatorT; var _animationStartPos; @@ -58,6 +62,7 @@ function View(controller, bg, title){ var _nextBeat=0; var _songTitle = title; + var _songDifficulty = diff.split('.').slice(0, -1).join('.'); this.run = function(){ _ctx.font = _mainFont; @@ -108,7 +113,11 @@ function View(controller, bg, title){ _HPbarColY = _HPBarY+0.14*_HPBarH; _HPBarColMaxW = _HPBarW-(0.075*_HPBarW); _HPBarColH = _HPBarH-(0.2*_HPBarH); - + _diffH = _winH * 0.16; + _diffW = _winW * 0.11; + _diffX = (_taikoX * 1.05)+15; + _diffY = _taikoY * 0.10; + var circles = controller.getCircles(); var currentCircle = controller.getCurrentCircle(); if(currentCircle==0){ @@ -142,6 +151,7 @@ function View(controller, bg, title){ this.drawCombo(); this.drawGlobalScore(); this.drawTime(); + this.drawDifficulty(); this.updateDonFaces();//animate circle face when combo superior to 50 @@ -457,6 +467,11 @@ function View(controller, bg, title){ this.togglePauseMenu = function(){ $("#pause-menu").is(":visible") ? $("#pause-menu").hide() : $("#pause-menu").show(); } + + this.drawDifficulty = function(){ + var muzu = document.getElementById('muzu_' + _songDifficulty); + _ctx.drawImage(muzu, _diffY, _diffX, _diffW, _diffH); + }; this.drawTime = function(){