mirror of
https://github.com/yuukiwww/taiko-web.git
synced 2024-10-22 17:05:49 +02:00
Lots of gameplay improvements
This commit is contained in:
LoveEevee
parent
2405345291
commit
79c4cfcd9d
@ -2,9 +2,12 @@
|
||||
width:100%;
|
||||
height:100%;
|
||||
overflow: hidden;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
#canvas{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
}
|
||||
@ -98,6 +98,7 @@ var assets = {
|
||||
'TnT'
|
||||
),
|
||||
|
||||
sounds: {}
|
||||
sounds: {},
|
||||
image: {}
|
||||
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
function Circle(id, ms, type){
|
||||
function Circle(id, ms, type, text, speed){
|
||||
|
||||
var _id=id;
|
||||
var _ms = ms;
|
||||
@ -43,15 +43,6 @@ function Circle(id, ms, type){
|
||||
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;
|
||||
}
|
||||
@ -60,15 +51,6 @@ function Circle(id, ms, type){
|
||||
_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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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()){
|
||||
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
@ -113,4 +118,8 @@ function Keyboard(controller){
|
||||
else if(type == "menu") _waitKeyupMenu[key] = true;
|
||||
}
|
||||
|
||||
this.getKeyTime = function(){
|
||||
return _keyTime;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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+="★<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>";
|
||||
|
||||
@ -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;
|
||||
var _canvas = document.getElementById('canvas');
|
||||
var _ctx = _canvas.getContext('2d');
|
||||
this.winW = $(window).width()
|
||||
this.winH = $(window).height()
|
||||
|
||||
var _winW = $(window).width();
|
||||
var _winH = $(window).height();
|
||||
this.taikoSquareW = this.winW / 4
|
||||
this.slotX = this.taikoSquareW + 100
|
||||
|
||||
/* 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;
|
||||
this.currentScore = 0
|
||||
this.special = ""
|
||||
this.scoreDispCount = -1
|
||||
this.scoreOpacity = 1.0
|
||||
|
||||
var _circleAnimatorT;
|
||||
var _animationStartPos;
|
||||
this.lastMeasure = 0
|
||||
this.currentTimingPoint = 0
|
||||
//Distance to be done by the circle
|
||||
this.distanceForCircle = this.winW - this.slotX
|
||||
|
||||
var _currentScore = 0;
|
||||
var _special="";
|
||||
var _scoreDispCount = -1;
|
||||
var _scoreOpacity = 1.0;
|
||||
this.currentCircleFace = 0
|
||||
this.currentDonFace = 0
|
||||
this.currentBigDonFace = 1
|
||||
this.nextBeat = 0
|
||||
|
||||
var _mainTextColor = "white";
|
||||
var _mainFont = "normal 14pt TnT";
|
||||
|
||||
var _lastMeasure = 0;
|
||||
var _currentTimingPoint=0;
|
||||
var _distanceForCircle=(_winW - _slotX); //Distance to be done by the circle
|
||||
var _timeForDistanceCircle;
|
||||
|
||||
var _currentCircleFace=0;
|
||||
|
||||
var _currentDonFace=0;
|
||||
var _currentBigDonFace=1;
|
||||
|
||||
var _nextBeat=0;
|
||||
|
||||
var _songTitle = title;
|
||||
var _songDifficulty = diff.split('.').slice(0, -1).join('.');
|
||||
|
||||
this.run = function(){
|
||||
_ctx.font = _mainFont;
|
||||
_this.setBackground();
|
||||
|
||||
$('.game-song').attr('alt', _songTitle).html(_songTitle);
|
||||
|
||||
_this.refresh();
|
||||
}
|
||||
|
||||
this.setBackground = function(){
|
||||
$("#game").css("background", "url('"+bg+"')");
|
||||
$("#game").css("-webkit-background-size", "cover");
|
||||
$("#game").css("-moz-background-size", "cover");
|
||||
$("#game").css("-o-background-size", "cover");
|
||||
$("#game").css("background-size", "cover");
|
||||
this.songTitle = this.title
|
||||
this.songDifficulty = this.diff.split(".").slice(0, -1).join(".")
|
||||
}
|
||||
|
||||
this.getDistanceForCircle = function(){
|
||||
return _distanceForCircle;
|
||||
run(){
|
||||
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();
|
||||
_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;
|
||||
getDistanceForCircle(){
|
||||
return this.distanceForCircle
|
||||
}
|
||||
|
||||
var circles = controller.getCircles();
|
||||
var currentCircle = controller.getCurrentCircle();
|
||||
if(currentCircle==0){
|
||||
_HPBarColWImage = (controller.getGlobalScore().hp*650)/100;
|
||||
_HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100;
|
||||
positionning(){
|
||||
this.winW = $(window).width()
|
||||
this.winH = $(window).height()
|
||||
this.canvas.width = this.winW
|
||||
this.canvas.height = this.winH
|
||||
this.barY = 0.25 * this.winH
|
||||
this.barH = 0.23 * this.winH
|
||||
this.lyricsBarH = 0.2 * this.barH
|
||||
this.taikoH = this.barH
|
||||
this.taikoW = this.taikoH / 1.2
|
||||
this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2
|
||||
this.taikoY = this.barY + 5
|
||||
this.taikoSquareW = this.winW / 4
|
||||
this.slotX = this.taikoSquareW + 100
|
||||
this.scoreSquareW = this.taikoSquareW * 0.55
|
||||
this.scoreSquareH = this.barH * 0.25
|
||||
this.circleSize = this.barH * 0.15
|
||||
this.bigCircleSize = this.barH * 0.25
|
||||
this.circleY = this.barY + (this.barH - this.lyricsBarH) / 2
|
||||
this.lyricsSize = this.lyricsBarH * 0.6
|
||||
var HPBarRatio = 703 / 51
|
||||
this.HPBarW = this.taikoSquareW * 2.475
|
||||
this.HPBarH = this.barH * 0.35
|
||||
if(this.HPBarW/this.HPBarH > HPBarRatio){
|
||||
this.HPBarW = this.HPBarH * HPBarRatio
|
||||
}else{
|
||||
this.HPBarH = this.HPBarW / HPBarRatio
|
||||
}
|
||||
else if(circles[currentCircle-1]){
|
||||
if(circles[currentCircle-1].isAnimationFinished() || circles[currentCircle-1].getScore()==0){
|
||||
_HPBarColWImage = (controller.getGlobalScore().hp*650)/100;
|
||||
_HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100;
|
||||
}
|
||||
}
|
||||
|
||||
this.HPBarX = this.winW - this.HPBarW
|
||||
this.HPBarY = this.barY - this.HPBarH
|
||||
this.HPbarColX = this.HPBarX + this.HPBarW * 0.008
|
||||
this.HPbarColY = this.HPBarY + this.HPBarH * 0.14
|
||||
this.HPBarColMaxW = this.HPBarW * 0.925
|
||||
this.HPBarColH = this.HPBarH * 0.8
|
||||
var diffRatio = 176 / 120
|
||||
this.diffH = this.winH * 0.16
|
||||
this.diffW = this.diffH*diffRatio
|
||||
this.diffX = this.taikoX * 0.10
|
||||
this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19
|
||||
}
|
||||
|
||||
this.refresh = function(){
|
||||
refresh(){
|
||||
this.positionning()
|
||||
this.distanceForCircle = this.winW - this.slotX
|
||||
|
||||
_this.positionning();
|
||||
_distanceForCircle=(_winW - _slotX);
|
||||
_timeForDistanceCircle=((20*_distanceForCircle)/controller.getHitcircleSpeed());
|
||||
// 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()
|
||||
}
|
||||
|
||||
/* 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;
|
||||
updateDonFaces(){
|
||||
if(this.controller.getEllapsedTime().ms >= this.nextBeat){
|
||||
this.nextBeat += this.controller.getSongData().beatInfo.beatInterval
|
||||
if(this.controller.getCombo() >= 50){
|
||||
this.currentBigDonFace = (this.currentBigDonFace + 1) % 2
|
||||
this.currentDonFace = (this.currentDonFace + 1) % 2
|
||||
}
|
||||
else{
|
||||
_currentBigDonFace=1;
|
||||
_currentDonFace=0;
|
||||
this.currentBigDonFace = 1
|
||||
this.currentDonFace = 0
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.drawHPBar = function(){
|
||||
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;
|
||||
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();
|
||||
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
|
||||
)
|
||||
}
|
||||
|
||||
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++;
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 */
|
||||
_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();
|
||||
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*_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);
|
||||
}
|
||||
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.drawPressedKeys = function(){
|
||||
|
||||
var keyRed = document.getElementById("taiko-key-red");
|
||||
var keyBlue = document.getElementById("taiko-key-blue");
|
||||
var keys = controller.getKeys()
|
||||
var kbd = controller.getBindings()
|
||||
drawPressedKeys(){
|
||||
var keys = this.controller.getKeys()
|
||||
var kbd = this.controller.getBindings()
|
||||
|
||||
if(keys[kbd["ka_l"]]){
|
||||
var elemW = 0.45*_taikoW;
|
||||
_ctx.drawImage(keyBlue, 0, 0, 68, 124, _taikoX+0.05*_taikoW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
|
||||
}
|
||||
|
||||
if(keys[kbd["don_l"]]){
|
||||
var elemW = 0.35*_taikoW;
|
||||
_ctx.drawImage(keyRed, 0, 0, 53, 100, _taikoX+0.15*_taikoW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
|
||||
}
|
||||
|
||||
if(keys[kbd["don_r"]]){
|
||||
var elemW = 0.35*_taikoW;
|
||||
_ctx.drawImage(keyRed, 53, 0, 53, 100, (_taikoX+0.15*_taikoW)+elemW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
|
||||
}
|
||||
|
||||
if(keys[kbd["ka_r"]]){
|
||||
var elemW = 0.45*_taikoW;
|
||||
_ctx.drawImage(keyBlue, 68, 0, 68, 124, (_taikoX+0.05*_taikoW)+elemW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.displayScore = function(score, notPlayed){
|
||||
_currentScore=score;
|
||||
_special = (notPlayed) ? "-b" : "";
|
||||
_scoreDispCount=0;
|
||||
_scoreOpacity=1.0;
|
||||
}
|
||||
|
||||
this.drawScore = function(){
|
||||
|
||||
if(_scoreDispCount>=0 && _scoreDispCount<=20){
|
||||
_ctx.globalAlpha = _scoreOpacity;
|
||||
var scoreIMG = document.getElementById("score-"+_currentScore+_special);
|
||||
_ctx.drawImage(scoreIMG, _slotX-(_barH/2), (_barY+((_barH-_lyricsBarH)/2))-(_barH/2), _barH, _barH);
|
||||
_scoreDispCount++;
|
||||
if(_scoreOpacity-0.1>=0 && _currentScore!=0) _scoreOpacity-=0.1;
|
||||
}
|
||||
else if(_scoreDispCount==21){
|
||||
_scoreDispCount=-1;
|
||||
}
|
||||
_ctx.globalAlpha=1;
|
||||
|
||||
}
|
||||
|
||||
this.drawCircles = function(){
|
||||
|
||||
var circles = controller.getCircles();
|
||||
circles.forEach(function(circle){
|
||||
|
||||
var currentTime = controller.getEllapsedTime().ms;
|
||||
var startingTime = circle.getMS()-_timeForDistanceCircle;
|
||||
var finishTime = circle.getMS()+100; //at circle.getMS(), the cirlce fits the slot
|
||||
|
||||
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
|
||||
};
|
||||
}
|
||||
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
|
||||
)
|
||||
}
|
||||
|
||||
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;
|
||||
var offsetBigY=0;
|
||||
var suppBig=0;
|
||||
var faceID;
|
||||
drawScore(){
|
||||
if(this.scoreDispCount >= 0 && this.scoreDispCount <= 20){
|
||||
this.ctx.globalAlpha = this.scoreOpacity
|
||||
var scoreIMG = assets.image["score-" + this.currentScore + this.special]
|
||||
this.ctx.drawImage(scoreIMG,
|
||||
this.slotX - this.barH / 2,
|
||||
this.barY + (this.barH - this.lyricsBarH) / 2 - this.barH / 2,
|
||||
this.barH,
|
||||
this.barH
|
||||
)
|
||||
this.scoreDispCount++
|
||||
if(this.scoreOpacity - 0.1 >= 0 && this.currentScore != 0){
|
||||
this.scoreOpacity -= 0.1
|
||||
}
|
||||
}
|
||||
else if(this.scoreDispCount == 21){
|
||||
this.scoreDispCount = -1
|
||||
}
|
||||
this.ctx.globalAlpha = 1
|
||||
}
|
||||
|
||||
switch(circle.getType()){
|
||||
drawCircles(){
|
||||
var circles = this.controller.getCircles()
|
||||
for(var i = circles.length; i--;){
|
||||
var circle = circles[i]
|
||||
|
||||
case 'don':
|
||||
color = "#f54c25";
|
||||
size = _circleSize;
|
||||
txt = "ドン";
|
||||
faceID = "don-"+_currentDonFace;
|
||||
break;
|
||||
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
|
||||
|
||||
case 'ka':
|
||||
color = "#75CEE9";
|
||||
size = _circleSize;
|
||||
txt="カッ";
|
||||
faceID = "don-"+_currentDonFace;
|
||||
break;
|
||||
if(!circle.getPlayed() && currentTime >= startingTime && currentTime <= finishTime){
|
||||
this.drawCircle(circle)
|
||||
}
|
||||
else{
|
||||
// Animate circle to the HP bar
|
||||
|
||||
case 'daiDon':
|
||||
color = "#f54c25";
|
||||
size = _bigCircleSize;
|
||||
txt = "ドン(大）";
|
||||
offsetBigY=5;
|
||||
suppBig=10;
|
||||
faceID = "big-don-"+_currentBigDonFace;
|
||||
break;
|
||||
// Animation in ms
|
||||
var animationDuration = 470
|
||||
|
||||
case 'daiKa':
|
||||
color = "#75CEE9";
|
||||
size = _bigCircleSize;
|
||||
txt="カッ(大）";
|
||||
offsetBigY=5;
|
||||
suppBig=10;
|
||||
faceID = "big-don-"+_currentBigDonFace;
|
||||
break;
|
||||
if(!circle.isAnimated()){
|
||||
if(circle.getScore() != 0){
|
||||
// Start animation to HP bar
|
||||
circle.animate()
|
||||
}
|
||||
}
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Main circle
|
||||
_ctx.fillStyle = color;
|
||||
_ctx.beginPath();
|
||||
_ctx.arc(circle.getPos().x, circle.getPos().y, size, 0, 2*Math.PI);
|
||||
_ctx.closePath();
|
||||
_ctx.fill();
|
||||
calcBezierPoint(t, data){
|
||||
var at = 1 - t
|
||||
|
||||
//Face on circle
|
||||
var face = document.getElementById(faceID);
|
||||
_ctx.drawImage(face, circle.getPos().x-size-2, circle.getPos().y-size-4, (size*2)+5, (size*2)+6);
|
||||
|
||||
if(!circle.isAnimated()){
|
||||
//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));
|
||||
for(var i = 1; i < data.length; i++){
|
||||
for(var k = 0; k < data.length - i; k++){
|
||||
data[k] = {
|
||||
x: data[k].x * at + data[k + 1].x * t,
|
||||
y: data[k].y * at + data[k + 1].y * t
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
return data[0]
|
||||
}
|
||||
|
||||
this.togglePauseMenu = function(){
|
||||
$("#pause-menu").is(":visible") ? $("#pause-menu").hide() : $("#pause-menu").show();
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
this.drawDifficulty = function(){
|
||||
var muzu = document.getElementById('muzu_' + _songDifficulty);
|
||||
_ctx.drawImage(muzu, _diffY, _diffX, _diffW, _diffH);
|
||||
};
|
||||
if(circle.getPlayed()){
|
||||
var currentDonFace = 1
|
||||
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;
|
||||
_ctx.fillStyle = "black";
|
||||
_ctx.fillRect(_winW-110, _winH-60, _winW, _winH);
|
||||
// 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
|
||||
)
|
||||
|
||||
_ctx.globalAlpha = 1.0;
|
||||
_ctx.fillStyle = "white";
|
||||
if(!circle.isAnimated()){
|
||||
// Text
|
||||
this.ctx.font = "normal bold " + this.lyricsSize + "px Kozuka"
|
||||
this.ctx.textAlign = "center"
|
||||
this.ctx.strokeStyle = "#000"
|
||||
this.ctx.lineWidth = this.lyricsSize / 5
|
||||
this.ctx.fillStyle = "#fff"
|
||||
this.strokeFillText(circle.getText(),
|
||||
circlePos.x,
|
||||
this.barY + this.barH - this.lyricsBarH * 0.3
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
var formatedH = ('0' + time.hour).slice(-2);
|
||||
var formatedM = ('0' + time.min).slice(-2);
|
||||
var formatedS = ('0' + time.sec).slice(-2);
|
||||
togglePauseMenu(){
|
||||
if($("#pause-menu").is(":visible")){
|
||||
$("#pause-menu").hide()
|
||||
}else{
|
||||
$("#pause-menu").show()
|
||||
}
|
||||
}
|
||||
|
||||
_ctx.font = "normal "+_barH/12+"px Kozuka";
|
||||
_ctx.fillText(formatedH+':'+formatedM+':'+formatedS, _winW-10, _winH-30);
|
||||
_ctx.fillText(time.ms, _winW-10, _winH-10);
|
||||
drawDifficulty(){
|
||||
this.ctx.drawImage(assets.image["muzu_" + this.songDifficulty],
|
||||
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;
|
||||
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";
|
||||
}
|
||||
this.ctx.globalAlpha = 1
|
||||
this.ctx.fillStyle = "#fff"
|
||||
|
||||
_ctx.strokeStyle = "black";
|
||||
_ctx.fillStyle = grd;
|
||||
_ctx.lineWidth = 10;
|
||||
_ctx.beginPath();
|
||||
_ctx.rect(0,_barY,_winW,_barH);
|
||||
_ctx.closePath();
|
||||
_ctx.fill();
|
||||
_ctx.stroke();
|
||||
var formatedH = ("0" + time.hour).slice(-2)
|
||||
var formatedM = ("0" + time.min).slice(-2)
|
||||
var formatedS = ("0" + time.sec).slice(-2)
|
||||
|
||||
/* Lyrics bar */
|
||||
_ctx.fillStyle = "#888888";
|
||||
_ctx.beginPath();
|
||||
_ctx.rect(0,_barY+_barH-_lyricsBarH,_winW,_lyricsBarH);
|
||||
_ctx.closePath();
|
||||
_ctx.fill();
|
||||
_ctx.stroke();
|
||||
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.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 */
|
||||
var normalSize = _circleSize-(0.2*_circleSize);
|
||||
_ctx.fillStyle = "#6f6f6e";
|
||||
_ctx.beginPath();
|
||||
_ctx.arc(_slotX, _circleY, normalSize,0,2*Math.PI);
|
||||
_ctx.closePath();
|
||||
_ctx.fill();
|
||||
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 */
|
||||
var bigSize = _circleSize;
|
||||
_ctx.strokeStyle = "#9e9f9f";
|
||||
_ctx.lineWidth = 3;
|
||||
_ctx.beginPath();
|
||||
_ctx.arc(_slotX, _circleY, bigSize,0,2*Math.PI);
|
||||
_ctx.closePath();
|
||||
_ctx.stroke();
|
||||
// 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 */
|
||||
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);
|
||||
|
||||
}
|
||||
// Bigger stroke circle
|
||||
this.ctx.strokeStyle = "#6f6f6e"
|
||||
this.ctx.lineWidth = 3
|
||||
this.ctx.beginPath()
|
||||
this.ctx.arc(this.slotX, this.circleY, this.bigCircleSize, 0, 2 * Math.PI)
|
||||
this.ctx.closePath()
|
||||
this.ctx.stroke()
|
||||
}
|
||||
|
||||
drawTaikoSquare(){
|
||||
// Taiko square
|
||||
this.ctx.lineWidth = 7
|
||||
this.ctx.fillStyle = "#ff3c00"
|
||||
this.ctx.strokeStyle = "#000"
|
||||
this.ctx.beginPath()
|
||||
this.ctx.rect(0,this.barY, this.taikoSquareW,this.barH)
|
||||
this.ctx.fill()
|
||||
this.ctx.closePath()
|
||||
this.ctx.stroke()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user