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 += "";
- for(var diff in songDifficulties){
+ for(var diff in _diffNames){
var diffName = diff;
var diffLevel = songDifficulties[diff];
if (!diffLevel) {
@@ -194,21 +200,7 @@ function SongSelect(){
starsDisplay+="★
";
}
- var diffTxt;
- switch(diffName){
- case 'easy':
- diffTxt="かんたん";
- break;
- case 'normal':
- diffTxt="ふつう";
- break;
- case 'hard':
- diffTxt="むずかしい";
- break;
- case 'oni':
- diffTxt="おに";
- break;
- }
+ var diffTxt=_diffNames[diffName]
_code += "- ";
_code+= ""+diffTxt+"";
diff --git a/public/src/js/view.js b/public/src/js/view.js
index 649d95a..e976a44 100644
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -1,584 +1,647 @@
-function View(controller, bg, title, diff){
-
- var _this = this;
- var _canvas = document.getElementById('canvas');
- var _ctx = _canvas.getContext('2d');
-
- var _winW = $(window).width();
- var _winH = $(window).height();
-
- /* Positionning and size variables */
- var _barH;
- var _barY;
- var _lyricsBarH;
- var _taikoW;
- var _taikoH;
- var _taikoX;
- var _taikoY;
- var _taikoSquareW = _winW/4;
- var _slotX = _taikoSquareW+100;;
- var _scoreSquareW;
- var _scoreSquareH;
- var _circleSize;
- var _bigCircleSize;
- var _circleY;
- var _lyricsSize;
- var _HPBarW;
- var _HPBarH;
- var _HPBarX;
- var _HPBarY;
- var _HPbarColX;
- var _HPbarColY;
- var _HPBarColMaxW;
- var _HPBarColH;7
- var _HPBarColWImage;
- var _HPBarColWCanvas;
- var _diffW;
- var _diffH;
- var _diffX;
- var _diffY;
-
- var _circleAnimatorT;
- var _animationStartPos;
-
- var _currentScore = 0;
- var _special="";
- var _scoreDispCount = -1;
- var _scoreOpacity = 1.0;
-
- var _mainTextColor = "white";
- var _mainFont = "normal 14pt TnT";
-
- var _lastMeasure = 0;
- var _currentTimingPoint=0;
- var _distanceForCircle=(_winW - _slotX); //Distance to be done by the circle
- var _timeForDistanceCircle;
-
- var _currentCircleFace=0;
-
- var _currentDonFace=0;
- var _currentBigDonFace=1;
-
- var _nextBeat=0;
-
- var _songTitle = title;
- var _songDifficulty = diff.split('.').slice(0, -1).join('.');
-
- this.run = function(){
- _ctx.font = _mainFont;
- _this.setBackground();
-
- $('.game-song').attr('alt', _songTitle).html(_songTitle);
-
- _this.refresh();
- }
-
- this.setBackground = function(){
- $("#game").css("background", "url('"+bg+"')");
- $("#game").css("-webkit-background-size", "cover");
- $("#game").css("-moz-background-size", "cover");
- $("#game").css("-o-background-size", "cover");
- $("#game").css("background-size", "cover");
- }
-
- this.getDistanceForCircle = function(){
- return _distanceForCircle;
- }
-
- this.positionning = function(){
+class View{
+ constructor(controller, bg, title, diff){
+ this.controller = controller
+ this.bg = bg
+ this.diff = diff
+ this.canvas = document.getElementById("canvas")
+ this.ctx = this.canvas.getContext("2d")
- _winW = $(window).width();
- _winH = $(window).height();
- _canvas.width = _winW;
- _canvas.height = _winH;
- _barY = 0.25*_winH;
- _barH = 0.23*_winH;
- _lyricsBarH = 0.2*_barH;
- _taikoH = _barH;
- _taikoW = _taikoH/1.2;
- _taikoX = _taikoSquareW-_taikoW-20;
- _taikoY = _barY+5;
- _taikoSquareW = _winW/4;
- _slotX = _taikoSquareW+100;
- _scoreSquareW = 0.55*_taikoSquareW;
- _scoreSquareH = 0.25*_barH;
- _circleSize = 0.15*_barH;
- _bigCircleSize = 0.25*_barH;
- _circleY = (_barY+((_barH-_lyricsBarH)/2));
- _lyricsSize = 0.6*_lyricsBarH;
- _HPBarW = 2.475*_taikoSquareW;
- _HPBarH = 0.35*_barH;
- _HPBarX = _taikoSquareW+1.15*_taikoW;
- _HPBarY = _barY-_HPBarH;
- _HPbarColX = _HPBarX+0.008*_HPBarW;
- _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){
- _HPBarColWImage = (controller.getGlobalScore().hp*650)/100;
- _HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100;
+ this.winW = $(window).width()
+ this.winH = $(window).height()
+
+ this.taikoSquareW = this.winW / 4
+ this.slotX = this.taikoSquareW + 100
+
+ this.currentScore = 0
+ this.special = ""
+ this.scoreDispCount = -1
+ this.scoreOpacity = 1.0
+
+ this.lastMeasure = 0
+ this.currentTimingPoint = 0
+ //Distance to be done by the circle
+ this.distanceForCircle = this.winW - this.slotX
+
+ this.currentCircleFace = 0
+ this.currentDonFace = 0
+ this.currentBigDonFace = 1
+ this.nextBeat = 0
+
+ this.songTitle = this.title
+ this.songDifficulty = this.diff.split(".").slice(0, -1).join(".")
+ }
+
+ run(){
+ this.ctx.font = "normal 14pt TnT"
+ this.setBackground()
+
+ $(".game-song").attr("alt", this.songTitle).html(this.songTitle)
+
+ this.refresh()
+ }
+
+ setBackground(){
+ $("#game").css("background-image", "url('" + this.bg + "')")
+ }
+
+ getDistanceForCircle(){
+ return this.distanceForCircle
+ }
+
+ positionning(){
+ this.winW = $(window).width()
+ this.winH = $(window).height()
+ this.canvas.width = this.winW
+ this.canvas.height = this.winH
+ this.barY = 0.25 * this.winH
+ this.barH = 0.23 * this.winH
+ this.lyricsBarH = 0.2 * this.barH
+ this.taikoH = this.barH
+ this.taikoW = this.taikoH / 1.2
+ this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2
+ this.taikoY = this.barY + 5
+ this.taikoSquareW = this.winW / 4
+ this.slotX = this.taikoSquareW + 100
+ this.scoreSquareW = this.taikoSquareW * 0.55
+ this.scoreSquareH = this.barH * 0.25
+ this.circleSize = this.barH * 0.15
+ this.bigCircleSize = this.barH * 0.25
+ this.circleY = this.barY + (this.barH - this.lyricsBarH) / 2
+ this.lyricsSize = this.lyricsBarH * 0.6
+ var HPBarRatio = 703 / 51
+ this.HPBarW = this.taikoSquareW * 2.475
+ this.HPBarH = this.barH * 0.35
+ if(this.HPBarW/this.HPBarH > HPBarRatio){
+ this.HPBarW = this.HPBarH * HPBarRatio
+ }else{
+ this.HPBarH = this.HPBarW / HPBarRatio
}
- else if(circles[currentCircle-1]){
- if(circles[currentCircle-1].isAnimationFinished() || circles[currentCircle-1].getScore()==0){
- _HPBarColWImage = (controller.getGlobalScore().hp*650)/100;
- _HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100;
- }
- }
-
+ this.HPBarX = this.winW - this.HPBarW
+ this.HPBarY = this.barY - this.HPBarH
+ this.HPbarColX = this.HPBarX + this.HPBarW * 0.008
+ this.HPbarColY = this.HPBarY + this.HPBarH * 0.14
+ this.HPBarColMaxW = this.HPBarW * 0.925
+ this.HPBarColH = this.HPBarH * 0.8
+ var diffRatio = 176 / 120
+ this.diffH = this.winH * 0.16
+ this.diffW = this.diffH*diffRatio
+ this.diffX = this.taikoX * 0.10
+ this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19
}
-
- this.refresh = function(){
-
- _this.positionning();
- _distanceForCircle=(_winW - _slotX);
- _timeForDistanceCircle=((20*_distanceForCircle)/controller.getHitcircleSpeed());
-
- /* Draw */
- this.drawBar();
- this.drawSlot();
- this.drawMeasures();
- this.drawHPBar();
- this.drawCircles();
- this.drawTaikoSquare();
- this.drawScore();
- this.drawPressedKeys();
- this.drawCombo();
- this.drawGlobalScore();
- this.drawTime();
- this.drawDifficulty();
+
+ refresh(){
+ this.positionning()
+ this.distanceForCircle = this.winW - this.slotX
- this.updateDonFaces();//animate circle face when combo superior to 50
-
- }
-
- this.updateDonFaces = function(){
-
- if(controller.getEllapsedTime().ms>=_nextBeat){
- _nextBeat+=controller.getSongData().beatInfo.beatInterval;
- if(controller.getCombo()>=50){
- _currentBigDonFace=(_currentBigDonFace+1)%2;
- _currentDonFace=(_currentDonFace+1)%2;
+ // Draw
+ this.drawBar()
+ this.drawSlot()
+ this.drawMeasures()
+ this.drawHPBar()
+ this.drawScore()
+ this.drawCircles()
+ this.drawTaikoSquare()
+ this.drawPressedKeys()
+ this.drawDifficulty()
+ this.drawCombo()
+ this.drawGlobalScore()
+ this.updateDonFaces()
+ //this.drawTime()
+ }
+
+ updateDonFaces(){
+ if(this.controller.getEllapsedTime().ms >= this.nextBeat){
+ this.nextBeat += this.controller.getSongData().beatInfo.beatInterval
+ if(this.controller.getCombo() >= 50){
+ this.currentBigDonFace = (this.currentBigDonFace + 1) % 2
+ this.currentDonFace = (this.currentDonFace + 1) % 2
}
else{
- _currentBigDonFace=1;
- _currentDonFace=0;
+ this.currentBigDonFace = 1
+ this.currentDonFace = 0
}
}
-
}
-
- this.drawHPBar = function(){
-
- var bottomSquareX = _taikoSquareW;
- var borderSize = 0.2*_HPBarH;
- _ctx.fillStyle = "black";
- _ctx.beginPath();
- _ctx.fillRect(_HPBarX+_HPBarW-(0.2*_HPBarY), _HPBarY, 0.2*_HPBarW, _HPBarH);//right hand black square
- _ctx.fillRect(bottomSquareX+borderSize, _HPBarY+0.435*_HPBarH, 0.5*_HPBarW, _HPBarH/2);
- _ctx.fillRect(bottomSquareX, _HPBarY+0.68*_HPBarH, 0.8*_HPBarW, _HPBarH/4);
- _ctx.arc(bottomSquareX+borderSize,_HPBarY+(0.435*_HPBarH)+borderSize,borderSize,0,Math.PI*2);
- _ctx.fill();
- _ctx.closePath();
-
- var barBG = document.getElementById('hp-bar-bg');
- var barColour = document.getElementById('hp-bar-colour');
-
- _ctx.drawImage(barBG, _HPBarX, _HPBarY, _HPBarW, _HPBarH);
- _ctx.drawImage(barColour, 0, 0, Math.max(1, Math.floor(_HPBarColWImage)), 40, _HPbarColX, _HPbarColY, _HPBarColWCanvas, _HPBarColH);
-
- }
-
- this.drawMeasures = function(){
-
- var measures = controller.getSongData().measures;
- var currentTime = controller.getEllapsedTime().ms;
-
- measures.forEach(function(measure, index){
- if(currentTime>=measure.ms-_timeForDistanceCircle && currentTime<=measure.ms+350 && measure.nb==0){
- _this.drawMeasure(measure);
- measure.x-=controller.getHitcircleSpeed();
- }
- else{
- measure.x=_winW; //set initial position to the extreme right of the screen
- }
- });
-
- }
-
- this.drawMeasure = function(measure){
- _ctx.strokeStyle = "#bab8b8";
- _ctx.lineWidth = "5.0";
- _ctx.beginPath();
- _ctx.moveTo(measure.x, _barY+5);
- _ctx.lineTo(measure.x, _barY+_barH-_lyricsBarH-5);
- _ctx.closePath();
- _ctx.stroke();
- }
-
- this.drawCombo = function(){
- if(controller.getCombo()>=10){
- var comboY = _barY+(_barH/2);
- var fontSize = (0.4)*_taikoH;
- _ctx.font = "normal "+fontSize+"px TnT";
- _ctx.textAlign = "center";
- _ctx.strokeStyle = "black";
- _ctx.strokeText(controller.getCombo(), _taikoSquareW-20-(_taikoW/2), comboY);
- _ctx.fillStyle = "white";
- _ctx.fillText(controller.getCombo(), _taikoSquareW-20-(_taikoW/2), comboY);
-
- var fontSize = (0.12)*_taikoH;
- _ctx.font = "normal "+fontSize+"px TnT";
- _ctx.textAlign = "center";
- _ctx.strokeStyle = "black";
- _ctx.strokeText("コンボ", _taikoSquareW-20-(_taikoW/2), comboY+1.5*fontSize);
- _ctx.fillStyle = "white";
- _ctx.fillText("コンボ", _taikoSquareW-20-(_taikoW/2), comboY+1.5*fontSize);
- _scoreDispCount++;
- }
- }
-
- this.drawGlobalScore = function(){
-
- /* Draw score square */
- _ctx.fillStyle="black";
- _ctx.beginPath();
- _ctx.fillRect(0,_barY,_scoreSquareW,_scoreSquareH-10);
- _ctx.fillRect(0,_barY,_scoreSquareW-10,_scoreSquareH);
- _ctx.arc(_scoreSquareW-10,_barY+(_scoreSquareH-10),10,0,Math.PI*2);
- _ctx.fill();
- _ctx.closePath();
-
- var fontSize = 0.7*_scoreSquareH;
- /* Draw score text */
- _ctx.font = "normal "+fontSize+"px TnT";
- _ctx.fillStyle = "white";
- _ctx.textAlign = "right";
- _ctx.fillText(controller.getGlobalScore().points, _scoreSquareW-20, _barY+0.7*_scoreSquareH);
- }
-
- this.drawPressedKeys = function(){
-
- var keyRed = document.getElementById("taiko-key-red");
- var keyBlue = document.getElementById("taiko-key-blue");
- var keys = controller.getKeys()
- var kbd = controller.getBindings()
-
- if(keys[kbd["ka_l"]]){
- var elemW = 0.45*_taikoW;
- _ctx.drawImage(keyBlue, 0, 0, 68, 124, _taikoX+0.05*_taikoW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
- }
-
- if(keys[kbd["don_l"]]){
- var elemW = 0.35*_taikoW;
- _ctx.drawImage(keyRed, 0, 0, 53, 100, _taikoX+0.15*_taikoW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
- }
-
- if(keys[kbd["don_r"]]){
- var elemW = 0.35*_taikoW;
- _ctx.drawImage(keyRed, 53, 0, 53, 100, (_taikoX+0.15*_taikoW)+elemW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
- }
-
- if(keys[kbd["ka_r"]]){
- var elemW = 0.45*_taikoW;
- _ctx.drawImage(keyBlue, 68, 0, 68, 124, (_taikoX+0.05*_taikoW)+elemW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
- }
-
- }
-
- this.displayScore = function(score, notPlayed){
- _currentScore=score;
- _special = (notPlayed) ? "-b" : "";
- _scoreDispCount=0;
- _scoreOpacity=1.0;
- }
-
- this.drawScore = function(){
-
- if(_scoreDispCount>=0 && _scoreDispCount<=20){
- _ctx.globalAlpha = _scoreOpacity;
- var scoreIMG = document.getElementById("score-"+_currentScore+_special);
- _ctx.drawImage(scoreIMG, _slotX-(_barH/2), (_barY+((_barH-_lyricsBarH)/2))-(_barH/2), _barH, _barH);
- _scoreDispCount++;
- if(_scoreOpacity-0.1>=0 && _currentScore!=0) _scoreOpacity-=0.1;
- }
- else if(_scoreDispCount==21){
- _scoreDispCount=-1;
- }
- _ctx.globalAlpha=1;
- }
-
- this.drawCircles = function(){
-
- var circles = controller.getCircles();
- circles.forEach(function(circle){
-
- var currentTime = controller.getEllapsedTime().ms;
- var startingTime = circle.getMS()-_timeForDistanceCircle;
- var finishTime = circle.getMS()+100; //at circle.getMS(), the cirlce fits the slot
+ drawHPBar(){
+ var bottomSquareX = this.taikoSquareW
+ var borderSize = this.HPBarH * 0.2
+ this.ctx.fillStyle = "#000"
+ this.ctx.beginPath()
+ // Right hand black square
+ this.ctx.fillRect(
+ this.HPBarX + this.HPBarW - this.HPBarY * 0.2,
+ this.HPBarY,
+ this.HPBarW * 0.2,
+ this.HPBarH
+ )
+ this.ctx.fillRect(
+ bottomSquareX + borderSize,
+ this.HPBarY + 0.435 * this.HPBarH,
+ this.winW - bottomSquareX - borderSize,
+ this.HPBarH / 2 + 1
+ )
+ this.ctx.fillRect(
+ bottomSquareX,
+ this.HPBarY + 0.68 * this.HPBarH,
+ this.HPBarW * 0.8,
+ this.HPBarH / 4 + 1
+ )
+ this.ctx.arc(
+ bottomSquareX+borderSize,
+ this.HPBarY+ 0.435 * this.HPBarH + borderSize,
+ borderSize,
+ 0,
+ Math.PI * 2
+ )
+ this.ctx.fill()
+ this.ctx.closePath()
+
+ this.ctx.fillOpacity = 0.5
+ this.ctx.drawImage(assets.image["hp-bar-bg"],
+ this.HPBarX, this.HPBarY,
+ this.HPBarW, this.HPBarH
+ )
+ this.ctx.fillOpacity = 1
+ var hpBar = this.getHP()
+ this.ctx.drawImage(assets.image["hp-bar-colour"],
+ 0, 0,
+ Math.max(1, hpBar.imgW), 40,
+ this.HPbarColX, this.HPbarColY,
+ hpBar.canvasW, this.HPBarColH
+ )
+ }
+
+ getHP(){
+ var circles = this.controller.getCircles()
+ var currentCircle = this.controller.getCurrentCircle()
+ var hp = this.controller.getGlobalScore().hp
+ var width = Math.floor(hp * 650 / 1000) * 10
+ return {
+ imgW: width,
+ canvasW: width / 650 * this.HPBarColMaxW
+ }
+ }
+
+ drawMeasures(){
+ var measures = this.controller.getSongData().measures
+ var currentTime = this.controller.getEllapsedTime().ms
+
+ measures.forEach((measure, index)=>{
+ var timeForDistance = 70 / this.circleSize * this.distanceForCircle / measure.speed
+ if(
+ currentTime >= measure.ms - timeForDistance
+ && currentTime <= measure.ms + 350
+ && measure.nb == 0
+ ){
+ this.drawMeasure(measure)
+ }
+ })
+ }
+
+ drawMeasure(measure){
+ var currentTime = this.controller.getEllapsedTime().ms
+ var measureX = this.slotX + measure.speed / (70 / this.circleSize) * (measure.ms - currentTime)
+ this.ctx.strokeStyle = "#bab8b8"
+ this.ctx.lineWidth = 2
+ this.ctx.beginPath()
+ this.ctx.moveTo(measureX, this.barY + 5)
+ this.ctx.lineTo(measureX, this.barY + this.barH - this.lyricsBarH - 5)
+ this.ctx.closePath()
+ this.ctx.stroke()
+ }
+
+ drawCombo(){
+ this.ctx.drawImage(assets.image.taiko,
+ this.taikoX, this.taikoY,
+ this.taikoW, this.taikoH
+ )
+
+ var comboCount = this.controller.getCombo()
+ if(comboCount >= 10){
+ var comboX = this.taikoX + this.taikoW / 2
+ var comboY = this.barY + this.barH / 2
+ var fontSize = this.taikoH * 0.4
+ this.ctx.font = "normal " + fontSize + "px TnT"
+ this.ctx.textAlign = "center"
+ this.ctx.strokeStyle = "#000"
+ this.ctx.lineWidth = fontSize / 10
+ var glyph = this.ctx.measureText("0").width
+ var comboText = this.controller.getCombo().toString().split("")
+ for(var i in comboText){
+ var textX = comboX + glyph * (i - (comboText.length - 1) / 2)
+ if(comboCount >= 100){
+ var grd = this.ctx.createLinearGradient(
+ textX - glyph * 0.2,
+ comboY - fontSize * 0.8,
+ textX + glyph * 0.2,
+ comboY - fontSize * 0.2
+ )
+ grd.addColorStop(0, "#f00")
+ grd.addColorStop(1, "#fe0")
+ this.ctx.fillStyle = grd
+ }else{
+ this.ctx.fillStyle = "#fff"
+ }
+ this.strokeFillText(comboText[i],
+ textX,
+ comboY
+ )
+ }
- if(!circle.getPlayed()){
-
- if(currentTime <= startingTime){
- var initPoint = {x:_winW, y:_circleY};
- circle.setInitPos(initPoint); //set initial position to the extreme right of the screen
+ var currentTime = this.controller.getEllapsedTime().ms
+ if(comboCount % 100 == 0 && !this.comboHasText){
+ this.comboHasText = currentTime
+ }
+ if(currentTime >= this.comboHasText + 2000){
+ this.comboHasText = false
+ }
+ if(this.comboHasText){
+ var fontSize = this.taikoH * 0.12
+ if(comboCount >= 100){
+ var grd = this.ctx.createLinearGradient(0, comboY + fontSize * 0.5, 0, comboY + fontSize * 1.5)
+ grd.addColorStop(0, "#f00")
+ grd.addColorStop(1, "#fe0")
+ this.ctx.fillStyle = grd
+ }else{
+ this.ctx.fillStyle = "#fff"
}
- if(currentTime > startingTime && currentTime <= finishTime){
- _this.drawCircle(circle);
- circle.move(controller.getHitcircleSpeed());
- }
-
- }
- else{ //Animate circle to the HP bar
+ this.ctx.font = "normal " + fontSize + "px TnT"
+ this.ctx.globalAlpha = Math.min(4 - ((currentTime - this.comboHasText) / 500),1)
+ this.strokeFillText("コンボ",
+ comboX,
+ comboY + fontSize * 1.5
+ )
+ this.ctx.globalAlpha = 1
+ }
+
+ this.scoreDispCount++
+ }
+ }
+
+ strokeFillText(text, x, y){
+ this.ctx.strokeText(text, x, y)
+ this.ctx.fillText(text, x, y)
+ }
+
+ drawGlobalScore(){
+ /* Draw score square */
+ this.ctx.fillStyle="#000"
+ this.ctx.beginPath()
+ this.ctx.fillRect(0, this.barY, this.scoreSquareW, this.scoreSquareH - 10)
+ this.ctx.fillRect(0, this.barY, this.scoreSquareW - 10, this.scoreSquareH)
+ this.ctx.arc(
+ this.scoreSquareW - 10,
+ this.barY + this.scoreSquareH - 10,
+ 10,
+ 0,
+ Math.PI * 2
+ )
+ this.ctx.fill()
+ this.ctx.closePath()
+
+ var fontSize = 0.7 * this.scoreSquareH
+ // Draw score text
+ this.ctx.font = "normal " + fontSize + "px TnT"
+ this.ctx.fillStyle = "#fff"
+ this.ctx.textAlign = "center"
+ var glyph = this.ctx.measureText("0").width
+ var pointsText = this.controller.getGlobalScore().points.toString().split("")
+ for(var i in pointsText){
+ this.ctx.fillText(pointsText[i],
+ this.scoreSquareW - 20 + glyph * (i - pointsText.length + 1),
+ this.barY + this.scoreSquareH * 0.7
+ )
+ }
+ }
+
+ drawPressedKeys(){
+ var keys = this.controller.getKeys()
+ var kbd = this.controller.getBindings()
+
+ if(keys[kbd["ka_l"]]){
+ var elemW = 0.45 * this.taikoW
+ this.ctx.drawImage(assets.image["taiko-key-blue"],
+ 0, 0, 68, 124,
+ this.taikoX + this.taikoW * 0.05,
+ this.taikoY + this.taikoH * 0.03,
+ elemW,
+ 124 / 68 * elemW
+ )
+ }
+
+ if(keys[kbd["don_l"]]){
+ var elemW = 0.35 * this.taikoW
+ this.ctx.drawImage(assets.image["taiko-key-red"],
+ 0, 0, 53, 100,
+ this.taikoX + this.taikoW * 0.15,
+ this.taikoY + this.taikoH * 0.09,
+ elemW,
+ 100 / 53 * elemW
+ )
+ }
+
+ if(keys[kbd["don_r"]]){
+ var elemW = 0.35 * this.taikoW
+ this.ctx.drawImage(assets.image["taiko-key-red"],
+ 53, 0, 53, 100,
+ this.taikoX + this.taikoW * 0.15 + elemW,
+ this.taikoY + this.taikoH * 0.09,
+ elemW,
+ 100 / 53 * elemW
+ )
+ }
+
+ if(keys[kbd["ka_r"]]){
+ var elemW = 0.45 * this.taikoW
+ this.ctx.drawImage(assets.image["taiko-key-blue"],
+ 68, 0, 68, 124,
+ this.taikoX + this.taikoW * 0.05 + elemW,
+ this.taikoY + this.taikoH * 0.03,
+ elemW,
+ 124 / 68 * elemW
+ )
+ }
+ }
+
+ displayScore(score, notPlayed){
+ this.currentScore = score
+ this.special = notPlayed ? "-b" : ""
+ this.scoreDispCount = 0
+ this.scoreOpacity = 1
+ }
+
+ drawScore(){
+ if(this.scoreDispCount >= 0 && this.scoreDispCount <= 20){
+ this.ctx.globalAlpha = this.scoreOpacity
+ var scoreIMG = assets.image["score-" + this.currentScore + this.special]
+ this.ctx.drawImage(scoreIMG,
+ this.slotX - this.barH / 2,
+ this.barY + (this.barH - this.lyricsBarH) / 2 - this.barH / 2,
+ this.barH,
+ this.barH
+ )
+ this.scoreDispCount++
+ if(this.scoreOpacity - 0.1 >= 0 && this.currentScore != 0){
+ this.scoreOpacity -= 0.1
+ }
+ }
+ else if(this.scoreDispCount == 21){
+ this.scoreDispCount = -1
+ }
+ this.ctx.globalAlpha = 1
+ }
+
+ drawCircles(){
+ var circles = this.controller.getCircles()
+ for(var i = circles.length; i--;){
+ var circle = circles[i]
+
+ var currentTime = this.controller.getEllapsedTime().ms
+ var timeForDistance = 70 / this.circleSize * this.distanceForCircle / circle.getSpeed() + this.bigCircleSize / 2
+ var startingTime = circle.getMS() - timeForDistance
+ // At circle.getMS(), the cirlce fits the slot
+ var finishTime = circle.getMS() + 100
+
+ if(!circle.getPlayed() && currentTime >= startingTime && currentTime <= finishTime){
+ this.drawCircle(circle)
+ }
+ else{
+ // Animate circle to the HP bar
- var animationDuration=470; //ms
+ // Animation in ms
+ var animationDuration = 470
- if(currentTime>finishTime && !circle.isAnimated() && circle.getScore()!=0){
- circle.animate();//start animation to HP bar
- _animationStartPos=circle.getPos().x;
- _this.drawCircle(circle);
- }
- else if(currentTime>finishTime && currentTime<=finishTime+animationDuration && circle.isAnimated()){
-
- var curveDistance = (_HPbarColX+_HPBarColWCanvas)-_animationStartPos;
- var circleBezP0={
- x:_animationStartPos,
- y:_circleY
- };
-
- var circleBezP1={
- x:_animationStartPos+(0.25*curveDistance),
- y:0.5*_barH
- };
-
- var circleBezP2={
- x:_animationStartPos+(0.75*curveDistance),
- y:-_barH
- };
-
- var circleBezP3={
- x:_animationStartPos+curveDistance,
- y:_HPbarColY
- };
- var bezierPoint = _this.calcBezierPoint(circle.getAnimT(), circleBezP0, circleBezP1, circleBezP2, circleBezP3);
- circle.moveTo(bezierPoint.x, bezierPoint.y);
- _this.drawCircle(circle);
-
- if(currentTime>=circle.getLastFrame()){//update animation frame
- circle.incAnimT();
- circle.incFrame();
+ if(!circle.isAnimated()){
+ if(circle.getScore() != 0){
+ // Start animation to HP bar
+ circle.animate()
}
}
- else if(currentTime>finishTime+animationDuration && circle.isAnimated()){
- circle.endAnimation();
+ if(circle.isAnimated()){
+ if(currentTime <= finishTime + animationDuration){
+ var curveDistance = this.HPBarX + this.HPBarW - this.slotX
+ var bezierPoint = this.calcBezierPoint(circle.getAnimT(), [{
+ x: this.slotX,
+ y: this.circleY
+ }, {
+ x: this.slotX + curveDistance * 0.15,
+ y: this.barH * 0.5
+ }, {
+ x: this.slotX + curveDistance * 0.35,
+ y: 0
+ }, {
+ x: this.slotX + curveDistance,
+ y: this.HPbarColY
+ }])
+ this.drawCircle(circle, {x: bezierPoint.x, y: bezierPoint.y})
+
+ // Update animation frame
+ circle.incAnimT()
+ circle.incFrame()
+ }
+ else{
+ circle.endAnimation()
+ }
}
}
- });
-
- }
+ }
+ }
- this.calcBezierPoint = function(t, p0, p1, p2, p3){
+ calcBezierPoint(t, data){
+ var at = 1 - t
- var data = [p0, p1, p2, p3];
- var at = 1-t;
-
- for(var i=1; i keyTime["ka"] ? "don" : "ka"
+ if(keyTime[sound] > currentTime - 200){
+ var gradients = {
+ "don": ["#f54c25", "#232323"],
+ "ka": ["#75cee9", "#232323"]
+ }
+ var grd = this.ctx.createLinearGradient(0, this.barY, this.winW, this.barH)
+ grd.addColorStop(0, gradients[sound][0])
+ grd.addColorStop(1, gradients[sound][1])
+ this.ctx.fillStyle = grd
+ this.ctx.rect(0, this.barY, this.winW, this.barH)
+ this.ctx.globalAlpha = 1 - (currentTime - keyTime[sound]) / 200
+ this.ctx.fill()
+ this.ctx.globalAlpha = 1
+ }
+
+ this.ctx.stroke()
+ // Lyrics bar
+ this.ctx.fillStyle = "#888888"
+ this.ctx.beginPath()
+ this.ctx.rect(0, this.barY + this.barH - this.lyricsBarH, this.winW, this.lyricsBarH)
+ this.ctx.closePath()
+ this.ctx.fill()
+ this.ctx.stroke()
+ }
+
+ drawSlot(){
+ // Main circle
+ this.ctx.fillStyle = "#6f6f6e"
+ this.ctx.beginPath()
+ this.ctx.arc(this.slotX, this.circleY, this.circleSize - 0.2 * this.circleSize, 0, 2 * Math.PI)
+ this.ctx.closePath()
+ this.ctx.fill()
+
+ // Big stroke circle
+ this.ctx.strokeStyle = "#9e9f9f"
+ this.ctx.lineWidth = 3
+ this.ctx.beginPath()
+ this.ctx.arc(this.slotX, this.circleY, this.circleSize, 0, 2 * Math.PI)
+ this.ctx.closePath()
+ this.ctx.stroke()
+
+ // Bigger stroke circle
+ this.ctx.strokeStyle = "#6f6f6e"
+ this.ctx.lineWidth = 3
+ this.ctx.beginPath()
+ this.ctx.arc(this.slotX, this.circleY, this.bigCircleSize, 0, 2 * Math.PI)
+ this.ctx.closePath()
+ this.ctx.stroke()
+ }
+
+ drawTaikoSquare(){
+ // Taiko square
+ this.ctx.lineWidth = 7
+ this.ctx.fillStyle = "#ff3c00"
+ this.ctx.strokeStyle = "#000"
+ this.ctx.beginPath()
+ this.ctx.rect(0,this.barY, this.taikoSquareW,this.barH)
+ this.ctx.fill()
+ this.ctx.closePath()
+ this.ctx.stroke()
+ }
}
\ No newline at end of file