From 79c4cfcd9d658c326b17fdea3de20230477cbf1a Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Wed, 5 Sep 2018 19:46:26 +0300 Subject: [PATCH] Lots of gameplay improvements --- public/src/css/game.css | 3 + public/src/css/loader.css | 17 +- public/src/js/assets.js | 3 +- public/src/js/circle.js | 28 +- public/src/js/controller.js | 4 + public/src/js/game.js | 7 +- public/src/js/keyboard.js | 19 +- public/src/js/loader.js | 47 +- public/src/js/parsesong.js | 52 +- public/src/js/songselect.js | 24 +- public/src/js/view.js | 1171 ++++++++++++++++++----------------- 11 files changed, 738 insertions(+), 637 deletions(-) diff --git a/public/src/css/game.css b/public/src/css/game.css index cc74c06..831526f 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -2,9 +2,12 @@ width:100%; height:100%; overflow: hidden; + background-size:cover; } #canvas{ + position:relative; + z-index:1; width:100%; height:100%; } diff --git a/public/src/css/loader.css b/public/src/css/loader.css index 32e8b6f..2a34c07 100644 --- a/public/src/css/loader.css +++ b/public/src/css/loader.css @@ -16,13 +16,16 @@ } #loader .percentage{ - margin:auto; - width:100%; - text-align: center; + position:absolute; + top:0; + right:0; + bottom:0; + left:0; + display:flex; + justify-content:center; + align-items:center; + text-align:center; + font-family: sans-serif; font-size: 5vmin; color: white; - position:fixed; - top:53%; - margin-left:-30px; - } \ No newline at end of file diff --git a/public/src/js/assets.js b/public/src/js/assets.js index ce0aa27..55f1143 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -98,6 +98,7 @@ var assets = { 'TnT' ), - sounds: {} + sounds: {}, + image: {} }; \ No newline at end of file diff --git a/public/src/js/circle.js b/public/src/js/circle.js index a50d1fa..09be407 100644 --- a/public/src/js/circle.js +++ b/public/src/js/circle.js @@ -1,4 +1,4 @@ -function Circle(id, ms, type){ +function Circle(id, ms, type, text, speed){ var _id=id; var _ms = ms; @@ -42,15 +42,6 @@ function Circle(id, ms, type){ this.isAnimated = function(){ return _animating; } - - this.setInitPos = function(initPos){ - _pos.x = initPos.x; - _pos.y = initPos.y - } - - this.move = function(pxPerFrame){ - _pos.x -= pxPerFrame; - } this.getAnimT = function(){ return _animT; @@ -59,15 +50,6 @@ function Circle(id, ms, type){ this.incAnimT = function(){ _animT+=0.05; } - - this.moveTo = function(x, y){ - _pos.x=x; - _pos.y=y; - } - - this.getPos = function(){ - return _pos; - } this.updateStatus = function(status){ _status=status; @@ -101,4 +83,12 @@ function Circle(id, ms, type){ this.getID = function(){ return _id; } + + this.getText = function(){ + return text; + } + + this.getSpeed = function(){ + return speed; + } } \ No newline at end of file diff --git a/public/src/js/controller.js b/public/src/js/controller.js index 486866f..e90a53f 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -208,6 +208,10 @@ function Controller(selectedSong, songData, autoPlayEnabled){ _keyboard.waitForKeyup(key, type); } + this.getKeyTime = function(){ + return _keyboard.getKeyTime(); + } + this.updateCombo = function(score){ _game.updateCombo(score); } diff --git a/public/src/js/game.js b/public/src/js/game.js index 747b169..b5ec79d 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -149,9 +149,12 @@ function Game(controller, selectedSong, songData){ this.checkScore = function(circle){ + var keys = controller.getKeys() + var kbd = controller.getBindings() + if( - ((controller.getKeys()[86] || controller.getKeys()[66]) && (circle.getType()=="don" || circle.getType()=="daiDon")) || - ((controller.getKeys()[67] || controller.getKeys()[78]) && (circle.getType()=="ka" || circle.getType()=="daiKa")) + ((keys[kbd["don_l"]] || keys[kbd["don_r"]]) && (circle.getType()=="don" || circle.getType()=="daiDon")) || + ((keys[kbd["ka_l"]] || keys[kbd["ka_r"]]) && (circle.getType()=="ka" || circle.getType()=="daiKa")) ){ switch(circle.getStatus()){ diff --git a/public/src/js/keyboard.js b/public/src/js/keyboard.js index 1088f2b..5b31b16 100644 --- a/public/src/js/keyboard.js +++ b/public/src/js/keyboard.js @@ -13,6 +13,10 @@ function Keyboard(controller){ var _waitKeyupScore = {}; var _waitKeyupSound = {}; var _waitKeyupMenu = {}; + var _keyTime = { + "don": -Infinity, + "ka": -Infinity + } this.getBindings = function(){ return _kbd @@ -54,10 +58,10 @@ function Keyboard(controller){ if(!controller.autoPlayEnabled){ _gamepad.play() } - _this.checkKeySound(_kbd["don_l"], "note_don") - _this.checkKeySound(_kbd["don_r"], "note_don") - _this.checkKeySound(_kbd["ka_l"], "note_ka") - _this.checkKeySound(_kbd["ka_r"], "note_ka") + _this.checkKeySound(_kbd["don_l"], "don") + _this.checkKeySound(_kbd["don_r"], "don") + _this.checkKeySound(_kbd["ka_l"], "ka") + _this.checkKeySound(_kbd["ka_r"], "ka") } this.checkMenuKeys = function(){ @@ -80,7 +84,8 @@ function Keyboard(controller){ this.checkKeySound = function(keyCode, sound){ _this.checkKey(keyCode, "sound", function(){ - controller.playSound(sound); + controller.playSound("note_"+sound); + _keyTime[sound] = controller.getEllapsedTime().ms }) } @@ -112,5 +117,9 @@ function Keyboard(controller){ else if(type == "sound") _waitKeyupSound[key] = true; else if(type == "menu") _waitKeyupMenu[key] = true; } + + this.getKeyTime = function(){ + return _keyTime; + } } \ No newline at end of file diff --git a/public/src/js/loader.js b/public/src/js/loader.js index 3d633ae..7f71645 100644 --- a/public/src/js/loader.js +++ b/public/src/js/loader.js @@ -4,22 +4,32 @@ function Loader(){ var _loadedAssets=0; var _percentage=0; var _nbAssets=assets.audio.length+assets.img.length+assets.fonts.length+1; //+1 for song structures - + var _assetsDiv=document.getElementById("assets") + var _loaderPercentage + var _errorCount=0 + this.run = function(){ + _loaderPercentage = document.querySelector("#loader .percentage") + assets.fonts.forEach(function(name){ - var font = $("

I am a font

"); - font.appendTo("#assets"); - FontDetect.onFontLoaded (name, _this.assetLoaded, _this.fontFailed, {msTimeout: 90000}); + var font = document.createElement("h1") + font.style.fontFamily = name + font.appendChild(document.createTextNode("I am a font")) + _assetsDiv.appendChild(font) + FontDetect.onFontLoaded (name, _this.assetLoaded, _this.errorMsg, {msTimeout: 90000}); }); assets.img.forEach(function(name){ var id = name.substr(0, name.length-4); - var image = $(""); - image.appendTo("#assets"); - image.load(function(){ + var image = document.createElement("img") + image.addEventListener("load", event=>{ _this.assetLoaded(); - }); + }) + image.id = name + image.src = "/assets/img/" + name + _assetsDiv.appendChild(image) + assets.image[id] = image }); assets.audio.forEach(function(name){ @@ -42,29 +52,30 @@ function Loader(){ }); $.ajax({ - async:true, - type:"GET", - url:"/api/songs", - success:function(songs){ + url: "/api/songs", + mimeType: "application/json", + success: function(songs){ assets.songs = songs; _this.assetLoaded(); }, - error:function(){ - alert("An error occured, please refresh"); - } + error: _this.errorMsg }); } - this.fontFailed = function(){ - alert("An error occured, please refresh"); + this.errorMsg = function(){ + if(_errorCount == 0){ + _loaderPercentage.appendChild(document.createElement("br")) + _loaderPercentage.appendChild(document.createTextNode("An error occured, please refresh")) + } + _errorCount++ } this.assetLoaded = function(){ _loadedAssets++; _percentage=parseInt((_loadedAssets*100)/_nbAssets); $("#loader .progress").css("width", _percentage+"%"); - $("#loader .percentage").html(_percentage+"%"); + _loaderPercentage.firstChild.data=_percentage+"%" _this.checkIfEverythingLoaded(); } diff --git a/public/src/js/parsesong.js b/public/src/js/parsesong.js index 9dfd297..bbaf5c0 100644 --- a/public/src/js/parsesong.js +++ b/public/src/js/parsesong.js @@ -50,6 +50,7 @@ function ParseSong(fileContent){ case 'SliderMultiplier': _difficulty.sliderMultiplier = key; + _difficulty.originalMultiplier = key; break; case 'SliderTickRate': _difficulty.sliderTickRate = key; @@ -71,30 +72,40 @@ function ParseSong(fileContent){ var values = _data[i].split(","); - var sliderMultiplier; + var start=parseInt(values[0]) + var msOrPercent=parseFloat(values[1]) if(i==indexes.start){ - _beatInfo.beatInterval=parseFloat(values[1]); + start=0 + _beatInfo.beatInterval=msOrPercent; _beatInfo.bpm=parseInt((1000/_beatInfo.beatInterval)*60); - sliderMultiplier=1; } - else{ - sliderMultiplier=Math.abs(parseFloat(values[1]))/100; + if(msOrPercent<0){ + var sliderMultiplier=_difficulty.originalMultiplier*1/Math.abs(msOrPercent/100); + }else{ + var sliderMultiplier=500/msOrPercent; + _difficulty.originalMultiplier=sliderMultiplier } _timingPoints.push({ - start:parseInt(values[0]), + start:start, sliderMultiplier:sliderMultiplier, measure:parseInt(values[2]), }); } - + } + + this.parseMeasures = function(){ var measureNumber=0; for(var i=0; i<_timingPoints.length; i++){ var limit = (_timingPoints[i+1]) ? _timingPoints[i+1].start : _circles[_circles.length-1].getMS(); for(var j=_timingPoints[i].start; j<=limit; j+=_beatInfo.beatInterval){ - _measures.push({ms:j, x:$(window).width(), nb:measureNumber}); + _measures.push({ + ms:j, + nb:measureNumber, + speed:_timingPoints[i].sliderMultiplier + }); measureNumber++; if(measureNumber==_timingPoints[i].measure+1){ measureNumber=0; @@ -191,6 +202,16 @@ function ParseSong(fileContent){ var type; var txt; var emptyValue=false; + var start=parseInt(values[2]) + var speed=_difficulty.originalMultiplier + + for(var j=0; j<_timingPoints.length; j++){ + if(_timingPoints[j].start<=start){ + speed=_timingPoints[j].sliderMultiplier + }else{ + break + } + } switch(parseInt(values[4])){ case 0: @@ -203,11 +224,11 @@ function ParseSong(fileContent){ break; case 4: type="daiDon"; - txt="ドン"; + txt="ドン(大)"; break; case 6: type="daiKa"; - txt="カッ"; + txt="カッ(大)"; break; case 8: type="ka"; @@ -219,11 +240,11 @@ function ParseSong(fileContent){ break; case 12: type="daiKa"; - txt="カッ"; + txt="カッ(大)"; break; case 14: type="daiKa"; - txt="カッ"; + txt="カッ(大)"; break; default: console.log('[WARNING] Unknown note type found on line ' + i+1 + ': ' + _data[i]); @@ -231,16 +252,17 @@ function ParseSong(fileContent){ break; } if(!emptyValue) - _circles.push(new Circle(_circleID, parseInt(values[2]),type,txt)); + _circles.push(new Circle(_circleID,start,type,txt,speed)); } } _this.parseGeneralInfo(); _this.parseMetadata(); - _this.parseCircles(); _this.parseEditor(); - _this.parseTiming(); _this.parseDifficulty(); + _this.parseTiming(); + _this.parseCircles(); + _this.parseMeasures(); this.getData = function(){ return { diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index d5fa076..f2e51b0 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -6,6 +6,12 @@ function SongSelect(){ var _code=""; var _preview; var _preview_to; + var _diffNames={ + easy:"かんたん", + normal:"ふつう", + hard:"むずかしい", + oni:"おに" + } this.startPreview = function(id, prvtime, first_open=true) { var start = Date.now(); @@ -182,7 +188,7 @@ function SongSelect(){ }; _code += "