Skip to content

T
Taiko Web
Commit 79c4cfcd authored by LoveEevee's avatar LoveEevee
Browse files
Options

Lots of gameplay improvements

parent 24053452
Show whitespace changes
Inline Side-by-side
Showing with 728 additions and 627 deletions
public/src/css/game.css
View file @ 79c4cfcd
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
width:100%; width:100%;
height:100%; height:100%;
overflow: hidden; overflow: hidden;
background-size:cover;
} }
#canvas{ #canvas{
position:relative;
z-index:1;
width:100%; width:100%;
height:100%; height:100%;
} }
......
public/src/css/loader.css
View file @ 79c4cfcd
...@@ -16,13 +16,16 @@ ...@@ -16,13 +16,16 @@
} }
#loader .percentage{ #loader .percentage{
margin:auto; position:absolute;
width:100%; top:0;
text-align: center; right:0;
bottom:0;
left:0;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
font-family: sans-serif;
font-size: 5vmin; font-size: 5vmin;
color: white; color: white;
position:fixed;
top:53%;
margin-left:-30px;
} }
\ No newline at end of file
public/src/js/assets.js
View file @ 79c4cfcd
...@@ -98,6 +98,7 @@ var assets = { ...@@ -98,6 +98,7 @@ var assets = {
'TnT' 'TnT'
), ),
sounds: {} sounds: {},
image: {}
}; };
\ No newline at end of file
public/src/js/circle.js
View file @ 79c4cfcd
function Circle(id, ms, type){ function Circle(id, ms, type, text, speed){
var _id=id; var _id=id;
var _ms = ms; var _ms = ms;
...@@ -43,15 +43,6 @@ function Circle(id, ms, type){ ...@@ -43,15 +43,6 @@ function Circle(id, ms, type){
return _animating; return _animating;
} }
this.setInitPos = function(initPos){
_pos.x = initPos.x;
_pos.y = initPos.y
}
this.move = function(pxPerFrame){
_pos.x -= pxPerFrame;
}
this.getAnimT = function(){ this.getAnimT = function(){
return _animT; return _animT;
} }
...@@ -60,15 +51,6 @@ function Circle(id, ms, type){ ...@@ -60,15 +51,6 @@ function Circle(id, ms, type){
_animT+=0.05; _animT+=0.05;
} }
this.moveTo = function(x, y){
_pos.x=x;
_pos.y=y;
}
this.getPos = function(){
return _pos;
}
this.updateStatus = function(status){ this.updateStatus = function(status){
_status=status; _status=status;
} }
...@@ -101,4 +83,12 @@ function Circle(id, ms, type){ ...@@ -101,4 +83,12 @@ function Circle(id, ms, type){
this.getID = function(){ this.getID = function(){
return _id; return _id;
} }
this.getText = function(){
return text;
}
this.getSpeed = function(){
return speed;
}
} }
\ No newline at end of file
public/src/js/controller.js
View file @ 79c4cfcd
...@@ -208,6 +208,10 @@ function Controller(selectedSong, songData, autoPlayEnabled){ ...@@ -208,6 +208,10 @@ function Controller(selectedSong, songData, autoPlayEnabled){
_keyboard.waitForKeyup(key, type); _keyboard.waitForKeyup(key, type);
} }
this.getKeyTime = function(){
return _keyboard.getKeyTime();
}
this.updateCombo = function(score){ this.updateCombo = function(score){
_game.updateCombo(score); _game.updateCombo(score);
} }
......
public/src/js/game.js
View file @ 79c4cfcd
...@@ -149,9 +149,12 @@ function Game(controller, selectedSong, songData){ ...@@ -149,9 +149,12 @@ function Game(controller, selectedSong, songData){
this.checkScore = function(circle){ this.checkScore = function(circle){
var keys = controller.getKeys()
var kbd = controller.getBindings()
if( if(
((controller.getKeys()[86] || controller.getKeys()[66]) && (circle.getType()=="don" || circle.getType()=="daiDon")) || ((keys[kbd["don_l"]] || keys[kbd["don_r"]]) && (circle.getType()=="don" || circle.getType()=="daiDon")) ||
((controller.getKeys()[67] || controller.getKeys()[78]) && (circle.getType()=="ka" || circle.getType()=="daiKa")) ((keys[kbd["ka_l"]] || keys[kbd["ka_r"]]) && (circle.getType()=="ka" || circle.getType()=="daiKa"))
){ ){
switch(circle.getStatus()){ switch(circle.getStatus()){
......
public/src/js/keyboard.js
View file @ 79c4cfcd
...@@ -13,6 +13,10 @@ function Keyboard(controller){ ...@@ -13,6 +13,10 @@ function Keyboard(controller){
var _waitKeyupScore = {}; var _waitKeyupScore = {};
var _waitKeyupSound = {}; var _waitKeyupSound = {};
var _waitKeyupMenu = {}; var _waitKeyupMenu = {};
var _keyTime = {
"don": -Infinity,
"ka": -Infinity
}
this.getBindings = function(){ this.getBindings = function(){
return _kbd return _kbd
...@@ -54,10 +58,10 @@ function Keyboard(controller){ ...@@ -54,10 +58,10 @@ function Keyboard(controller){
if(!controller.autoPlayEnabled){ if(!controller.autoPlayEnabled){
_gamepad.play() _gamepad.play()
} }
_this.checkKeySound(_kbd["don_l"], "note_don") _this.checkKeySound(_kbd["don_l"], "don")
_this.checkKeySound(_kbd["don_r"], "note_don") _this.checkKeySound(_kbd["don_r"], "don")
_this.checkKeySound(_kbd["ka_l"], "note_ka") _this.checkKeySound(_kbd["ka_l"], "ka")
_this.checkKeySound(_kbd["ka_r"], "note_ka") _this.checkKeySound(_kbd["ka_r"], "ka")
} }
this.checkMenuKeys = function(){ this.checkMenuKeys = function(){
...@@ -80,7 +84,8 @@ function Keyboard(controller){ ...@@ -80,7 +84,8 @@ function Keyboard(controller){
this.checkKeySound = function(keyCode, sound){ this.checkKeySound = function(keyCode, sound){
_this.checkKey(keyCode, "sound", function(){ _this.checkKey(keyCode, "sound", function(){
controller.playSound(sound); controller.playSound("note_"+sound);
_keyTime[sound] = controller.getEllapsedTime().ms
}) })
} }
...@@ -113,4 +118,8 @@ function Keyboard(controller){ ...@@ -113,4 +118,8 @@ function Keyboard(controller){
else if(type == "menu") _waitKeyupMenu[key] = true; else if(type == "menu") _waitKeyupMenu[key] = true;
} }
this.getKeyTime = function(){
return _keyTime;
}
} }
\ No newline at end of file
public/src/js/loader.js
View file @ 79c4cfcd
...@@ -4,22 +4,32 @@ function Loader(){ ...@@ -4,22 +4,32 @@ function Loader(){
var _loadedAssets=0; var _loadedAssets=0;
var _percentage=0; var _percentage=0;
var _nbAssets=assets.audio.length+assets.img.length+assets.fonts.length+1; //+1 for song structures 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(){ this.run = function(){
_loaderPercentage = document.querySelector("#loader .percentage")
assets.fonts.forEach(function(name){ assets.fonts.forEach(function(name){
var font = $("<h1 style='font-family:"+name+"'>I am a font</h1>"); var font = document.createElement("h1")
font.appendTo("#assets"); font.style.fontFamily = name
FontDetect.onFontLoaded (name, _this.assetLoaded, _this.fontFailed, {msTimeout: 90000}); 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){ assets.img.forEach(function(name){
var id = name.substr(0, name.length-4); var id = name.substr(0, name.length-4);
var image = $("<img id='"+id+"' src='/assets/img/"+name+"' />"); var image = document.createElement("img")
image.appendTo("#assets"); image.addEventListener("load", event=>{
image.load(function(){
_this.assetLoaded(); _this.assetLoaded();
}); })
image.id = name
image.src = "/assets/img/" + name
_assetsDiv.appendChild(image)
assets.image[id] = image
}); });
assets.audio.forEach(function(name){ assets.audio.forEach(function(name){
...@@ -42,29 +52,30 @@ function Loader(){ ...@@ -42,29 +52,30 @@ function Loader(){
}); });
$.ajax({ $.ajax({
async:true, url: "/api/songs",
type:"GET", mimeType: "application/json",
url:"/api/songs", success: function(songs){
success:function(songs){
assets.songs = songs; assets.songs = songs;
_this.assetLoaded(); _this.assetLoaded();
}, },
error:function(){ error: _this.errorMsg
alert("An error occured, please refresh");
}
}); });
} }
this.fontFailed = function(){ this.errorMsg = function(){
alert("An error occured, please refresh"); if(_errorCount == 0){
_loaderPercentage.appendChild(document.createElement("br"))
_loaderPercentage.appendChild(document.createTextNode("An error occured, please refresh"))
}
_errorCount++
} }
this.assetLoaded = function(){ this.assetLoaded = function(){
_loadedAssets++; _loadedAssets++;
_percentage=parseInt((_loadedAssets*100)/_nbAssets); _percentage=parseInt((_loadedAssets*100)/_nbAssets);
$("#loader .progress").css("width", _percentage+"%"); $("#loader .progress").css("width", _percentage+"%");
$("#loader .percentage").html(_percentage+"%"); _loaderPercentage.firstChild.data=_percentage+"%"
_this.checkIfEverythingLoaded(); _this.checkIfEverythingLoaded();
} }
......
public/src/js/parsesong.js
View file @ 79c4cfcd
...@@ -50,6 +50,7 @@ function ParseSong(fileContent){ ...@@ -50,6 +50,7 @@ function ParseSong(fileContent){
case 'SliderMultiplier': case 'SliderMultiplier':
_difficulty.sliderMultiplier = key; _difficulty.sliderMultiplier = key;
_difficulty.originalMultiplier = key;
break; break;
case 'SliderTickRate': case 'SliderTickRate':
_difficulty.sliderTickRate = key; _difficulty.sliderTickRate = key;
...@@ -71,30 +72,40 @@ function ParseSong(fileContent){ ...@@ -71,30 +72,40 @@ function ParseSong(fileContent){
var values = _data[i].split(","); var values = _data[i].split(",");
var sliderMultiplier; var start=parseInt(values[0])
var msOrPercent=parseFloat(values[1])
if(i==indexes.start){ if(i==indexes.start){
_beatInfo.beatInterval=parseFloat(values[1]); start=0
_beatInfo.beatInterval=msOrPercent;
_beatInfo.bpm=parseInt((1000/_beatInfo.beatInterval)*60); _beatInfo.bpm=parseInt((1000/_beatInfo.beatInterval)*60);
sliderMultiplier=1;
} }
else{ if(msOrPercent<0){
sliderMultiplier=Math.abs(parseFloat(values[1]))/100; var sliderMultiplier=_difficulty.originalMultiplier*1/Math.abs(msOrPercent/100);
}else{
var sliderMultiplier=500/msOrPercent;
_difficulty.originalMultiplier=sliderMultiplier
} }
_timingPoints.push({ _timingPoints.push({
start:parseInt(values[0]), start:start,
sliderMultiplier:sliderMultiplier, sliderMultiplier:sliderMultiplier,
measure:parseInt(values[2]), measure:parseInt(values[2]),
}); });
} }
}
this.parseMeasures = function(){
var measureNumber=0; var measureNumber=0;
for(var i=0; i<_timingPoints.length; i++){ for(var i=0; i<_timingPoints.length; i++){
var limit = (_timingPoints[i+1]) ? _timingPoints[i+1].start : _circles[_circles.length-1].getMS(); 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){ 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++; measureNumber++;
if(measureNumber==_timingPoints[i].measure+1){ if(measureNumber==_timingPoints[i].measure+1){
measureNumber=0; measureNumber=0;
...@@ -191,6 +202,16 @@ function ParseSong(fileContent){ ...@@ -191,6 +202,16 @@ function ParseSong(fileContent){
var type; var type;
var txt; var txt;
var emptyValue=false; 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])){ switch(parseInt(values[4])){
case 0: case 0:
...@@ -203,11 +224,11 @@ function ParseSong(fileContent){ ...@@ -203,11 +224,11 @@ function ParseSong(fileContent){
break; break;
case 4: case 4:
type="daiDon"; type="daiDon";
txt="ドン"; txt="ドン(大)";
break; break;
case 6: case 6:
type="daiKa"; type="daiKa";
txt="カッ"; txt="カッ(大)";
break; break;
case 8: case 8:
type="ka"; type="ka";
...@@ -219,11 +240,11 @@ function ParseSong(fileContent){ ...@@ -219,11 +240,11 @@ function ParseSong(fileContent){
break; break;
case 12: case 12:
type="daiKa"; type="daiKa";
txt="カッ"; txt="カッ(大)";
break; break;
case 14: case 14:
type="daiKa"; type="daiKa";
txt="カッ"; txt="カッ(大)";
break; break;
default: default:
console.log('[WARNING] Unknown note type found on line ' + i+1 + ': ' + _data[i]); console.log('[WARNING] Unknown note type found on line ' + i+1 + ': ' + _data[i]);
...@@ -231,16 +252,17 @@ function ParseSong(fileContent){ ...@@ -231,16 +252,17 @@ function ParseSong(fileContent){
break; break;
} }
if(!emptyValue) if(!emptyValue)
_circles.push(new Circle(_circleID, parseInt(values[2]),type,txt)); _circles.push(new Circle(_circleID,start,type,txt,speed));
} }
} }
_this.parseGeneralInfo(); _this.parseGeneralInfo();
_this.parseMetadata(); _this.parseMetadata();
_this.parseCircles();
_this.parseEditor(); _this.parseEditor();
_this.parseTiming();
_this.parseDifficulty(); _this.parseDifficulty();
_this.parseTiming();
_this.parseCircles();
_this.parseMeasures();
this.getData = function(){ this.getData = function(){
return { return {
......
public/src/js/songselect.js
View file @ 79c4cfcd
...@@ -6,6 +6,12 @@ function SongSelect(){ ...@@ -6,6 +6,12 @@ function SongSelect(){
var _code=""; var _code="";
var _preview; var _preview;
var _preview_to; var _preview_to;
var _diffNames={
easy:"かんたん",
normal:"ふつう",
hard:"むずかしい",
oni:"おに"
}
this.startPreview = function(id, prvtime, first_open=true) { this.startPreview = function(id, prvtime, first_open=true) {
var start = Date.now(); var start = Date.now();
...@@ -182,7 +188,7 @@ function SongSelect(){ ...@@ -182,7 +188,7 @@ function SongSelect(){
}; };
_code += "</div><ul class='difficulties'>"; _code += "</div><ul class='difficulties'>";
for(var diff in songDifficulties){ for(var diff in _diffNames){
var diffName = diff; var diffName = diff;
var diffLevel = songDifficulties[diff]; var diffLevel = songDifficulties[diff];
if (!diffLevel) { if (!diffLevel) {
...@@ -194,21 +200,7 @@ function SongSelect(){ ...@@ -194,21 +200,7 @@ function SongSelect(){
starsDisplay+="&#9733;<br>"; starsDisplay+="&#9733;<br>";
} }
var diffTxt; var diffTxt=_diffNames[diffName]
switch(diffName){
case 'easy':
diffTxt="かんたん";
break;
case 'normal':
diffTxt="ふつう";
break;
case 'hard':
diffTxt="むずかしい";
break;
case 'oni':
diffTxt="おに";
break;
}
_code += "<li class='difficulty "+diffName+"'>"; _code += "<li class='difficulty "+diffName+"'>";
_code+= "<span class='diffname'>"+diffTxt+"</span>"; _code+= "<span class='diffname'>"+diffTxt+"</span>";
......
public/src/js/view.js
View file @ 79c4cfcd
function View(controller, bg, title, diff){ class View{
constructor(controller, bg, title, diff){
var _this = this; this.controller = controller
var _canvas = document.getElementById('canvas'); this.bg = bg
var _ctx = _canvas.getContext('2d'); this.diff = diff
this.canvas = document.getElementById("canvas")
var _winW = $(window).width(); this.ctx = this.canvas.getContext("2d")
var _winH = $(window).height();
this.winW = $(window).width()
/* Positionning and size variables */ this.winH = $(window).height()
var _barH;
var _barY; this.taikoSquareW = this.winW / 4
var _lyricsBarH; this.slotX = this.taikoSquareW + 100
var _taikoW;
var _taikoH; this.currentScore = 0
var _taikoX; this.special = ""
var _taikoY; this.scoreDispCount = -1
var _taikoSquareW = _winW/4; this.scoreOpacity = 1.0
var _slotX = _taikoSquareW+100;;
var _scoreSquareW; this.lastMeasure = 0
var _scoreSquareH; this.currentTimingPoint = 0
var _circleSize; //Distance to be done by the circle
var _bigCircleSize; this.distanceForCircle = this.winW - this.slotX
var _circleY;
var _lyricsSize; this.currentCircleFace = 0
var _HPBarW; this.currentDonFace = 0
var _HPBarH; this.currentBigDonFace = 1
var _HPBarX; this.nextBeat = 0
var _HPBarY;
var _HPbarColX; this.songTitle = this.title
var _HPbarColY; this.songDifficulty = this.diff.split(".").slice(0, -1).join(".")
var _HPBarColMaxW; }
var _HPBarColH;7
var _HPBarColWImage; run(){
var _HPBarColWCanvas; this.ctx.font = "normal 14pt TnT"
var _diffW; this.setBackground()
var _diffH;
var _diffX; $(".game-song").attr("alt", this.songTitle).html(this.songTitle)
var _diffY;
this.refresh()
var _circleAnimatorT; }
var _animationStartPos;
setBackground(){
var _currentScore = 0; $("#game").css("background-image", "url('" + this.bg + "')")
var _special=""; }
var _scoreDispCount = -1;
var _scoreOpacity = 1.0; getDistanceForCircle(){
return this.distanceForCircle
var _mainTextColor = "white"; }
var _mainFont = "normal 14pt TnT";
positionning(){
var _lastMeasure = 0; this.winW = $(window).width()
var _currentTimingPoint=0; this.winH = $(window).height()
var _distanceForCircle=(_winW - _slotX); //Distance to be done by the circle this.canvas.width = this.winW
var _timeForDistanceCircle; this.canvas.height = this.winH
this.barY = 0.25 * this.winH
var _currentCircleFace=0; this.barH = 0.23 * this.winH
this.lyricsBarH = 0.2 * this.barH
var _currentDonFace=0; this.taikoH = this.barH
var _currentBigDonFace=1; this.taikoW = this.taikoH / 1.2
this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2
var _nextBeat=0; this.taikoY = this.barY + 5
this.taikoSquareW = this.winW / 4
var _songTitle = title; this.slotX = this.taikoSquareW + 100
var _songDifficulty = diff.split('.').slice(0, -1).join('.'); this.scoreSquareW = this.taikoSquareW * 0.55
this.scoreSquareH = this.barH * 0.25
this.run = function(){ this.circleSize = this.barH * 0.15
_ctx.font = _mainFont; this.bigCircleSize = this.barH * 0.25
_this.setBackground(); this.circleY = this.barY + (this.barH - this.lyricsBarH) / 2
this.lyricsSize = this.lyricsBarH * 0.6
$('.game-song').attr('alt', _songTitle).html(_songTitle); var HPBarRatio = 703 / 51
this.HPBarW = this.taikoSquareW * 2.475
_this.refresh(); this.HPBarH = this.barH * 0.35
} if(this.HPBarW/this.HPBarH > HPBarRatio){
this.HPBarW = this.HPBarH * HPBarRatio
this.setBackground = function(){ }else{
$("#game").css("background", "url('"+bg+"')"); this.HPBarH = this.HPBarW / HPBarRatio
$("#game").css("-webkit-background-size", "cover"); }
$("#game").css("-moz-background-size", "cover"); this.HPBarX = this.winW - this.HPBarW
$("#game").css("-o-background-size", "cover"); this.HPBarY = this.barY - this.HPBarH
$("#game").css("background-size", "cover"); this.HPbarColX = this.HPBarX + this.HPBarW * 0.008
} this.HPbarColY = this.HPBarY + this.HPBarH * 0.14
this.HPBarColMaxW = this.HPBarW * 0.925
this.getDistanceForCircle = function(){ this.HPBarColH = this.HPBarH * 0.8
return _distanceForCircle; var diffRatio = 176 / 120
} this.diffH = this.winH * 0.16
this.diffW = this.diffH*diffRatio
this.positionning = function(){ this.diffX = this.taikoX * 0.10
this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19
_winW = $(window).width(); }
_winH = $(window).height();
_canvas.width = _winW; refresh(){
_canvas.height = _winH; this.positionning()
_barY = 0.25*_winH; this.distanceForCircle = this.winW - this.slotX
_barH = 0.23*_winH;
_lyricsBarH = 0.2*_barH; // Draw
_taikoH = _barH; this.drawBar()
_taikoW = _taikoH/1.2; this.drawSlot()
_taikoX = _taikoSquareW-_taikoW-20; this.drawMeasures()
_taikoY = _barY+5; this.drawHPBar()
_taikoSquareW = _winW/4; this.drawScore()
_slotX = _taikoSquareW+100; this.drawCircles()
_scoreSquareW = 0.55*_taikoSquareW; this.drawTaikoSquare()
_scoreSquareH = 0.25*_barH; this.drawPressedKeys()
_circleSize = 0.15*_barH; this.drawDifficulty()
_bigCircleSize = 0.25*_barH; this.drawCombo()
_circleY = (_barY+((_barH-_lyricsBarH)/2)); this.drawGlobalScore()
_lyricsSize = 0.6*_lyricsBarH; this.updateDonFaces()
_HPBarW = 2.475*_taikoSquareW; //this.drawTime()
_HPBarH = 0.35*_barH; }
_HPBarX = _taikoSquareW+1.15*_taikoW;
_HPBarY = _barY-_HPBarH; updateDonFaces(){
_HPbarColX = _HPBarX+0.008*_HPBarW; if(this.controller.getEllapsedTime().ms >= this.nextBeat){
_HPbarColY = _HPBarY+0.14*_HPBarH; this.nextBeat += this.controller.getSongData().beatInfo.beatInterval
_HPBarColMaxW = _HPBarW-(0.075*_HPBarW); if(this.controller.getCombo() >= 50){
_HPBarColH = _HPBarH-(0.2*_HPBarH); this.currentBigDonFace = (this.currentBigDonFace + 1) % 2
_diffH = _winH * 0.16; this.currentDonFace = (this.currentDonFace + 1) % 2
_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;
}
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.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();
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;
}
else{
_currentBigDonFace=1;
_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{ else{
measure.x=_winW; //set initial position to the extreme right of the screen this.currentBigDonFace = 1
} this.currentDonFace = 0
}); }
}
} }
this.drawMeasure = function(measure){ drawHPBar(){
_ctx.strokeStyle = "#bab8b8"; var bottomSquareX = this.taikoSquareW
_ctx.lineWidth = "5.0"; var borderSize = this.HPBarH * 0.2
_ctx.beginPath(); this.ctx.fillStyle = "#000"
_ctx.moveTo(measure.x, _barY+5); this.ctx.beginPath()
_ctx.lineTo(measure.x, _barY+_barH-_lyricsBarH-5); // Right hand black square
_ctx.closePath(); this.ctx.fillRect(
_ctx.stroke(); this.HPBarX + this.HPBarW - this.HPBarY * 0.2,
} this.HPBarY,
this.HPBarW * 0.2,
this.drawCombo = function(){ this.HPBarH
if(controller.getCombo()>=10){ )
var comboY = _barY+(_barH/2); this.ctx.fillRect(
var fontSize = (0.4)*_taikoH; bottomSquareX + borderSize,
_ctx.font = "normal "+fontSize+"px TnT"; this.HPBarY + 0.435 * this.HPBarH,
_ctx.textAlign = "center"; this.winW - bottomSquareX - borderSize,
_ctx.strokeStyle = "black"; this.HPBarH / 2 + 1
_ctx.strokeText(controller.getCombo(), _taikoSquareW-20-(_taikoW/2), comboY); )
_ctx.fillStyle = "white"; this.ctx.fillRect(
_ctx.fillText(controller.getCombo(), _taikoSquareW-20-(_taikoW/2), comboY); bottomSquareX,
this.HPBarY + 0.68 * this.HPBarH,
var fontSize = (0.12)*_taikoH; this.HPBarW * 0.8,
_ctx.font = "normal "+fontSize+"px TnT"; this.HPBarH / 4 + 1
_ctx.textAlign = "center"; )
_ctx.strokeStyle = "black"; this.ctx.arc(
_ctx.strokeText("コンボ", _taikoSquareW-20-(_taikoW/2), comboY+1.5*fontSize); bottomSquareX+borderSize,
_ctx.fillStyle = "white"; this.HPBarY+ 0.435 * this.HPBarH + borderSize,
_ctx.fillText("コンボ", _taikoSquareW-20-(_taikoW/2), comboY+1.5*fontSize); borderSize,
_scoreDispCount++; 0,
} Math.PI * 2
} )
this.ctx.fill()
this.drawGlobalScore = function(){ 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
)
}
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"
}
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 */ /* Draw score square */
_ctx.fillStyle="black"; this.ctx.fillStyle="#000"
_ctx.beginPath(); this.ctx.beginPath()
_ctx.fillRect(0,_barY,_scoreSquareW,_scoreSquareH-10); this.ctx.fillRect(0, this.barY, this.scoreSquareW, this.scoreSquareH - 10)
_ctx.fillRect(0,_barY,_scoreSquareW-10,_scoreSquareH); this.ctx.fillRect(0, this.barY, this.scoreSquareW - 10, this.scoreSquareH)
_ctx.arc(_scoreSquareW-10,_barY+(_scoreSquareH-10),10,0,Math.PI*2); this.ctx.arc(
_ctx.fill(); this.scoreSquareW - 10,
_ctx.closePath(); this.barY + this.scoreSquareH - 10,
10,
var fontSize = 0.7*_scoreSquareH; 0,
/* Draw score text */ Math.PI * 2
_ctx.font = "normal "+fontSize+"px TnT"; )
_ctx.fillStyle = "white"; this.ctx.fill()
_ctx.textAlign = "right"; this.ctx.closePath()
_ctx.fillText(controller.getGlobalScore().points, _scoreSquareW-20, _barY+0.7*_scoreSquareH);
} var fontSize = 0.7 * this.scoreSquareH
// Draw score text
this.drawPressedKeys = function(){ this.ctx.font = "normal " + fontSize + "px TnT"
this.ctx.fillStyle = "#fff"
var keyRed = document.getElementById("taiko-key-red"); this.ctx.textAlign = "center"
var keyBlue = document.getElementById("taiko-key-blue"); var glyph = this.ctx.measureText("0").width
var keys = controller.getKeys() var pointsText = this.controller.getGlobalScore().points.toString().split("")
var kbd = controller.getBindings() 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"]]){ if(keys[kbd["ka_l"]]){
var elemW = 0.45*_taikoW; var elemW = 0.45 * this.taikoW
_ctx.drawImage(keyBlue, 0, 0, 68, 124, _taikoX+0.05*_taikoW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW); 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"]]){ if(keys[kbd["don_l"]]){
var elemW = 0.35*_taikoW; var elemW = 0.35 * this.taikoW
_ctx.drawImage(keyRed, 0, 0, 53, 100, _taikoX+0.15*_taikoW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW); 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"]]){ if(keys[kbd["don_r"]]){
var elemW = 0.35*_taikoW; var elemW = 0.35 * this.taikoW
_ctx.drawImage(keyRed, 53, 0, 53, 100, (_taikoX+0.15*_taikoW)+elemW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW); 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"]]){ if(keys[kbd["ka_r"]]){
var elemW = 0.45*_taikoW; var elemW = 0.45 * this.taikoW
_ctx.drawImage(keyBlue, 68, 0, 68, 124, (_taikoX+0.05*_taikoW)+elemW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW); 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
)
} }
} }
this.displayScore = function(score, notPlayed){ displayScore(score, notPlayed){
_currentScore=score; this.currentScore = score
_special = (notPlayed) ? "-b" : ""; this.special = notPlayed ? "-b" : ""
_scoreDispCount=0; this.scoreDispCount = 0
_scoreOpacity=1.0; this.scoreOpacity = 1
} }
this.drawScore = function(){ drawScore(){
if(this.scoreDispCount >= 0 && this.scoreDispCount <= 20){
if(_scoreDispCount>=0 && _scoreDispCount<=20){ this.ctx.globalAlpha = this.scoreOpacity
_ctx.globalAlpha = _scoreOpacity; var scoreIMG = assets.image["score-" + this.currentScore + this.special]
var scoreIMG = document.getElementById("score-"+_currentScore+_special); this.ctx.drawImage(scoreIMG,
_ctx.drawImage(scoreIMG, _slotX-(_barH/2), (_barY+((_barH-_lyricsBarH)/2))-(_barH/2), _barH, _barH); this.slotX - this.barH / 2,
_scoreDispCount++; this.barY + (this.barH - this.lyricsBarH) / 2 - this.barH / 2,
if(_scoreOpacity-0.1>=0 && _currentScore!=0) _scoreOpacity-=0.1; this.barH,
this.barH
)
this.scoreDispCount++
if(this.scoreOpacity - 0.1 >= 0 && this.currentScore != 0){
this.scoreOpacity -= 0.1
} }
else if(_scoreDispCount==21){
_scoreDispCount=-1;
} }
_ctx.globalAlpha=1; else if(this.scoreDispCount == 21){
this.scoreDispCount = -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
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
} }
if(currentTime > startingTime && currentTime <= finishTime){ this.ctx.globalAlpha = 1
_this.drawCircle(circle);
circle.move(controller.getHitcircleSpeed());
} }
} drawCircles(){
else{ //Animate circle to the HP bar var circles = this.controller.getCircles()
for(var i = circles.length; i--;){
var circle = circles[i]
var animationDuration=470; //ms 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(currentTime>finishTime && !circle.isAnimated() && circle.getScore()!=0){ if(!circle.getPlayed() && currentTime >= startingTime && currentTime <= finishTime){
circle.animate();//start animation to HP bar this.drawCircle(circle)
_animationStartPos=circle.getPos().x;
_this.drawCircle(circle);
} }
else if(currentTime>finishTime && currentTime<=finishTime+animationDuration && circle.isAnimated()){ else{
// Animate circle to the HP bar
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={ // Animation in ms
x:_animationStartPos+curveDistance, var animationDuration = 470
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 if(!circle.isAnimated()){
circle.incAnimT(); if(circle.getScore() != 0){
circle.incFrame(); // 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){
var data = [p0, p1, p2, p3];
var at = 1-t;
for(var i=1; i<data.length; i++){
for(var k=0; k<data.length-i; k++){
data[k] = {
x: data[k].x * at + data[k+1].x *t,
y: data[k].y * at + data[k+1].y *t
};
} }
} }
return data[0];
} }
this.drawCircle = function(circle){ calcBezierPoint(t, data){
var at = 1 - t
var size, color, txt;
var offsetBigY=0;
var suppBig=0;
var faceID;
switch(circle.getType()){
case 'don':
color = "#f54c25";
size = _circleSize;
txt = "ドン";
faceID = "don-"+_currentDonFace;
break;
case 'ka':
color = "#75CEE9";
size = _circleSize;
txt="カッ";
faceID = "don-"+_currentDonFace;
break;
case 'daiDon':
color = "#f54c25";
size = _bigCircleSize;
txt = "ドン(大）";
offsetBigY=5;
suppBig=10;
faceID = "big-don-"+_currentBigDonFace;
break;
case 'daiKa':
color = "#75CEE9";
size = _bigCircleSize;
txt="カッ(大）";
offsetBigY=5;
suppBig=10;
faceID = "big-don-"+_currentBigDonFace;
break;
}
//Main circle
_ctx.fillStyle = color;
_ctx.beginPath();
_ctx.arc(circle.getPos().x, circle.getPos().y, size, 0, 2*Math.PI);
_ctx.closePath();
_ctx.fill();
//Face on circle
var face = document.getElementById(faceID);
_ctx.drawImage(face, circle.getPos().x-size-2, circle.getPos().y-size-4, (size*2)+5, (size*2)+6);
if(!circle.isAnimated()){ for(var i = 1; i < data.length; i++){
//text for(var k = 0; k < data.length - i; k++){
_ctx.font = "normal bold "+_lyricsSize+"px Kozuka"; data[k] = {
_ctx.textAlign = "center"; x: data[k].x * at + data[k + 1].x * t,
_ctx.strokeStyle = "black"; y: data[k].y * at + data[k + 1].y * t
_ctx.strokeText(txt, circle.getPos().x+size/2, _barY+_barH-(0.3*_lyricsBarH));
_ctx.fillStyle = "white";
_ctx.fillText(txt, circle.getPos().x+size/2, _barY+_barH-(0.3*_lyricsBarH));
} }
} }
this.togglePauseMenu = function(){
$("#pause-menu").is(":visible") ? $("#pause-menu").hide() : $("#pause-menu").show();
} }
this.drawDifficulty = function(){ return data[0]
var muzu = document.getElementById('muzu_' + _songDifficulty);
_ctx.drawImage(muzu, _diffY, _diffX, _diffW, _diffH);
};
this.drawTime = function(){
var time = controller.getEllapsedTime();
_ctx.globalAlpha = 0.7;
_ctx.fillStyle = "black";
_ctx.fillRect(_winW-110, _winH-60, _winW, _winH);
_ctx.globalAlpha = 1.0;
_ctx.fillStyle = "white";
var formatedH = ('0' + time.hour).slice(-2);
var formatedM = ('0' + time.min).slice(-2);
var formatedS = ('0' + time.sec).slice(-2);
_ctx.font = "normal "+_barH/12+"px Kozuka";
_ctx.fillText(formatedH+':'+formatedM+':'+formatedS, _winW-10, _winH-30);
_ctx.fillText(time.ms, _winW-10, _winH-10);
} }
this.drawBar = function(){ drawCircle(circle, circlePos){
var fill, size, faceID
var grd; if(!circlePos){
if(controller.getKeys()[86] || controller.getKeys()[66]){ //keys v, b var currentTime = this.controller.getEllapsedTime().ms
grd = _ctx.createLinearGradient(0, _barY, _winW, _barH); circlePos = {
grd.addColorStop(0,"#f54c25"); x: this.slotX + circle.getSpeed() / (70 / this.circleSize) * (circle.getMS() - currentTime),
grd.addColorStop(1,"#232323"); y: this.circleY
}
else if(controller.getKeys()[67] || controller.getKeys()[78]){ //keys c, n
grd = _ctx.createLinearGradient(0, _barY, _winW, _barH);
grd.addColorStop(0,"#75CEE9");
grd.addColorStop(1,"#232323");
} }
else{
grd="#232323";
}
_ctx.strokeStyle = "black";
_ctx.fillStyle = grd;
_ctx.lineWidth = 10;
_ctx.beginPath();
_ctx.rect(0,_barY,_winW,_barH);
_ctx.closePath();
_ctx.fill();
_ctx.stroke();
/* Lyrics bar */
_ctx.fillStyle = "#888888";
_ctx.beginPath();
_ctx.rect(0,_barY+_barH-_lyricsBarH,_winW,_lyricsBarH);
_ctx.closePath();
_ctx.fill();
_ctx.stroke();
} }
this.drawSlot = function(){ if(circle.getPlayed()){
var currentDonFace = 1
/* Main circle */ var currentBigDonFace = 1
var normalSize = _circleSize-(0.2*_circleSize); }else{
_ctx.fillStyle = "#6f6f6e"; var currentDonFace = this.currentDonFace
_ctx.beginPath(); var currentBigDonFace = this.currentBigDonFace
_ctx.arc(_slotX, _circleY, normalSize,0,2*Math.PI);
_ctx.closePath();
_ctx.fill();
/* Big stroke circle */
var bigSize = _circleSize;
_ctx.strokeStyle = "#9e9f9f";
_ctx.lineWidth = 3;
_ctx.beginPath();
_ctx.arc(_slotX, _circleY, bigSize,0,2*Math.PI);
_ctx.closePath();
_ctx.stroke();
/* Bigger stroke circle */
var bigSize = _bigCircleSize;
_ctx.strokeStyle = "#6f6f6e";
_ctx.lineWidth = 3;
_ctx.beginPath();
_ctx.arc(_slotX, _circleY, bigSize,0,2*Math.PI);
_ctx.closePath();
_ctx.stroke();
} }
this.drawTaikoSquare = function(){ switch(circle.getType()){
case "don":
/* Taiko square */ fill = "#f54c25"
_ctx.lineWidth = 7; size = this.circleSize
_ctx.fillStyle = "#ff3c00"; faceID = "don-" + currentDonFace
_ctx.strokeStyle = "black"; break
_ctx.beginPath(); case "ka":
_ctx.rect(0,_barY, _taikoSquareW,_barH); fill = "#75cee9"
_ctx.fill(); size = this.circleSize
_ctx.closePath(); faceID = "don-" + currentDonFace
_ctx.stroke(); break
case "daiDon":
var taiko = document.getElementById("taiko"); fill = "#f54c25"
_ctx.drawImage(taiko, _taikoX, _taikoY, _taikoW, _taikoH); size = this.bigCircleSize
faceID = "big-don-" + currentBigDonFace
break
case "daiKa":
fill = "#75cee9"
size = this.bigCircleSize
faceID = "big-don-" + currentBigDonFace
break
}
// Main circle
this.ctx.fillStyle = fill
this.ctx.beginPath()
this.ctx.arc(circlePos.x, circlePos.y, size, 0, Math.PI * 2)
this.ctx.closePath()
this.ctx.fill()
// Face on circle
var face = assets.image[faceID]
this.ctx.drawImage(face,
circlePos.x - size - 2,
circlePos.y - size - 4,
size * 2 + 5,
size * 2 + 6
)
if(!circle.isAnimated()){
// Text
this.ctx.font = "normal bold " + this.lyricsSize + "px Kozuka"
this.ctx.textAlign = "center"
this.ctx.strokeStyle = "#000"
this.ctx.lineWidth = this.lyricsSize / 5
this.ctx.fillStyle = "#fff"
this.strokeFillText(circle.getText(),
circlePos.x,
this.barY + this.barH - this.lyricsBarH * 0.3
)
}
}
togglePauseMenu(){
if($("#pause-menu").is(":visible")){
$("#pause-menu").hide()
}else{
$("#pause-menu").show()
}
}
drawDifficulty(){
this.ctx.drawImage(assets.image["muzu_" + this.songDifficulty],
this.diffX, this.diffY,
this.diffW, this.diffH
)
}
drawTime(){
var time = this.controller.getEllapsedTime()
this.ctx.globalAlpha = 0.7
this.ctx.fillStyle = "#000"
this.ctx.fillRect(this.winW - 110, this.winH - 60, this.winW, this.winH)
this.ctx.globalAlpha = 1
this.ctx.fillStyle = "#fff"
var formatedH = ("0" + time.hour).slice(-2)
var formatedM = ("0" + time.min).slice(-2)
var formatedS = ("0" + time.sec).slice(-2)
this.ctx.font = "normal " + (this.barH / 12) + "px Kozuka"
this.ctx.textAlign = "right"
this.ctx.fillText(formatedH + ":" + formatedM + ":" + formatedS,
this.winW - 10, this.winH - 30
)
this.ctx.fillText(time.ms, this.winW - 10, this.winH - 10)
}
drawBar(){
this.ctx.strokeStyle = "#000"
this.ctx.fillStyle = "#232323"
this.ctx.lineWidth = 10
this.ctx.beginPath()
this.ctx.rect(0, this.barY, this.winW, this.barH)
this.ctx.closePath()
this.ctx.fill()
var currentTime = this.controller.getEllapsedTime().ms
var keyTime = this.controller.getKeyTime()
var sound = keyTime["don"] > 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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment