Skip to content

T
Taiko Web
Commit 999648df authored by Bui's avatar Bui Committed by GitHub
Browse files
Options

Merge pull request #6 from LoveEevee/gameplay-improvements 

Lots of gameplay improvements
parents 24053452 79c4cfcd
Hide whitespace changes
Inline Side-by-side
Showing with 728 additions and 627 deletions
public/src/css/game.css
View file @ 999648df
...@@ -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 @ 999648df
...@@ -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 @ 999648df
...@@ -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 @ 999648df
function Circle(id, ms, type){ function Circle(id, ms, type, text, speed){
var _id=id; var _id=id;
var _ms = ms; var _ms = ms;
...@@ -42,15 +42,6 @@ function Circle(id, ms, type){ ...@@ -42,15 +42,6 @@ function Circle(id, ms, type){
this.isAnimated = function(){ this.isAnimated = function(){
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;
...@@ -59,15 +50,6 @@ function Circle(id, ms, type){ ...@@ -59,15 +50,6 @@ function Circle(id, ms, type){
this.incAnimT = function(){ this.incAnimT = function(){
_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 @ 999648df
...@@ -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 @ 999648df
...@@ -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 @ 999648df
...@@ -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
}) })
} }
...@@ -112,5 +117,9 @@ function Keyboard(controller){ ...@@ -112,5 +117,9 @@ function Keyboard(controller){
else if(type == "sound") _waitKeyupSound[key] = true; else if(type == "sound") _waitKeyupSound[key] = true;
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 @ 999648df
...@@ -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 @ 999648df
...@@ -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 @ 999648df
...@@ -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 @ 999648df
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;
var _HPBarColWCanvas;
var _diffW;
var _diffH;
var _diffX;
var _diffY;
var _circleAnimatorT; run(){
var _animationStartPos; this.ctx.font = "normal 14pt TnT"
this.setBackground()
var _currentScore = 0;
var _special=""; $(".game-song").attr("alt", this.songTitle).html(this.songTitle)
var _scoreDispCount = -1;
var _scoreOpacity = 1.0; this.refresh()
}
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; setBackground(){
$("#game").css("background-image", "url('" + this.bg + "')")
}
getDistanceForCircle(){
return this.distanceForCircle
}
var _currentDonFace=0; positionning(){
var _currentBigDonFace=1; 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
}
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
}
var _nextBeat=0; refresh(){
this.positionning()
var _songTitle = title; this.distanceForCircle = this.winW - this.slotX
var _songDifficulty = diff.split('.').slice(0, -1).join('.');
// Draw
this.run = function(){ this.drawBar()
_ctx.font = _mainFont; this.drawSlot()
_this.setBackground(); this.drawMeasures()
this.drawHPBar()
$('.game-song').attr('alt', _songTitle).html(_songTitle); this.drawScore()
this.drawCircles()
_this.refresh(); this.drawTaikoSquare()
} this.drawPressedKeys()
this.drawDifficulty()
this.drawCombo()
this.drawGlobalScore()
this.updateDonFaces()
//this.drawTime()
}
this.setBackground = function(){ updateDonFaces(){
$("#game").css("background", "url('"+bg+"')"); if(this.controller.getEllapsedTime().ms >= this.nextBeat){
$("#game").css("-webkit-background-size", "cover"); this.nextBeat += this.controller.getSongData().beatInfo.beatInterval
$("#game").css("-moz-background-size", "cover"); if(this.controller.getCombo() >= 50){
$("#game").css("-o-background-size", "cover"); this.currentBigDonFace = (this.currentBigDonFace + 1) % 2
$("#game").css("background-size", "cover"); this.currentDonFace = (this.currentDonFace + 1) % 2
}
else{
this.currentBigDonFace = 1
this.currentDonFace = 0
}
}
} }
this.getDistanceForCircle = function(){ drawHPBar(){
return _distanceForCircle; 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
)
} }
this.positionning = function(){ getHP(){
var circles = this.controller.getCircles()
_winW = $(window).width(); var currentCircle = this.controller.getCurrentCircle()
_winH = $(window).height(); var hp = this.controller.getGlobalScore().hp
_canvas.width = _winW; var width = Math.floor(hp * 650 / 1000) * 10
_canvas.height = _winH; return {
_barY = 0.25*_winH; imgW: width,
_barH = 0.23*_winH; canvasW: width / 650 * this.HPBarColMaxW
_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;
} }
else if(circles[currentCircle-1]){ }
if(circles[currentCircle-1].isAnimationFinished() || circles[currentCircle-1].getScore()==0){
_HPBarColWImage = (controller.getGlobalScore().hp*650)/100; drawMeasures(){
_HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100; 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)
} }
} })
} }
this.refresh = function(){ drawMeasure(measure){
var currentTime = this.controller.getEllapsedTime().ms
_this.positionning(); var measureX = this.slotX + measure.speed / (70 / this.circleSize) * (measure.ms - currentTime)
_distanceForCircle=(_winW - _slotX); this.ctx.strokeStyle = "#bab8b8"
_timeForDistanceCircle=((20*_distanceForCircle)/controller.getHitcircleSpeed()); this.ctx.lineWidth = 2
this.ctx.beginPath()
/* Draw */ this.ctx.moveTo(measureX, this.barY + 5)
this.drawBar(); this.ctx.lineTo(measureX, this.barY + this.barH - this.lyricsBarH - 5)
this.drawSlot(); this.ctx.closePath()
this.drawMeasures(); this.ctx.stroke()
this.drawHPBar(); }
this.drawCircles();
this.drawTaikoSquare(); drawCombo(){
this.drawScore(); this.ctx.drawImage(assets.image.taiko,
this.drawPressedKeys(); this.taikoX, this.taikoY,
this.drawCombo(); this.taikoW, this.taikoH
this.drawGlobalScore(); )
this.drawTime();
this.drawDifficulty(); var comboCount = this.controller.getCombo()
if(comboCount >= 10){
this.updateDonFaces();//animate circle face when combo superior to 50 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.updateDonFaces = function(){ this.ctx.textAlign = "center"
this.ctx.strokeStyle = "#000"
if(controller.getEllapsedTime().ms>=_nextBeat){ this.ctx.lineWidth = fontSize / 10
_nextBeat+=controller.getSongData().beatInfo.beatInterval; var glyph = this.ctx.measureText("0").width
if(controller.getCombo()>=50){ var comboText = this.controller.getCombo().toString().split("")
_currentBigDonFace=(_currentBigDonFace+1)%2; for(var i in comboText){
_currentDonFace=(_currentDonFace+1)%2; 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
)
} }
else{
_currentBigDonFace=1; var currentTime = this.controller.getEllapsedTime().ms
_currentDonFace=0; 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++
} }
} }
this.drawHPBar = function(){ strokeFillText(text, x, y){
this.ctx.strokeText(text, x, y)
var bottomSquareX = _taikoSquareW; this.ctx.fillText(text, x, y)
var borderSize = 0.2*_HPBarH; }
_ctx.fillStyle = "black";
_ctx.beginPath(); drawGlobalScore(){
_ctx.fillRect(_HPBarX+_HPBarW-(0.2*_HPBarY), _HPBarY, 0.2*_HPBarW, _HPBarH);//right hand black square /* Draw score square */
_ctx.fillRect(bottomSquareX+borderSize, _HPBarY+0.435*_HPBarH, 0.5*_HPBarW, _HPBarH/2); this.ctx.fillStyle="#000"
_ctx.fillRect(bottomSquareX, _HPBarY+0.68*_HPBarH, 0.8*_HPBarW, _HPBarH/4); this.ctx.beginPath()
_ctx.arc(bottomSquareX+borderSize,_HPBarY+(0.435*_HPBarH)+borderSize,borderSize,0,Math.PI*2); this.ctx.fillRect(0, this.barY, this.scoreSquareW, this.scoreSquareH - 10)
_ctx.fill(); this.ctx.fillRect(0, this.barY, this.scoreSquareW - 10, this.scoreSquareH)
_ctx.closePath(); this.ctx.arc(
this.scoreSquareW - 10,
var barBG = document.getElementById('hp-bar-bg'); this.barY + this.scoreSquareH - 10,
var barColour = document.getElementById('hp-bar-colour'); 10,
0,
_ctx.drawImage(barBG, _HPBarX, _HPBarY, _HPBarW, _HPBarH); Math.PI * 2
_ctx.drawImage(barColour, 0, 0, Math.max(1, Math.floor(_HPBarColWImage)), 40, _HPbarColX, _HPbarColY, _HPBarColWCanvas, _HPBarColH); )
this.ctx.fill()
} this.ctx.closePath()
this.drawMeasures = function(){ var fontSize = 0.7 * this.scoreSquareH
// Draw score text
var measures = controller.getSongData().measures; this.ctx.font = "normal " + fontSize + "px TnT"
var currentTime = controller.getEllapsedTime().ms; this.ctx.fillStyle = "#fff"
this.ctx.textAlign = "center"
measures.forEach(function(measure, index){ var glyph = this.ctx.measureText("0").width
if(currentTime>=measure.ms-_timeForDistanceCircle && currentTime<=measure.ms+350 && measure.nb==0){ var pointsText = this.controller.getGlobalScore().points.toString().split("")
_this.drawMeasure(measure); for(var i in pointsText){
measure.x-=controller.getHitcircleSpeed(); this.ctx.fillText(pointsText[i],
} this.scoreSquareW - 20 + glyph * (i - pointsText.length + 1),
else{ this.barY + this.scoreSquareH * 0.7
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(){ drawPressedKeys(){
var keys = this.controller.getKeys()
var kbd = this.controller.getBindings()
/* 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"]]){ 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,
if(keys[kbd["don_l"]]){ this.taikoY + this.taikoH * 0.03,
var elemW = 0.35*_taikoW; elemW,
_ctx.drawImage(keyRed, 0, 0, 53, 100, _taikoX+0.15*_taikoW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW); 124 / 68 * elemW
} )
}
if(keys[kbd["don_r"]]){
var elemW = 0.35*_taikoW; if(keys[kbd["don_l"]]){
_ctx.drawImage(keyRed, 53, 0, 53, 100, (_taikoX+0.15*_taikoW)+elemW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW); var elemW = 0.35 * this.taikoW
} this.ctx.drawImage(assets.image["taiko-key-red"],
0, 0, 53, 100,
if(keys[kbd["ka_r"]]){ this.taikoX + this.taikoW * 0.15,
var elemW = 0.45*_taikoW; this.taikoY + this.taikoH * 0.09,
_ctx.drawImage(keyBlue, 68, 0, 68, 124, (_taikoX+0.05*_taikoW)+elemW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW); elemW,
} 100 / 53 * elemW
)
} }
this.displayScore = function(score, notPlayed){ if(keys[kbd["don_r"]]){
_currentScore=score; var elemW = 0.35 * this.taikoW
_special = (notPlayed) ? "-b" : ""; this.ctx.drawImage(assets.image["taiko-key-red"],
_scoreDispCount=0; 53, 0, 53, 100,
_scoreOpacity=1.0; this.taikoX + this.taikoW * 0.15 + elemW,
} this.taikoY + this.taikoH * 0.09,
elemW,
this.drawScore = function(){ 100 / 53 * elemW
)
if(_scoreDispCount>=0 && _scoreDispCount<=20){ }
_ctx.globalAlpha = _scoreOpacity;
var scoreIMG = document.getElementById("score-"+_currentScore+_special); if(keys[kbd["ka_r"]]){
_ctx.drawImage(scoreIMG, _slotX-(_barH/2), (_barY+((_barH-_lyricsBarH)/2))-(_barH/2), _barH, _barH); var elemW = 0.45 * this.taikoW
_scoreDispCount++; this.ctx.drawImage(assets.image["taiko-key-blue"],
if(_scoreOpacity-0.1>=0 && _currentScore!=0) _scoreOpacity-=0.1; 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(_scoreDispCount==21){ else if(this.scoreDispCount == 21){
_scoreDispCount=-1; this.scoreDispCount = -1
} }
_ctx.globalAlpha=1; this.ctx.globalAlpha = 1
}
} drawCircles(){
var circles = this.controller.getCircles()
this.drawCircles = function(){ for(var i = circles.length; i--;){
var circle = circles[i]
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()){ var currentTime = this.controller.getEllapsedTime().ms
var timeForDistance = 70 / this.circleSize * this.distanceForCircle / circle.getSpeed() + this.bigCircleSize / 2
if(currentTime <= startingTime){ var startingTime = circle.getMS() - timeForDistance
var initPoint = {x:_winW, y:_circleY}; // At circle.getMS(), the cirlce fits the slot
circle.setInitPos(initPoint); //set initial position to the extreme right of the screen var finishTime = circle.getMS() + 100
}
if(currentTime > startingTime && currentTime <= finishTime){ if(!circle.getPlayed() && currentTime >= startingTime && currentTime <= finishTime){
_this.drawCircle(circle); this.drawCircle(circle)
circle.move(controller.getHitcircleSpeed()); }
} else{
// Animate circle to the HP bar
}
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){ if(!circle.isAnimated()){
circle.animate();//start animation to HP bar if(circle.getScore() != 0){
_animationStartPos=circle.getPos().x; // Start animation to HP bar
_this.drawCircle(circle); circle.animate()
}
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();
} }
} }
else if(currentTime>finishTime+animationDuration && circle.isAnimated()){ if(circle.isAnimated()){
circle.endAnimation(); 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]; for(var i = 1; i < data.length; i++){
var at = 1-t; for(var k = 0; k < data.length - i; k++){
for(var i=1; i<data.length; i++){
for(var k=0; k<data.length-i; k++){
data[k] = { data[k] = {
x: data[k].x * at + data[k+1].x *t, x: data[k].x * at + data[k + 1].x * t,
y: data[k].y * at + data[k+1].y *t y: data[k].y * at + data[k + 1].y * t
}; }
} }
} }
return data[0]; return data[0]
} }
this.drawCircle = function(circle){ drawCircle(circle, circlePos){
var fill, size, faceID
var size, color, txt; if(!circlePos){
var offsetBigY=0; var currentTime = this.controller.getEllapsedTime().ms
var suppBig=0; circlePos = {
var faceID; x: this.slotX + circle.getSpeed() / (70 / this.circleSize) * (circle.getMS() - currentTime),
y: this.circleY
switch(circle.getType()){ }
}
case 'don':
color = "#f54c25"; if(circle.getPlayed()){
size = _circleSize; var currentDonFace = 1
txt = "ドン"; var currentBigDonFace = 1
faceID = "don-"+_currentDonFace; }else{
break; var currentDonFace = this.currentDonFace
var currentBigDonFace = this.currentBigDonFace
case 'ka': }
color = "#75CEE9";
size = _circleSize; switch(circle.getType()){
txt="カッ"; case "don":
faceID = "don-"+_currentDonFace; fill = "#f54c25"
break; size = this.circleSize
faceID = "don-" + currentDonFace
case 'daiDon': break
color = "#f54c25"; case "ka":
size = _bigCircleSize; fill = "#75cee9"
txt = "ドン(大）"; size = this.circleSize
offsetBigY=5; faceID = "don-" + currentDonFace
suppBig=10; break
faceID = "big-don-"+_currentBigDonFace; case "daiDon":
break; fill = "#f54c25"
size = this.bigCircleSize
case 'daiKa': faceID = "big-don-" + currentBigDonFace
color = "#75CEE9"; break
size = _bigCircleSize; case "daiKa":
txt="カッ(大）"; fill = "#75cee9"
offsetBigY=5; size = this.bigCircleSize
suppBig=10; faceID = "big-don-" + currentBigDonFace
faceID = "big-don-"+_currentBigDonFace; break
break; }
} // Main circle
this.ctx.fillStyle = fill
//Main circle this.ctx.beginPath()
_ctx.fillStyle = color; this.ctx.arc(circlePos.x, circlePos.y, size, 0, Math.PI * 2)
_ctx.beginPath(); this.ctx.closePath()
_ctx.arc(circle.getPos().x, circle.getPos().y, size, 0, 2*Math.PI); this.ctx.fill()
_ctx.closePath();
_ctx.fill(); // Face on circle
var face = assets.image[faceID]
//Face on circle this.ctx.drawImage(face,
var face = document.getElementById(faceID); circlePos.x - size - 2,
_ctx.drawImage(face, circle.getPos().x-size-2, circle.getPos().y-size-4, (size*2)+5, (size*2)+6); circlePos.y - size - 4,
size * 2 + 5,
size * 2 + 6
)
if(!circle.isAnimated()){ if(!circle.isAnimated()){
//text // Text
_ctx.font = "normal bold "+_lyricsSize+"px Kozuka"; this.ctx.font = "normal bold " + this.lyricsSize + "px Kozuka"
_ctx.textAlign = "center"; this.ctx.textAlign = "center"
_ctx.strokeStyle = "black"; this.ctx.strokeStyle = "#000"
_ctx.strokeText(txt, circle.getPos().x+size/2, _barY+_barH-(0.3*_lyricsBarH)); this.ctx.lineWidth = this.lyricsSize / 5
_ctx.fillStyle = "white"; this.ctx.fillStyle = "#fff"
_ctx.fillText(txt, circle.getPos().x+size/2, _barY+_barH-(0.3*_lyricsBarH)); 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.togglePauseMenu = function(){ this.ctx.fillStyle = "#888888"
$("#pause-menu").is(":visible") ? $("#pause-menu").hide() : $("#pause-menu").show(); this.ctx.beginPath()
} this.ctx.rect(0, this.barY + this.barH - this.lyricsBarH, this.winW, this.lyricsBarH)
this.ctx.closePath()
this.drawDifficulty = function(){ this.ctx.fill()
var muzu = document.getElementById('muzu_' + _songDifficulty); this.ctx.stroke()
_ctx.drawImage(muzu, _diffY, _diffX, _diffW, _diffH); }
};
drawSlot(){
this.drawTime = function(){ // Main circle
this.ctx.fillStyle = "#6f6f6e"
var time = controller.getEllapsedTime(); this.ctx.beginPath()
this.ctx.arc(this.slotX, this.circleY, this.circleSize - 0.2 * this.circleSize, 0, 2 * Math.PI)
_ctx.globalAlpha = 0.7; this.ctx.closePath()
_ctx.fillStyle = "black"; this.ctx.fill()
_ctx.fillRect(_winW-110, _winH-60, _winW, _winH);
// Big stroke circle
_ctx.globalAlpha = 1.0; this.ctx.strokeStyle = "#9e9f9f"
_ctx.fillStyle = "white"; this.ctx.lineWidth = 3
this.ctx.beginPath()
var formatedH = ('0' + time.hour).slice(-2); this.ctx.arc(this.slotX, this.circleY, this.circleSize, 0, 2 * Math.PI)
var formatedM = ('0' + time.min).slice(-2); this.ctx.closePath()
var formatedS = ('0' + time.sec).slice(-2); this.ctx.stroke()
_ctx.font = "normal "+_barH/12+"px Kozuka"; // Bigger stroke circle
_ctx.fillText(formatedH+':'+formatedM+':'+formatedS, _winW-10, _winH-30); this.ctx.strokeStyle = "#6f6f6e"
_ctx.fillText(time.ms, _winW-10, _winH-10); this.ctx.lineWidth = 3
this.ctx.beginPath()
} this.ctx.arc(this.slotX, this.circleY, this.bigCircleSize, 0, 2 * Math.PI)
this.ctx.closePath()
this.drawBar = function(){ this.ctx.stroke()
}
var grd;
if(controller.getKeys()[86] || controller.getKeys()[66]){ //keys v, b
grd = _ctx.createLinearGradient(0, _barY, _winW, _barH);
grd.addColorStop(0,"#f54c25");
grd.addColorStop(1,"#232323");
}
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 */ drawTaikoSquare(){
_ctx.fillStyle = "#888888"; // Taiko square
_ctx.beginPath(); this.ctx.lineWidth = 7
_ctx.rect(0,_barY+_barH-_lyricsBarH,_winW,_lyricsBarH); this.ctx.fillStyle = "#ff3c00"
_ctx.closePath(); this.ctx.strokeStyle = "#000"
_ctx.fill(); this.ctx.beginPath()
_ctx.stroke(); this.ctx.rect(0,this.barY, this.taikoSquareW,this.barH)
this.ctx.fill()
this.ctx.closePath()
} this.ctx.stroke()
}
this.drawSlot = function(){
/* Main circle */
var normalSize = _circleSize-(0.2*_circleSize);
_ctx.fillStyle = "#6f6f6e";
_ctx.beginPath();
_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(){
/* Taiko square */
_ctx.lineWidth = 7;
_ctx.fillStyle = "#ff3c00";
_ctx.strokeStyle = "black";
_ctx.beginPath();
_ctx.rect(0,_barY, _taikoSquareW,_barH);
_ctx.fill();
_ctx.closePath();
_ctx.stroke();
var taiko = document.getElementById("taiko");
_ctx.drawImage(taiko, _taikoX, _taikoY, _taikoW, _taikoH);
}
} }
\ 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