juan/japanese-drum-game
1
0
Fork 0
mirror of https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git synced 2024-11-15 07:21:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3 from LoveEevee/gamepad

Browse Source 
Fix loading and add gamepad
This commit is contained in:
Bui 2018-08-30 21:05:13 +01:00 committed by GitHub
commit e08fc602e2
12 changed files with 227 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -46,6 +46,7 @@
<script type='application/javascript' src='/src/js/view.js'></script> <script type='application/javascript' src='/src/js/view.js'></script>
<script type='application/javascript' src='/src/js/bufferedloop.js'></script> <script type='application/javascript' src='/src/js/bufferedloop.js'></script>
<script type='application/javascript' src='/src/js/mekadon.js'></script> <script type='application/javascript' src='/src/js/mekadon.js'></script>
<script type='application/javascript' src='/src/js/gamepad.js'></script>
</head> </head>
<body> <body>

21
public/src/js/controller.js
View File

@ -13,6 +13,8 @@ function Controller(selectedSong, songData, autoPlayEnabled){
var _mainLoop; var _mainLoop;
var _pauseMenu = false; var _pauseMenu = false;
this.autoPlayEnabled = autoPlayEnabled
this.run = function(){ this.run = function(){
_this.loadUIEvents(); _this.loadUIEvents();
@ -23,11 +25,11 @@ function Controller(selectedSong, songData, autoPlayEnabled){
this.loadUIEvents = function(){ this.loadUIEvents = function(){
$("#song-selection-butt").click(function(){ $("#song-selection-butt").click(function(){
assets.sounds["don"].play(); assets.sounds["don"].playAsset();
_this.songSelection(); _this.songSelection();
}); });
$("#restart-butt").click(function(){ $("#restart-butt").click(function(){
assets.sounds["don"].play(); assets.sounds["don"].playAsset();
_this.restartSong(); _this.restartSong();
}); });
$("#continue-butt").click(function(){ $("#continue-butt").click(function(){
@ -48,7 +50,7 @@ function Controller(selectedSong, songData, autoPlayEnabled){
else if(ms>=0 && !started){ //when music shall starts else if(ms>=0 && !started){ //when music shall starts
setTimeout(function(){ setTimeout(function(){
assets.sounds["main-music"].volume = 0.7; assets.sounds["main-music"].volume = 0.7;
assets.sounds["main-music"].play(); assets.sounds["main-music"].playAsset();
}, _songData.generalInfo.audioWait); }, _songData.generalInfo.audioWait);
started=true; started=true;
} }
@ -84,7 +86,7 @@ function Controller(selectedSong, songData, autoPlayEnabled){
if (score.fail == 0) { if (score.fail == 0) {
vp = 'fullcombo'; vp = 'fullcombo';
setTimeout(function(){ setTimeout(function(){
assets.sounds['fullcombo'].play(); assets.sounds['fullcombo'].playAsset();
}, 1350); }, 1350);
} else if (score.hp >= 50) { } else if (score.hp >= 50) {
vp = 'clear'; vp = 'clear';
@ -92,7 +94,7 @@ function Controller(selectedSong, songData, autoPlayEnabled){
vp = 'fail'; vp = 'fail';
} }
assets.sounds['game' + vp].play(); assets.sounds['game' + vp].playAsset();
setTimeout(function(){ setTimeout(function(){
var scoresheet = new Scoresheet(_this, _this.getGlobalScore()); var scoresheet = new Scoresheet(_this, _this.getGlobalScore());
@ -170,6 +172,10 @@ function Controller(selectedSong, songData, autoPlayEnabled){
return _keyboard.setKey(keyCode, down); return _keyboard.setKey(keyCode, down);
} }
this.getBindings = function(){
return _keyboard.getBindings();
}
this.getSongData = function(){ this.getSongData = function(){
return _game.getSongData(); return _game.getSongData();
} }
@ -215,12 +221,7 @@ function Controller(selectedSong, songData, autoPlayEnabled){
} }
this.autoPlay = function(circle){ this.autoPlay = function(circle){
if(autoPlayEnabled){
if(circle && circle.getStatus() == 450){
_mekadon.play(circle) _mekadon.play(circle)
} }
return true
}
}
} }

56
public/src/js/game.js
View File

@ -117,46 +117,34 @@ function Game(controller, selectedSong, songData){
var circle = circles[_currentCircle]; var circle = circles[_currentCircle];
if(circle){ if(circle){
if(controller.autoPlayEnabled){
if(controller.autoPlay(circle)){ return controller.autoPlay(circle)
return
} }
var keys = controller.getKeys()
if(controller.getKeys()[86]){ var kbd = controller.getBindings()
if(!circle.getPlayed() && !controller.isWaitingForKeyup(86, "score") && circle.getStatus()!=-1){ if(keys[kbd["don_l"]]){
var score = _this.checkScore(circle); _this.checkKey(kbd["don_l"], circle)
circle.played(score);
_this.updateCurrentCircle();
controller.waitForKeyup(86, "score");
} }
if(keys[kbd["don_r"]]){
_this.checkKey(kbd["don_r"], circle)
} }
if(controller.getKeys()[66]){ if(keys[kbd["ka_l"]]){
if(!circle.getPlayed() && !controller.isWaitingForKeyup(66, "score") && circle.getStatus()!=-1){ _this.checkKey(kbd["ka_l"], circle)
var score = _this.checkScore(circle);
circle.played(score);
_this.updateCurrentCircle();
controller.waitForKeyup(66, "score");
} }
} if(keys[kbd["ka_r"]]){
if(controller.getKeys()[67]){ _this.checkKey(kbd["ka_r"], circle)
if(!circle.getPlayed() && !controller.isWaitingForKeyup(67, "score") && circle.getStatus()!=-1){
var score = _this.checkScore(circle);
circle.played(score);
_this.updateCurrentCircle();
controller.waitForKeyup(67, "score");
}
}
if(controller.getKeys()[78]){
if(!circle.getPlayed() && !controller.isWaitingForKeyup(78, "score") && circle.getStatus()!=-1){
var score = _this.checkScore(circle);
circle.played(score);
_this.updateCurrentCircle();
controller.waitForKeyup(78, "score");
} }
} }
} }
this.checkKey = function(keyCode, circle){
if(!circle.getPlayed() && !controller.isWaitingForKeyup(keyCode, "score") && circle.getStatus()!=-1){
var score = _this.checkScore(circle);
circle.played(score);
_this.updateCurrentCircle();
controller.waitForKeyup(keyCode, "score");
}
} }
this.checkScore = function(circle){ this.checkScore = function(circle){
@ -230,7 +218,7 @@ function Game(controller, selectedSong, songData){
_mainMusicPlaying=false; _mainMusicPlaying=false;
} }
else{ else{
assets.sounds["main-music"].play(); assets.sounds["main-music"].playAsset();
_mainMusicPlaying=true; _mainMusicPlaying=true;
} }
} }
@ -253,14 +241,14 @@ function Game(controller, selectedSong, songData){
this.togglePause = function(){ this.togglePause = function(){
if(!_paused){ if(!_paused){
assets.sounds["pause"].play(); assets.sounds["pause"].playAsset();
_paused=true; _paused=true;
_latestDate = new Date(); _latestDate = new Date();
_this.toggleMainMusic(); _this.toggleMainMusic();
} }
else{ else{
assets.sounds["cancel"].play(); assets.sounds["cancel"].playAsset();
_paused=false; _paused=false;
var currentDate = new Date(); var currentDate = new Date();
_ellapsedTimeSincePause = _ellapsedTimeSincePause + Math.abs(currentDate.getTime() - _latestDate.getTime()); _ellapsedTimeSincePause = _ellapsedTimeSincePause + Math.abs(currentDate.getTime() - _latestDate.getTime());

86
public/src/js/gamepad.js Normal file
View File

@ -0,0 +1,86 @@
class Gamepad{
constructor(keyboard){
var kbd=keyboard.getBindings()
this.gameBtn = {}
this.gameBtn[kbd["don_l"]] = ["u", "d", "l", "r"]
this.gameBtn[kbd["don_r"]] = ["a", "b", "x", "y"]
this.gameBtn[kbd["ka_l"]] = ["lb", "lt"]
this.gameBtn[kbd["ka_r"]] = ["rb", "rt"]
this.menuBtn = {}
this.menuBtn[kbd["pause"]] = ["start"]
this.b = {
"a": "0",
"b": "1",
"x": "2",
"y": "3",
"lb": "4",
"rb": "5",
"lt": "6",
"rt": "7",
"back": "8",
"start": "9",
"ls": "10",
"rs": "11",
"u": "12",
"d": "13",
"l": "14",
"r": "15",
"guide": "16"
}
this.btn = {}
this.keyboard = keyboard
}
play(menuPlay){
if("getGamepads" in navigator){
var gamepads = navigator.getGamepads()
}else{
return
}
var bindings = menuPlay ? this.menuBtn : this.gameBtn
for(var i = 0; i < gamepads.length; i++){
if(gamepads[i]){
var buttons = gamepads[i].buttons
this.toRelease = {}
for(var i in bindings){
this.toRelease[i] = bindings[i].length
}
for(var btnName in buttons){
buttonSearch: {
for(var bind in bindings){
for(var name in bindings[bind]){
if(btnName == this.b[bindings[bind][name]]){
this.checkButton(buttons, btnName, bind)
break buttonSearch
}
}
}
}
}
}
}
}
checkButton(buttons, btnName, keyCode){
var button = buttons[btnName]
var pressed = !this.btn[btnName] && button.pressed
var released = this.btn[btnName] && !button.pressed
if(pressed){
this.btn[btnName] = true
}else if(released){
delete this.btn[btnName]
}
if(pressed){
if(this.keyboard.getKeys()[keyCode]){
this.keyboard.setKey(keyCode, false)
}
this.keyboard.setKey(keyCode, true)
}else if(!button.pressed && this.keyboard.getKeys()[keyCode]){
if(released){
this.toRelease[keyCode+"released"] = true
}
this.toRelease[keyCode]--
if(this.toRelease[keyCode] == 0 && this.toRelease[keyCode+"released"]){
this.keyboard.setKey(keyCode, false)
}
}
}
}

76
public/src/js/keyboard.js
View File

@ -1,11 +1,25 @@
function Keyboard(controller){ function Keyboard(controller){
var _kbd = {
"don_l": 86, // V
"don_r": 66, // B
"ka_l": 67, // C
"ka_r": 78, // N
"pause": 81, // Q
"back": 8 // Backspace
}
var _this = this; var _this = this;
var _keys = {}; var _keys = {};
var _waitKeyupScore = {}; var _waitKeyupScore = {};
var _waitKeyupSound = {}; var _waitKeyupSound = {};
var _waitKeyupMenu = {}; var _waitKeyupMenu = {};
this.getBindings = function(){
return _kbd
}
var _gamepad = new Gamepad(this)
$(document).keydown(function(e){ $(document).keydown(function(e){
if (e.which === 8 && !$(e.target).is("input, textarea")) if (e.which === 8 && !$(e.target).is("input, textarea"))
@ -24,12 +38,12 @@ function Keyboard(controller){
}); });
this.buttonEnabled = function(keyCode){ this.buttonEnabled = function(keyCode){
if(controller.autoPlay()){ if(controller.autoPlayEnabled){
switch(keyCode){ switch(keyCode){
case 86: case _kbd["don_l"]:
case 66: case _kbd["don_r"]:
case 67: case _kbd["ka_l"]:
case 78: case _kbd["ka_r"]:
return false return false
} }
} }
@ -37,45 +51,37 @@ function Keyboard(controller){
} }
this.checkGameKeys = function(){ this.checkGameKeys = function(){
if(!controller.autoPlayEnabled){
if(_keys[86] && !_this.isWaitingForKeyup(86, "sound")){ _gamepad.play()
// V, play 'don' sound
controller.playSound('note_don');
_this.waitForKeyup(86, "sound");
} }
if(_keys[66] && !_this.isWaitingForKeyup(66, "sound")){ _this.checkKeySound(_kbd["don_l"], "note_don")
// B, play 'don' sound _this.checkKeySound(_kbd["don_r"], "note_don")
controller.playSound('note_don'); _this.checkKeySound(_kbd["ka_l"], "note_ka")
_this.waitForKeyup(66, "sound"); _this.checkKeySound(_kbd["ka_r"], "note_ka")
}
if(_keys[67] && !_this.isWaitingForKeyup(67, "sound")){
// C, play 'ka' sound
controller.playSound('note_ka');
_this.waitForKeyup(67, "sound");
}
if(_keys[78] && !_this.isWaitingForKeyup(78, "sound")){
// N, play 'ka' sound
controller.playSound('note_ka');
_this.waitForKeyup(78, "sound");
}
} }
this.checkMenuKeys = function(){ this.checkMenuKeys = function(){
_gamepad.play(1)
if(_keys[8] && !_this.isWaitingForKeyup(8, "menu")){ _this.checkKey(_kbd["back"], "menu", function(){
// Backspace, go back to song selection
_this.waitForKeyup(8, "menu");
controller.pauseSound("main-music", true); controller.pauseSound("main-music", true);
controller.songSelection(); controller.songSelection();
} })
if(_keys[81] && !_this.isWaitingForKeyup(81, "menu")){ _this.checkKey(_kbd["pause"], "menu", function(){
// Q, pause the game
_this.waitForKeyup(81, "menu");
controller.togglePauseMenu(); controller.togglePauseMenu();
})
} }
this.checkKey = function(keyCode, keyup, callback){
if(_keys[keyCode] && !_this.isWaitingForKeyup(keyCode, keyup)){
_this.waitForKeyup(keyCode, keyup);
callback()
}
}
this.checkKeySound = function(keyCode, sound){
_this.checkKey(keyCode, "sound", function(){
controller.playSound(sound);
})
} }
this.getKeys = function(){ this.getKeys = function(){

19
public/src/js/loader.js
View File

@ -24,16 +24,21 @@ function Loader(){
assets.audio.forEach(function(name){ assets.audio.forEach(function(name){
var id = name.substr(0, name.length-4); var id = name.substr(0, name.length-4);
var audio = new Audio();
audio.src = '/assets/audio/'+name;
audio.muted = true;
audio.load();
audio.onloadeddata = function(){
assets.sounds[id] = new Audio(); assets.sounds[id] = new Audio();
assets.sounds[id].src = audio.src; assets.sounds[id].muted = true;
assets.sounds[id].load(); assets.sounds[id].playAsset = function(){
try{
assets.sounds[id].muted = false;
assets.sounds[id].play()
}catch(e){
console.warn(e)
}
}
assets.sounds[id].onloadeddata = function(){
_this.assetLoaded(); _this.assetLoaded();
}; };
assets.sounds[id].src = '/assets/audio/'+name;
assets.sounds[id].load();
}); });
$.ajax({ $.ajax({

12
public/src/js/loadsong.js
View File

@ -13,10 +13,11 @@ function loadSong(selectedSong, autoPlayEnabled){
assets.sounds["bgm_songsel"].pause(); assets.sounds["bgm_songsel"].pause();
assets.sounds["bgm_songsel"].currentTime = 0; assets.sounds["bgm_songsel"].currentTime = 0;
assets.sounds["start"].play(); assets.sounds["start"].playAsset();
$("#assets").append("<img id='music-bg' src='/songs/"+_selectedSong.folder+"/bg.png' />"); $("#assets").append("<img id='music-bg' src='/songs/"+_selectedSong.folder+"/bg.png' />");
var audio = new Audio(); var audio = new Audio();
audio.muted = true;
audio.src = '/songs/'+_selectedSong.folder+'/main.mp3'; audio.src = '/songs/'+_selectedSong.folder+'/main.mp3';
audio.load(); audio.load();
@ -25,6 +26,15 @@ function loadSong(selectedSong, autoPlayEnabled){
_this.checkIfEverythingLoaded(); _this.checkIfEverythingLoaded();
}); });
audio.playAsset = function(){
try{
audio.muted = false;
audio.play()
}catch(e){
console.warn(e)
}
}
audio.onloadeddata = function(){ audio.onloadeddata = function(){
_musicLoaded=true; _musicLoaded=true;
assets.sounds["main-music"]=audio; assets.sounds["main-music"]=audio;

15
public/src/js/mekadon.js
View File

@ -6,25 +6,28 @@ class Mekadon{
this.keys = {} this.keys = {}
} }
play(circle){ play(circle){
if(circle.getStatus() == 450){
var kbd = this.controller.getBindings()
if(circle.getType() == "don"){ if(circle.getType() == "don"){
this.setKey(this.lr ? 86 : 66) this.setKey(this.lr ? kbd["don_l"] : kbd["don_r"])
this.lr = !this.lr this.lr = !this.lr
}else if(circle.getType() == "daiDon"){ }else if(circle.getType() == "daiDon"){
this.setKey(86) this.setKey(kbd["don_l"])
this.setKey(66) this.setKey(kbd["don_r"])
this.lr = false this.lr = false
}else if(circle.getType() == "ka"){ }else if(circle.getType() == "ka"){
this.setKey(this.lr ? 67 : 78) this.setKey(this.lr ? kbd["ka_l"] : kbd["ka_r"])
this.lr = !this.lr this.lr = !this.lr
}else if(circle.getType() == "daiKa"){ }else if(circle.getType() == "daiKa"){
this.setKey(67) this.setKey(kbd["ka_l"])
this.setKey(78) this.setKey(kbd["ka_r"])
this.lr = false this.lr = false
} }
var score = this.game.checkScore(circle); var score = this.game.checkScore(circle);
circle.played(score); circle.played(score);
this.game.updateCurrentCircle(); this.game.updateCurrentCircle();
} }
}
setKey(keyCode){ setKey(keyCode){
var self = this var self = this
if(this.keys[keyCode]){ if(this.keys[keyCode]){

6
public/src/js/scoresheet.js
View File

@ -81,13 +81,13 @@ function Scoresheet(controller, score){
_this.setResults(); _this.setResults();
$("#song-select").click(function(){ $("#song-select").click(function(){
assets.sounds["don"].play(); assets.sounds["don"].playAsset();
bgm.pause(); bgm.pause();
controller.songSelection(); controller.songSelection();
}); });
$("#replay").click(function(){ $("#replay").click(function(){
assets.sounds["don"].play(); assets.sounds["don"].playAsset();
bgm.pause(); bgm.pause();
controller.restartSong(); controller.restartSong();
}); });
@ -96,7 +96,7 @@ function Scoresheet(controller, score){
} }
assets.sounds["results"].play(); assets.sounds["results"].playAsset();
bgm = new BufferedLoop( bgm = new BufferedLoop(
{url: '/assets/audio/bgm_result.ogg', duration: 0.847}, {url: '/assets/audio/bgm_result.ogg', duration: 0.847},

14
public/src/js/songselect.js
View File

@ -51,7 +51,7 @@ function SongSelect(){
_this.endPreview(); _this.endPreview();
assets.sounds["diffsel"].pause(); assets.sounds["diffsel"].pause();
assets.sounds["diffsel"].currentTime = 0; assets.sounds["diffsel"].currentTime = 0;
assets.sounds["don"].play(); assets.sounds["don"].playAsset();
clearInterval(menuLoop); clearInterval(menuLoop);
var difficultyElement = (e.target.className=="stars" || e.target.className=="diffname") ? e.target.parentElement : e.target; var difficultyElement = (e.target.className=="stars" || e.target.className=="diffname") ? e.target.parentElement : e.target;
@ -79,14 +79,14 @@ function SongSelect(){
if ($(".opened").length && $(".opened").attr('id') == $(this).attr('id')) { if ($(".opened").length && $(".opened").attr('id') == $(this).attr('id')) {
_this.endPreview(); _this.endPreview();
bgm.play(); bgm.play();
assets.sounds["cancel"].play(); assets.sounds["cancel"].playAsset();
$(".difficulty").hide(); $(".difficulty").hide();
$(".opened").removeClass("opened", 300); $(".opened").removeClass("opened", 300);
assets.sounds["diffsel"].pause(); assets.sounds["diffsel"].pause();
assets.sounds["diffsel"].currentTime = 0; assets.sounds["diffsel"].currentTime = 0;
setTimeout(function(){ setTimeout(function(){
assets.sounds["song-select"].play(); assets.sounds["song-select"].playAsset();
}, 300); }, 300);
$('.songsel-title').fadeOut(200, function(){ $('.songsel-title').fadeOut(200, function(){
@ -100,11 +100,11 @@ function SongSelect(){
if(!$('.opened').length) { if(!$('.opened').length) {
_this.startPreview($(this).data('song-id'), $(this).data('preview')); _this.startPreview($(this).data('song-id'), $(this).data('preview'));
assets.sounds["don"].play(); assets.sounds["don"].playAsset();
assets.sounds["song-select"].pause(); assets.sounds["song-select"].pause();
assets.sounds["song-select"].currentTime = 0; assets.sounds["song-select"].currentTime = 0;
setTimeout(function(){ setTimeout(function(){
assets.sounds["diffsel"].play(); assets.sounds["diffsel"].playAsset();
}, 300); }, 300);
$('.songsel-title').fadeOut(200, function(){ $('.songsel-title').fadeOut(200, function(){
@ -114,7 +114,7 @@ function SongSelect(){
} else { } else {
_preview.pause(); _preview.pause();
_this.startPreview($(this).data('song-id'), $(this).data('preview'), false); _this.startPreview($(this).data('song-id'), $(this).data('preview'), false);
assets.sounds["ka"].play(); assets.sounds["ka"].playAsset();
} }
}; };
@ -136,7 +136,7 @@ function SongSelect(){
bgm.play(); bgm.play();
setTimeout(function(){ setTimeout(function(){
assets.sounds["song-select"].play(); assets.sounds["song-select"].playAsset();
}, 200); }, 200);
for(var i=0; i<assets.songs.length; i++){ for(var i=0; i<assets.songs.length; i++){

4
public/src/js/titlescreen.js
View File

@ -32,7 +32,7 @@ function Titlescreen(){
$("#screen").find("#title-screen").show(); $("#screen").find("#title-screen").show();
$(window).resize(_this.positionning); $(window).resize(_this.positionning);
assets.sounds["title"].play(); assets.sounds["title"].playAsset();
} }
@ -40,7 +40,7 @@ function Titlescreen(){
assets.sounds["title"].pause(); assets.sounds["title"].pause();
assets.sounds["title"].currentTime = 0; assets.sounds["title"].currentTime = 0;
assets.sounds["don"].play(); assets.sounds["don"].playAsset();
new SongSelect(); new SongSelect();
} }

10
public/src/js/view.js
View File

@ -267,23 +267,25 @@ function View(controller, bg, title, diff){
var keyRed = document.getElementById("taiko-key-red"); var keyRed = document.getElementById("taiko-key-red");
var keyBlue = document.getElementById("taiko-key-blue"); var keyBlue = document.getElementById("taiko-key-blue");
var keys = controller.getKeys()
var kbd = controller.getBindings()
if(controller.getKeys()[67]){ if(keys[kbd["ka_l"]]){
var elemW = 0.45*_taikoW; var elemW = 0.45*_taikoW;
_ctx.drawImage(keyBlue, 0, 0, 68, 124, _taikoX+0.05*_taikoW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW); _ctx.drawImage(keyBlue, 0, 0, 68, 124, _taikoX+0.05*_taikoW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
} }
if(controller.getKeys()[86]){ if(keys[kbd["don_l"]]){
var elemW = 0.35*_taikoW; var elemW = 0.35*_taikoW;
_ctx.drawImage(keyRed, 0, 0, 53, 100, _taikoX+0.15*_taikoW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW); _ctx.drawImage(keyRed, 0, 0, 53, 100, _taikoX+0.15*_taikoW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
} }
if(controller.getKeys()[66]){ if(keys[kbd["don_r"]]){
var elemW = 0.35*_taikoW; 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); _ctx.drawImage(keyRed, 53, 0, 53, 100, (_taikoX+0.15*_taikoW)+elemW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
} }
if(controller.getKeys()[78]){ if(keys[kbd["ka_r"]]){
var elemW = 0.45*_taikoW; 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); _ctx.drawImage(keyBlue, 68, 0, 68, 124, (_taikoX+0.05*_taikoW)+elemW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
} }