Skip to content

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

Lots of gameplay improvements

parent 24053452
Hide 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 @@
width:100%;
height:100%;
overflow: hidden;
background-size:cover;
}
#canvas{
position:relative;
z-index:1;
width:100%;
height:100%;
}
......
public/src/css/loader.css
View file @ 79c4cfcd
......@@ -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
public/src/js/assets.js
View file @ 79c4cfcd
......@@ -98,6 +98,7 @@ var assets = {
'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 _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
public/src/js/controller.js
View file @ 79c4cfcd
......@@ -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);
}
......
public/src/js/game.js
View file @ 79c4cfcd
......@@ -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()){
......
public/src/js/keyboard.js
View file @ 79c4cfcd
......@@ -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
public/src/js/loader.js
View file @ 79c4cfcd
......@@ -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 = $("<h1 style='font-family:"+name+"'>I am a font</h1>");
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 = $("<img id='"+id+"' src='/assets/img/"+name+"' />");
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();
}
......
public/src/js/parsesong.js
View file @ 79c4cfcd
......@@ -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 {
......
public/src/js/songselect.js
View file @ 79c4cfcd
......@@ -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 += "</div><ul class='difficulties'>";
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+="&#9733;<br>";
}
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 += "<li class='difficulty "+diffName+"'>";
_code+= "<span class='diffname'>"+diffTxt+"</span>";
......
public/src/js/view.js
View file @ 79c4cfcd
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;
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")
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(".")
}
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;
run(){
this.ctx.font = "normal 14pt TnT"
this.setBackground()
$(".game-song").attr("alt", this.songTitle).html(this.songTitle)
this.refresh()
}
var _currentCircleFace=0;
setBackground(){
$("#game").css("background-image", "url('" + this.bg + "')")
}
getDistanceForCircle(){
return this.distanceForCircle
}
var _currentDonFace=0;
var _currentBigDonFace=1;
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
}
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;
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();
}
refresh(){
this.positionning()
this.distanceForCircle = this.winW - this.slotX
// 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()
}
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");
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{
this.currentBigDonFace = 1
this.currentDonFace = 0
}
}
}
this.getDistanceForCircle = function(){
return _distanceForCircle;
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
)
}
this.positionning = function(){
_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;
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
}
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;
}
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)
}
}
})
}
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;
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
)
}
else{
_currentBigDonFace=1;
_currentDonFace=0;
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++
}
}
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++;
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
)
}
}
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"]]){
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;
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(_scoreDispCount==21){
_scoreDispCount=-1;
else if(this.scoreDispCount == 21){
this.scoreDispCount = -1
}
_ctx.globalAlpha=1;
this.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
drawCircles(){
var circles = this.controller.getCircles()
for(var i = circles.length; i--;){
var circle = circles[i]
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.drawCircle(circle);
circle.move(controller.getHitcircleSpeed());
}
}
else{ //Animate circle to the HP bar
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<data.length; i++){
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] = {
x: data[k].x * at + data[k+1].x *t,
y: data[k].y * at + data[k+1].y *t
};
x: data[k].x * at + data[k + 1].x * t,
y: data[k].y * at + data[k + 1].y * t
}
}
}
return data[0];
return data[0]
}
this.drawCircle = function(circle){
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);
drawCircle(circle, circlePos){
var fill, size, faceID
if(!circlePos){
var currentTime = this.controller.getEllapsedTime().ms
circlePos = {
x: this.slotX + circle.getSpeed() / (70 / this.circleSize) * (circle.getMS() - currentTime),
y: this.circleY
}
}
if(circle.getPlayed()){
var currentDonFace = 1
var currentBigDonFace = 1
}else{
var currentDonFace = this.currentDonFace
var currentBigDonFace = this.currentBigDonFace
}
switch(circle.getType()){
case "don":
fill = "#f54c25"
size = this.circleSize
faceID = "don-" + currentDonFace
break
case "ka":
fill = "#75cee9"
size = this.circleSize
faceID = "don-" + currentDonFace
break
case "daiDon":
fill = "#f54c25"
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
_ctx.font = "normal bold "+_lyricsSize+"px Kozuka";
_ctx.textAlign = "center";
_ctx.strokeStyle = "black";
_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));
// 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.togglePauseMenu = function(){
$("#pause-menu").is(":visible") ? $("#pause-menu").hide() : $("#pause-menu").show();
}
this.drawDifficulty = function(){
var muzu = document.getElementById('muzu_' + _songDifficulty);
_ctx.drawImage(muzu, _diffY, _diffX, _diffW, _diffH);
};
this.drawTime = function(){
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(){
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();
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()
}
/* Lyrics bar */
_ctx.fillStyle = "#888888";
_ctx.beginPath();
_ctx.rect(0,_barY+_barH-_lyricsBarH,_winW,_lyricsBarH);
_ctx.closePath();
_ctx.fill();
_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);
}
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