mirror of
https://github.com/yuukiwww/taiko-web.git
synced 2024-10-09 09:38:56 +02:00
Merge pull request #6 from LoveEevee/gameplay-improvements
Lots of gameplay improvements
This commit is contained in:
commit
999648dfd7
@ -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%;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|
||||||
|
|
||||||
}
|
}
|
@ -98,6 +98,7 @@ var assets = {
|
|||||||
'TnT'
|
'TnT'
|
||||||
),
|
),
|
||||||
|
|
||||||
sounds: {}
|
sounds: {},
|
||||||
|
image: {}
|
||||||
|
|
||||||
};
|
};
|
@ -1,4 +1,4 @@
|
|||||||
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){
|
|||||||
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){
|
|||||||
_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){
|
|||||||
this.getID = function(){
|
this.getID = function(){
|
||||||
return _id;
|
return _id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.getText = function(){
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getSpeed = function(){
|
||||||
|
return speed;
|
||||||
|
}
|
||||||
}
|
}
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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()){
|
||||||
|
@ -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){
|
|||||||
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){
|
|||||||
|
|
||||||
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){
|
|||||||
else if(type == "menu") _waitKeyupMenu[key] = true;
|
else if(type == "menu") _waitKeyupMenu[key] = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.getKeyTime = function(){
|
||||||
|
return _keyTime;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
@ -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(){
|
|||||||
});
|
});
|
||||||
|
|
||||||
$.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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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){
|
|||||||
|
|
||||||
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){
|
|||||||
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){
|
|||||||
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){
|
|||||||
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){
|
|||||||
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 {
|
||||||
|
@ -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(){
|
|||||||
};
|
};
|
||||||
_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(){
|
|||||||
starsDisplay+="★<br>";
|
starsDisplay+="★<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>";
|
||||||
|
@ -1,584 +1,647 @@
|
|||||||
function View(controller, bg, title, diff){
|
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")
|
||||||
|
|
||||||
var _this = this;
|
this.winW = $(window).width()
|
||||||
var _canvas = document.getElementById('canvas');
|
this.winH = $(window).height()
|
||||||
var _ctx = _canvas.getContext('2d');
|
|
||||||
|
|
||||||
var _winW = $(window).width();
|
this.taikoSquareW = this.winW / 4
|
||||||
var _winH = $(window).height();
|
this.slotX = this.taikoSquareW + 100
|
||||||
|
|
||||||
/* Positionning and size variables */
|
this.currentScore = 0
|
||||||
var _barH;
|
this.special = ""
|
||||||
var _barY;
|
this.scoreDispCount = -1
|
||||||
var _lyricsBarH;
|
this.scoreOpacity = 1.0
|
||||||
var _taikoW;
|
|
||||||
var _taikoH;
|
|
||||||
var _taikoX;
|
|
||||||
var _taikoY;
|
|
||||||
var _taikoSquareW = _winW/4;
|
|
||||||
var _slotX = _taikoSquareW+100;;
|
|
||||||
var _scoreSquareW;
|
|
||||||
var _scoreSquareH;
|
|
||||||
var _circleSize;
|
|
||||||
var _bigCircleSize;
|
|
||||||
var _circleY;
|
|
||||||
var _lyricsSize;
|
|
||||||
var _HPBarW;
|
|
||||||
var _HPBarH;
|
|
||||||
var _HPBarX;
|
|
||||||
var _HPBarY;
|
|
||||||
var _HPbarColX;
|
|
||||||
var _HPbarColY;
|
|
||||||
var _HPBarColMaxW;
|
|
||||||
var _HPBarColH;7
|
|
||||||
var _HPBarColWImage;
|
|
||||||
var _HPBarColWCanvas;
|
|
||||||
var _diffW;
|
|
||||||
var _diffH;
|
|
||||||
var _diffX;
|
|
||||||
var _diffY;
|
|
||||||
|
|
||||||
var _circleAnimatorT;
|
this.lastMeasure = 0
|
||||||
var _animationStartPos;
|
this.currentTimingPoint = 0
|
||||||
|
//Distance to be done by the circle
|
||||||
|
this.distanceForCircle = this.winW - this.slotX
|
||||||
|
|
||||||
var _currentScore = 0;
|
this.currentCircleFace = 0
|
||||||
var _special="";
|
this.currentDonFace = 0
|
||||||
var _scoreDispCount = -1;
|
this.currentBigDonFace = 1
|
||||||
var _scoreOpacity = 1.0;
|
this.nextBeat = 0
|
||||||
|
|
||||||
var _mainTextColor = "white";
|
this.songTitle = this.title
|
||||||
var _mainFont = "normal 14pt TnT";
|
this.songDifficulty = this.diff.split(".").slice(0, -1).join(".")
|
||||||
|
|
||||||
var _lastMeasure = 0;
|
|
||||||
var _currentTimingPoint=0;
|
|
||||||
var _distanceForCircle=(_winW - _slotX); //Distance to be done by the circle
|
|
||||||
var _timeForDistanceCircle;
|
|
||||||
|
|
||||||
var _currentCircleFace=0;
|
|
||||||
|
|
||||||
var _currentDonFace=0;
|
|
||||||
var _currentBigDonFace=1;
|
|
||||||
|
|
||||||
var _nextBeat=0;
|
|
||||||
|
|
||||||
var _songTitle = title;
|
|
||||||
var _songDifficulty = diff.split('.').slice(0, -1).join('.');
|
|
||||||
|
|
||||||
this.run = function(){
|
|
||||||
_ctx.font = _mainFont;
|
|
||||||
_this.setBackground();
|
|
||||||
|
|
||||||
$('.game-song').attr('alt', _songTitle).html(_songTitle);
|
|
||||||
|
|
||||||
_this.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setBackground = function(){
|
|
||||||
$("#game").css("background", "url('"+bg+"')");
|
|
||||||
$("#game").css("-webkit-background-size", "cover");
|
|
||||||
$("#game").css("-moz-background-size", "cover");
|
|
||||||
$("#game").css("-o-background-size", "cover");
|
|
||||||
$("#game").css("background-size", "cover");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.getDistanceForCircle = function(){
|
run(){
|
||||||
return _distanceForCircle;
|
this.ctx.font = "normal 14pt TnT"
|
||||||
|
this.setBackground()
|
||||||
|
|
||||||
|
$(".game-song").attr("alt", this.songTitle).html(this.songTitle)
|
||||||
|
|
||||||
|
this.refresh()
|
||||||
}
|
}
|
||||||
|
|
||||||
this.positionning = function(){
|
setBackground(){
|
||||||
|
$("#game").css("background-image", "url('" + this.bg + "')")
|
||||||
|
}
|
||||||
|
|
||||||
_winW = $(window).width();
|
getDistanceForCircle(){
|
||||||
_winH = $(window).height();
|
return this.distanceForCircle
|
||||||
_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();
|
positionning(){
|
||||||
var currentCircle = controller.getCurrentCircle();
|
this.winW = $(window).width()
|
||||||
if(currentCircle==0){
|
this.winH = $(window).height()
|
||||||
_HPBarColWImage = (controller.getGlobalScore().hp*650)/100;
|
this.canvas.width = this.winW
|
||||||
_HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100;
|
this.canvas.height = this.winH
|
||||||
|
this.barY = 0.25 * this.winH
|
||||||
|
this.barH = 0.23 * this.winH
|
||||||
|
this.lyricsBarH = 0.2 * this.barH
|
||||||
|
this.taikoH = this.barH
|
||||||
|
this.taikoW = this.taikoH / 1.2
|
||||||
|
this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2
|
||||||
|
this.taikoY = this.barY + 5
|
||||||
|
this.taikoSquareW = this.winW / 4
|
||||||
|
this.slotX = this.taikoSquareW + 100
|
||||||
|
this.scoreSquareW = this.taikoSquareW * 0.55
|
||||||
|
this.scoreSquareH = this.barH * 0.25
|
||||||
|
this.circleSize = this.barH * 0.15
|
||||||
|
this.bigCircleSize = this.barH * 0.25
|
||||||
|
this.circleY = this.barY + (this.barH - this.lyricsBarH) / 2
|
||||||
|
this.lyricsSize = this.lyricsBarH * 0.6
|
||||||
|
var HPBarRatio = 703 / 51
|
||||||
|
this.HPBarW = this.taikoSquareW * 2.475
|
||||||
|
this.HPBarH = this.barH * 0.35
|
||||||
|
if(this.HPBarW/this.HPBarH > HPBarRatio){
|
||||||
|
this.HPBarW = this.HPBarH * HPBarRatio
|
||||||
|
}else{
|
||||||
|
this.HPBarH = this.HPBarW / HPBarRatio
|
||||||
}
|
}
|
||||||
else if(circles[currentCircle-1]){
|
this.HPBarX = this.winW - this.HPBarW
|
||||||
if(circles[currentCircle-1].isAnimationFinished() || circles[currentCircle-1].getScore()==0){
|
this.HPBarY = this.barY - this.HPBarH
|
||||||
_HPBarColWImage = (controller.getGlobalScore().hp*650)/100;
|
this.HPbarColX = this.HPBarX + this.HPBarW * 0.008
|
||||||
_HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100;
|
this.HPbarColY = this.HPBarY + this.HPBarH * 0.14
|
||||||
}
|
this.HPBarColMaxW = this.HPBarW * 0.925
|
||||||
}
|
this.HPBarColH = this.HPBarH * 0.8
|
||||||
|
var diffRatio = 176 / 120
|
||||||
|
this.diffH = this.winH * 0.16
|
||||||
|
this.diffW = this.diffH*diffRatio
|
||||||
|
this.diffX = this.taikoX * 0.10
|
||||||
|
this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19
|
||||||
}
|
}
|
||||||
|
|
||||||
this.refresh = function(){
|
refresh(){
|
||||||
|
this.positionning()
|
||||||
|
this.distanceForCircle = this.winW - this.slotX
|
||||||
|
|
||||||
_this.positionning();
|
// Draw
|
||||||
_distanceForCircle=(_winW - _slotX);
|
this.drawBar()
|
||||||
_timeForDistanceCircle=((20*_distanceForCircle)/controller.getHitcircleSpeed());
|
this.drawSlot()
|
||||||
|
this.drawMeasures()
|
||||||
|
this.drawHPBar()
|
||||||
|
this.drawScore()
|
||||||
|
this.drawCircles()
|
||||||
|
this.drawTaikoSquare()
|
||||||
|
this.drawPressedKeys()
|
||||||
|
this.drawDifficulty()
|
||||||
|
this.drawCombo()
|
||||||
|
this.drawGlobalScore()
|
||||||
|
this.updateDonFaces()
|
||||||
|
//this.drawTime()
|
||||||
|
}
|
||||||
|
|
||||||
/* Draw */
|
updateDonFaces(){
|
||||||
this.drawBar();
|
if(this.controller.getEllapsedTime().ms >= this.nextBeat){
|
||||||
this.drawSlot();
|
this.nextBeat += this.controller.getSongData().beatInfo.beatInterval
|
||||||
this.drawMeasures();
|
if(this.controller.getCombo() >= 50){
|
||||||
this.drawHPBar();
|
this.currentBigDonFace = (this.currentBigDonFace + 1) % 2
|
||||||
this.drawCircles();
|
this.currentDonFace = (this.currentDonFace + 1) % 2
|
||||||
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{
|
else{
|
||||||
_currentBigDonFace=1;
|
this.currentBigDonFace = 1
|
||||||
_currentDonFace=0;
|
this.currentDonFace = 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.drawHPBar = function(){
|
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()
|
||||||
|
|
||||||
var bottomSquareX = _taikoSquareW;
|
this.ctx.fillOpacity = 0.5
|
||||||
var borderSize = 0.2*_HPBarH;
|
this.ctx.drawImage(assets.image["hp-bar-bg"],
|
||||||
_ctx.fillStyle = "black";
|
this.HPBarX, this.HPBarY,
|
||||||
_ctx.beginPath();
|
this.HPBarW, this.HPBarH
|
||||||
_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);
|
this.ctx.fillOpacity = 1
|
||||||
_ctx.fillRect(bottomSquareX, _HPBarY+0.68*_HPBarH, 0.8*_HPBarW, _HPBarH/4);
|
var hpBar = this.getHP()
|
||||||
_ctx.arc(bottomSquareX+borderSize,_HPBarY+(0.435*_HPBarH)+borderSize,borderSize,0,Math.PI*2);
|
this.ctx.drawImage(assets.image["hp-bar-colour"],
|
||||||
_ctx.fill();
|
0, 0,
|
||||||
_ctx.closePath();
|
Math.max(1, hpBar.imgW), 40,
|
||||||
|
this.HPbarColX, this.HPbarColY,
|
||||||
|
hpBar.canvasW, this.HPBarColH
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
var barBG = document.getElementById('hp-bar-bg');
|
getHP(){
|
||||||
var barColour = document.getElementById('hp-bar-colour');
|
var circles = this.controller.getCircles()
|
||||||
|
var currentCircle = this.controller.getCurrentCircle()
|
||||||
_ctx.drawImage(barBG, _HPBarX, _HPBarY, _HPBarW, _HPBarH);
|
var hp = this.controller.getGlobalScore().hp
|
||||||
_ctx.drawImage(barColour, 0, 0, Math.max(1, Math.floor(_HPBarColWImage)), 40, _HPbarColX, _HPbarColY, _HPBarColWCanvas, _HPBarColH);
|
var width = Math.floor(hp * 650 / 1000) * 10
|
||||||
|
return {
|
||||||
}
|
imgW: width,
|
||||||
|
canvasW: width / 650 * this.HPBarColMaxW
|
||||||
this.drawMeasures = function(){
|
|
||||||
|
|
||||||
var measures = controller.getSongData().measures;
|
|
||||||
var currentTime = controller.getEllapsedTime().ms;
|
|
||||||
|
|
||||||
measures.forEach(function(measure, index){
|
|
||||||
if(currentTime>=measure.ms-_timeForDistanceCircle && currentTime<=measure.ms+350 && measure.nb==0){
|
|
||||||
_this.drawMeasure(measure);
|
|
||||||
measure.x-=controller.getHitcircleSpeed();
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
measure.x=_winW; //set initial position to the extreme right of the screen
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.drawMeasure = function(measure){
|
|
||||||
_ctx.strokeStyle = "#bab8b8";
|
|
||||||
_ctx.lineWidth = "5.0";
|
|
||||||
_ctx.beginPath();
|
|
||||||
_ctx.moveTo(measure.x, _barY+5);
|
|
||||||
_ctx.lineTo(measure.x, _barY+_barH-_lyricsBarH-5);
|
|
||||||
_ctx.closePath();
|
|
||||||
_ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.drawCombo = function(){
|
|
||||||
if(controller.getCombo()>=10){
|
|
||||||
var comboY = _barY+(_barH/2);
|
|
||||||
var fontSize = (0.4)*_taikoH;
|
|
||||||
_ctx.font = "normal "+fontSize+"px TnT";
|
|
||||||
_ctx.textAlign = "center";
|
|
||||||
_ctx.strokeStyle = "black";
|
|
||||||
_ctx.strokeText(controller.getCombo(), _taikoSquareW-20-(_taikoW/2), comboY);
|
|
||||||
_ctx.fillStyle = "white";
|
|
||||||
_ctx.fillText(controller.getCombo(), _taikoSquareW-20-(_taikoW/2), comboY);
|
|
||||||
|
|
||||||
var fontSize = (0.12)*_taikoH;
|
|
||||||
_ctx.font = "normal "+fontSize+"px TnT";
|
|
||||||
_ctx.textAlign = "center";
|
|
||||||
_ctx.strokeStyle = "black";
|
|
||||||
_ctx.strokeText("コンボ", _taikoSquareW-20-(_taikoW/2), comboY+1.5*fontSize);
|
|
||||||
_ctx.fillStyle = "white";
|
|
||||||
_ctx.fillText("コンボ", _taikoSquareW-20-(_taikoW/2), comboY+1.5*fontSize);
|
|
||||||
_scoreDispCount++;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.drawGlobalScore = function(){
|
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,
|
||||||
|
0,
|
||||||
|
Math.PI * 2
|
||||||
|
)
|
||||||
|
this.ctx.fill()
|
||||||
|
this.ctx.closePath()
|
||||||
|
|
||||||
var fontSize = 0.7*_scoreSquareH;
|
var fontSize = 0.7 * this.scoreSquareH
|
||||||
/* Draw score text */
|
// Draw score text
|
||||||
_ctx.font = "normal "+fontSize+"px TnT";
|
this.ctx.font = "normal " + fontSize + "px TnT"
|
||||||
_ctx.fillStyle = "white";
|
this.ctx.fillStyle = "#fff"
|
||||||
_ctx.textAlign = "right";
|
this.ctx.textAlign = "center"
|
||||||
_ctx.fillText(controller.getGlobalScore().points, _scoreSquareW-20, _barY+0.7*_scoreSquareH);
|
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.drawPressedKeys = function(){
|
drawPressedKeys(){
|
||||||
|
var keys = this.controller.getKeys()
|
||||||
var keyRed = document.getElementById("taiko-key-red");
|
var kbd = this.controller.getBindings()
|
||||||
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;
|
|
||||||
_ctx.drawImage(keyRed, 53, 0, 53, 100, (_taikoX+0.15*_taikoW)+elemW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(keys[kbd["ka_r"]]){
|
|
||||||
var elemW = 0.45*_taikoW;
|
|
||||||
_ctx.drawImage(keyBlue, 68, 0, 68, 124, (_taikoX+0.05*_taikoW)+elemW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.displayScore = function(score, notPlayed){
|
|
||||||
_currentScore=score;
|
|
||||||
_special = (notPlayed) ? "-b" : "";
|
|
||||||
_scoreDispCount=0;
|
|
||||||
_scoreOpacity=1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.drawScore = function(){
|
|
||||||
|
|
||||||
if(_scoreDispCount>=0 && _scoreDispCount<=20){
|
|
||||||
_ctx.globalAlpha = _scoreOpacity;
|
|
||||||
var scoreIMG = document.getElementById("score-"+_currentScore+_special);
|
|
||||||
_ctx.drawImage(scoreIMG, _slotX-(_barH/2), (_barY+((_barH-_lyricsBarH)/2))-(_barH/2), _barH, _barH);
|
|
||||||
_scoreDispCount++;
|
|
||||||
if(_scoreOpacity-0.1>=0 && _currentScore!=0) _scoreOpacity-=0.1;
|
|
||||||
}
|
|
||||||
else if(_scoreDispCount==21){
|
|
||||||
_scoreDispCount=-1;
|
|
||||||
}
|
|
||||||
_ctx.globalAlpha=1;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.drawCircles = function(){
|
|
||||||
|
|
||||||
var circles = controller.getCircles();
|
|
||||||
circles.forEach(function(circle){
|
|
||||||
|
|
||||||
var currentTime = controller.getEllapsedTime().ms;
|
|
||||||
var startingTime = circle.getMS()-_timeForDistanceCircle;
|
|
||||||
var finishTime = circle.getMS()+100; //at circle.getMS(), the cirlce fits the slot
|
|
||||||
|
|
||||||
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 animationDuration=470; //ms
|
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(currentTime>finishTime+animationDuration && circle.isAnimated()){
|
|
||||||
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];
|
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
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.drawCircle = function(circle){
|
displayScore(score, notPlayed){
|
||||||
|
this.currentScore = score
|
||||||
|
this.special = notPlayed ? "-b" : ""
|
||||||
|
this.scoreDispCount = 0
|
||||||
|
this.scoreOpacity = 1
|
||||||
|
}
|
||||||
|
|
||||||
var size, color, txt;
|
drawScore(){
|
||||||
var offsetBigY=0;
|
if(this.scoreDispCount >= 0 && this.scoreDispCount <= 20){
|
||||||
var suppBig=0;
|
this.ctx.globalAlpha = this.scoreOpacity
|
||||||
var faceID;
|
var scoreIMG = assets.image["score-" + this.currentScore + this.special]
|
||||||
|
this.ctx.drawImage(scoreIMG,
|
||||||
|
this.slotX - this.barH / 2,
|
||||||
|
this.barY + (this.barH - this.lyricsBarH) / 2 - this.barH / 2,
|
||||||
|
this.barH,
|
||||||
|
this.barH
|
||||||
|
)
|
||||||
|
this.scoreDispCount++
|
||||||
|
if(this.scoreOpacity - 0.1 >= 0 && this.currentScore != 0){
|
||||||
|
this.scoreOpacity -= 0.1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(this.scoreDispCount == 21){
|
||||||
|
this.scoreDispCount = -1
|
||||||
|
}
|
||||||
|
this.ctx.globalAlpha = 1
|
||||||
|
}
|
||||||
|
|
||||||
switch(circle.getType()){
|
drawCircles(){
|
||||||
|
var circles = this.controller.getCircles()
|
||||||
|
for(var i = circles.length; i--;){
|
||||||
|
var circle = circles[i]
|
||||||
|
|
||||||
case 'don':
|
var currentTime = this.controller.getEllapsedTime().ms
|
||||||
color = "#f54c25";
|
var timeForDistance = 70 / this.circleSize * this.distanceForCircle / circle.getSpeed() + this.bigCircleSize / 2
|
||||||
size = _circleSize;
|
var startingTime = circle.getMS() - timeForDistance
|
||||||
txt = "ドン";
|
// At circle.getMS(), the cirlce fits the slot
|
||||||
faceID = "don-"+_currentDonFace;
|
var finishTime = circle.getMS() + 100
|
||||||
break;
|
|
||||||
|
|
||||||
case 'ka':
|
if(!circle.getPlayed() && currentTime >= startingTime && currentTime <= finishTime){
|
||||||
color = "#75CEE9";
|
this.drawCircle(circle)
|
||||||
size = _circleSize;
|
}
|
||||||
txt="カッ";
|
else{
|
||||||
faceID = "don-"+_currentDonFace;
|
// Animate circle to the HP bar
|
||||||
break;
|
|
||||||
|
|
||||||
case 'daiDon':
|
// Animation in ms
|
||||||
color = "#f54c25";
|
var animationDuration = 470
|
||||||
size = _bigCircleSize;
|
|
||||||
txt = "ドン(大)";
|
|
||||||
offsetBigY=5;
|
|
||||||
suppBig=10;
|
|
||||||
faceID = "big-don-"+_currentBigDonFace;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'daiKa':
|
if(!circle.isAnimated()){
|
||||||
color = "#75CEE9";
|
if(circle.getScore() != 0){
|
||||||
size = _bigCircleSize;
|
// Start animation to HP bar
|
||||||
txt="カッ(大)";
|
circle.animate()
|
||||||
offsetBigY=5;
|
}
|
||||||
suppBig=10;
|
}
|
||||||
faceID = "big-don-"+_currentBigDonFace;
|
if(circle.isAnimated()){
|
||||||
break;
|
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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//Main circle
|
calcBezierPoint(t, data){
|
||||||
_ctx.fillStyle = color;
|
var at = 1 - t
|
||||||
_ctx.beginPath();
|
|
||||||
_ctx.arc(circle.getPos().x, circle.getPos().y, size, 0, 2*Math.PI);
|
|
||||||
_ctx.closePath();
|
|
||||||
_ctx.fill();
|
|
||||||
|
|
||||||
//Face on circle
|
for(var i = 1; i < data.length; i++){
|
||||||
var face = document.getElementById(faceID);
|
for(var k = 0; k < data.length - i; k++){
|
||||||
_ctx.drawImage(face, circle.getPos().x-size-2, circle.getPos().y-size-4, (size*2)+5, (size*2)+6);
|
data[k] = {
|
||||||
|
x: data[k].x * at + data[k + 1].x * t,
|
||||||
if(!circle.isAnimated()){
|
y: data[k].y * at + data[k + 1].y * t
|
||||||
//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));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
return data[0]
|
||||||
|
}
|
||||||
|
|
||||||
this.togglePauseMenu = function(){
|
drawCircle(circle, circlePos){
|
||||||
$("#pause-menu").is(":visible") ? $("#pause-menu").hide() : $("#pause-menu").show();
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.drawDifficulty = function(){
|
if(circle.getPlayed()){
|
||||||
var muzu = document.getElementById('muzu_' + _songDifficulty);
|
var currentDonFace = 1
|
||||||
_ctx.drawImage(muzu, _diffY, _diffX, _diffW, _diffH);
|
var currentBigDonFace = 1
|
||||||
};
|
}else{
|
||||||
|
var currentDonFace = this.currentDonFace
|
||||||
|
var currentBigDonFace = this.currentBigDonFace
|
||||||
|
}
|
||||||
|
|
||||||
this.drawTime = function(){
|
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
|
||||||
|
}
|
||||||
|
|
||||||
var time = controller.getEllapsedTime();
|
// 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()
|
||||||
|
|
||||||
_ctx.globalAlpha = 0.7;
|
// Face on circle
|
||||||
_ctx.fillStyle = "black";
|
var face = assets.image[faceID]
|
||||||
_ctx.fillRect(_winW-110, _winH-60, _winW, _winH);
|
this.ctx.drawImage(face,
|
||||||
|
circlePos.x - size - 2,
|
||||||
|
circlePos.y - size - 4,
|
||||||
|
size * 2 + 5,
|
||||||
|
size * 2 + 6
|
||||||
|
)
|
||||||
|
|
||||||
_ctx.globalAlpha = 1.0;
|
if(!circle.isAnimated()){
|
||||||
_ctx.fillStyle = "white";
|
// 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
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var formatedH = ('0' + time.hour).slice(-2);
|
togglePauseMenu(){
|
||||||
var formatedM = ('0' + time.min).slice(-2);
|
if($("#pause-menu").is(":visible")){
|
||||||
var formatedS = ('0' + time.sec).slice(-2);
|
$("#pause-menu").hide()
|
||||||
|
}else{
|
||||||
|
$("#pause-menu").show()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
_ctx.font = "normal "+_barH/12+"px Kozuka";
|
drawDifficulty(){
|
||||||
_ctx.fillText(formatedH+':'+formatedM+':'+formatedS, _winW-10, _winH-30);
|
this.ctx.drawImage(assets.image["muzu_" + this.songDifficulty],
|
||||||
_ctx.fillText(time.ms, _winW-10, _winH-10);
|
this.diffX, this.diffY,
|
||||||
|
this.diffW, this.diffH
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
}
|
drawTime(){
|
||||||
|
var time = this.controller.getEllapsedTime()
|
||||||
|
|
||||||
this.drawBar = function(){
|
this.ctx.globalAlpha = 0.7
|
||||||
|
this.ctx.fillStyle = "#000"
|
||||||
|
this.ctx.fillRect(this.winW - 110, this.winH - 60, this.winW, this.winH)
|
||||||
|
|
||||||
var grd;
|
this.ctx.globalAlpha = 1
|
||||||
if(controller.getKeys()[86] || controller.getKeys()[66]){ //keys v, b
|
this.ctx.fillStyle = "#fff"
|
||||||
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";
|
var formatedH = ("0" + time.hour).slice(-2)
|
||||||
_ctx.fillStyle = grd;
|
var formatedM = ("0" + time.min).slice(-2)
|
||||||
_ctx.lineWidth = 10;
|
var formatedS = ("0" + time.sec).slice(-2)
|
||||||
_ctx.beginPath();
|
|
||||||
_ctx.rect(0,_barY,_winW,_barH);
|
|
||||||
_ctx.closePath();
|
|
||||||
_ctx.fill();
|
|
||||||
_ctx.stroke();
|
|
||||||
|
|
||||||
/* Lyrics bar */
|
this.ctx.font = "normal " + (this.barH / 12) + "px Kozuka"
|
||||||
_ctx.fillStyle = "#888888";
|
this.ctx.textAlign = "right"
|
||||||
_ctx.beginPath();
|
this.ctx.fillText(formatedH + ":" + formatedM + ":" + formatedS,
|
||||||
_ctx.rect(0,_barY+_barH-_lyricsBarH,_winW,_lyricsBarH);
|
this.winW - 10, this.winH - 30
|
||||||
_ctx.closePath();
|
)
|
||||||
_ctx.fill();
|
this.ctx.fillText(time.ms, this.winW - 10, this.winH - 10)
|
||||||
_ctx.stroke();
|
}
|
||||||
|
|
||||||
|
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.drawSlot = function(){
|
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()
|
||||||
|
}
|
||||||
|
|
||||||
/* Main circle */
|
drawSlot(){
|
||||||
var normalSize = _circleSize-(0.2*_circleSize);
|
// Main circle
|
||||||
_ctx.fillStyle = "#6f6f6e";
|
this.ctx.fillStyle = "#6f6f6e"
|
||||||
_ctx.beginPath();
|
this.ctx.beginPath()
|
||||||
_ctx.arc(_slotX, _circleY, normalSize,0,2*Math.PI);
|
this.ctx.arc(this.slotX, this.circleY, this.circleSize - 0.2 * this.circleSize, 0, 2 * Math.PI)
|
||||||
_ctx.closePath();
|
this.ctx.closePath()
|
||||||
_ctx.fill();
|
this.ctx.fill()
|
||||||
|
|
||||||
/* Big stroke circle */
|
// Big stroke circle
|
||||||
var bigSize = _circleSize;
|
this.ctx.strokeStyle = "#9e9f9f"
|
||||||
_ctx.strokeStyle = "#9e9f9f";
|
this.ctx.lineWidth = 3
|
||||||
_ctx.lineWidth = 3;
|
this.ctx.beginPath()
|
||||||
_ctx.beginPath();
|
this.ctx.arc(this.slotX, this.circleY, this.circleSize, 0, 2 * Math.PI)
|
||||||
_ctx.arc(_slotX, _circleY, bigSize,0,2*Math.PI);
|
this.ctx.closePath()
|
||||||
_ctx.closePath();
|
this.ctx.stroke()
|
||||||
_ctx.stroke();
|
|
||||||
|
|
||||||
/* Bigger stroke circle */
|
// Bigger stroke circle
|
||||||
var bigSize = _bigCircleSize;
|
this.ctx.strokeStyle = "#6f6f6e"
|
||||||
_ctx.strokeStyle = "#6f6f6e";
|
this.ctx.lineWidth = 3
|
||||||
_ctx.lineWidth = 3;
|
this.ctx.beginPath()
|
||||||
_ctx.beginPath();
|
this.ctx.arc(this.slotX, this.circleY, this.bigCircleSize, 0, 2 * Math.PI)
|
||||||
_ctx.arc(_slotX, _circleY, bigSize,0,2*Math.PI);
|
this.ctx.closePath()
|
||||||
_ctx.closePath();
|
this.ctx.stroke()
|
||||||
_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()
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user