これまでに作ってきたゲームはPCでないと操作できませんでした。今回はスマホでも操作できるようにします。
スマホ用のボタンを追加する
ボタンのようなものを追加してこれをタップするとプレイヤーを操作できるようにします。それからゲームの操作法が書いていないとユーザーはどうやればゲームをスタートさせるかわからないのでそれも追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
window.addEventListener('load', function(){ Init(); InitEnemies(); InitRollers(); InitSound(); Draw(); // 追加 InitButtons(); InsertHowToPlay(); }); |
InitButtons関数はボタンのようなものを表示させ、ここをタップしたり離したりするとPCで操作したときの
|
1 2 |
document.onkeydown = function(e){} document.onkeyup = function(e){} |
と同じ動作ができるようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
function InitButtons() { let container = document.getElementById('container'); let upButton; upButton = document.createElement('section'); upButton.style.width = '70px'; upButton.style.height = '25px'; upButton.style.border = 'solid 1px #aaaaaa'; upButton.style.position = 'absolute'; upButton.style.marginTop = '-110px'; upButton.style.marginLeft = '180px'; container.appendChild(upButton); let leftButton = document.createElement('section'); leftButton.style.width = '70px'; leftButton.style.height = '25px'; leftButton.style.border = 'solid 1px #aaaaaa'; leftButton.style.position = 'absolute'; leftButton.style.marginTop = '-72px'; leftButton.style.marginLeft = '130px'; container.appendChild(leftButton); let rightButton = document.createElement('section'); rightButton.style.width = '70px'; rightButton.style.height = '25px'; rightButton.style.border = 'solid 1px #aaaaaa'; rightButton.style.position = 'absolute'; rightButton.style.marginTop = '-72px'; rightButton.style.marginLeft = '230px'; container.appendChild(rightButton); let downButton = document.createElement('section'); downButton.style.width = '70px'; downButton.style.height = '25px'; downButton.style.border = 'solid 1px #aaaaaa'; downButton.style.position = 'absolute'; downButton.style.marginTop = '-36px'; downButton.style.marginLeft = '180px'; container.appendChild(downButton); // タッチ開始とタッチ終了 upButton.addEventListener('touchstart', UpTouchStart); upButton.addEventListener('touchend', UpTouchEnd); downButton.addEventListener('touchstart', DownTouchStart); downButton.addEventListener('touchend', DownTouchEnd); leftButton.addEventListener('touchstart', LeftTouchStart); leftButton.addEventListener('touchend', LeftTouchEnd); rightButton.addEventListener('touchstart', RightTouchStart); rightButton.addEventListener('touchend', RightTouchEnd); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function UpTouchStart() { if(isGaming) isKeyUp = true; else GameStart(); } function DownTouchStart() { if(isGaming) isKeyDown = true; else GameStart(); } function LeftTouchStart() { if(isGaming) isKeyLeft = true; else GameStart(); } function RightTouchStart() { if(isGaming) isKeyRight = true; else GameStart(); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function UpTouchEnd() { isKeyUp = false; } function DownTouchEnd() { isKeyDown = false; } function LeftTouchEnd() { isKeyLeft = false; } function RightTouchEnd() { isKeyRight = false; } |
それからInsertHowToPlay関数は以下のようになっています。HTMLに直接書くとスマホ用のボタンが表示される場所が変わってしまうのでJavaScript側に書きます。
|
1 2 3 4 5 6 7 8 9 |
function InsertHowToPlay() { let p = document.createElement('p'); p.innerHTML = `PCはゲームスタートはSキー、プレイヤーの操作は↑→↓←キー、スマホは右下のボタンをタップするとゲームが開始します。 2箇所に設置されているローラーで敵を踏み潰すことができます。そのときに加算される点数は最初は100点。 ミスまたはステージクリアするまで倍々と増えていきます。 ただし上限は9900点。1600点を超えるとローラー使用時に敵は逃げます。深追いして死なないように注意。`; container.appendChild(p); } |
これで完成？ 今後の課題
これで完成！ということであるプログラミング配信系YouTuberに紹介してもらうことにしました。それがその動画です。
ここで表面化した問題としては配信時のボリュームのままではBGMがちょっと大きすぎるので調整が必要となった、スマホでも遊べるように小さな画面にしたがPCでは見づらい、方向転換してもプレイヤーのイメージが同じというのは違和感があるなどです。敵が交差点でUターンにするのはなしにすればどうかという感想もでましたが、これはこのゲームの肝（敵が2体で残機が多いので簡単そうに見えるが、実際には敵が挟み撃ちを仕掛けてくるなどえげつない動きをするので難しい）なので却下させていただきます。
BGMのボリューム調整ができないことと、表示サイズを変えられないというのは配信をしている人に紹介してもらうという観点では致命的なので改善することにします。
BGMのボリュームを調整できるようにする
PCの場合はShiftキーを押しながら↑または→キーを押しているときはボリュームを上げ、Shiftキーを押しながら↓または←キーを押しているときはボリュームを下げます。いきなり最大ボリュームでBGMがなり始めるとユーザーがびっくりするかもしれないのでボリュームの初期値は小さめに設定します。
ボリュームを設定するための関数を作成します。0なら無音で1.0が最大値です。実際には0.3くらいでほとんど1.0と同じくらいの音として聞こえます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function SetVolume(volume) { if(volume < 0) volume = 0; if(volume > 1.0) volume = 1; bgm.volume = volume; hitSound.volume = volume; deadSound.volume = volume; rollerSound.volume = volume; stageClearSound.volume = volume; gameOverSound.volume = volume; } |
ボリュームを上げたり下げる関数を作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function VolumeUp() { let volume = bgm.volume; if(volume > 0.3) volume += 0.1; else volume += 0.01; SetVolume(volume); } function VolumeDown() { let volume = bgm.volume; if(volume > 0.3) volume -= 0.1; else volume -= 0.01; SetVolume(volume); } |
SHIFTキーが押されているときで方向キーがおされているときはボリュームを変更します。またゲーム中はデフォルトの操作を抑止します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
let isKeyShift = false; document.onkeydown = function(e){ if(e.key == 'ArrowRight') isKeyRight = true; if(e.key == 'ArrowLeft') isKeyLeft = true; if(e.key == 'ArrowUp') isKeyUp = true; if(e.key == 'ArrowDown') isKeyDown = true; if(e.key == 's') GameStart(); if(e.key == 'Shift') isKeyShift = true; SetVolumeIfNeed(); // ゲーム中はデフォルトの操作を抑止する if(isGaming) return false; } document.onkeyup = function(e){ if(e.key == 'ArrowRight') isKeyRight = false; if(e.key == 'ArrowLeft') isKeyLeft = false; if(e.key == 'ArrowUp') isKeyUp = false; if(e.key == 'ArrowDown') isKeyDown = false; if(e.key == 'Shift') isKeyShift = false; } |
該当するキーが押されていたらボリュームを変更します。
|
1 2 3 4 5 6 7 |
function SetVolumeIfNeed() { if(isKeyShift && (isKeyRight || isKeyUp)) VolumeUp(); if(isKeyShift && (isKeyLeft || isKeyDown)) VolumeDown() } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
window.addEventListener('load', function(){ Init(); InitEnemies(); InitRollers(); InitSound(); Draw(); InitButtons(); InsertHowToPlay(); SetVolume(0.08); // 初期値は小さめの値に }); |
スマートフォンでアクセスしたときもボリュームを調整できるようにします。
InitButtons関数に以下を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// ボリューム調整用 let vDownButton = document.createElement('section'); vDownButton.style.width = '60px'; vDownButton.style.height = '45px'; vDownButton.style.border = 'solid 1px #aaaaaa'; vDownButton.style.position = 'absolute'; vDownButton.style.marginTop = '-6px'; vDownButton.style.marginLeft = '10px'; vDownButton.style.tableLayout = 'table-cell'; vDownButton.style.textAlign = 'center'; vDownButton.style.verticalAlign = 'middle'; vDownButton.textContent = '小'; container.appendChild(vDownButton); let vUpButton = document.createElement('section'); vUpButton.style.width = '60px'; vUpButton.style.height = '45px'; vUpButton.style.border = 'solid 1px #aaaaaa'; vUpButton.style.position = 'absolute'; vUpButton.style.marginTop = '-6px'; vUpButton.style.marginLeft = '90px'; vUpButton.style.tableLayout = 'table-cell'; vUpButton.style.textAlign = 'center'; vUpButton.style.verticalAlign = 'middle'; vUpButton.textContent = '大'; container.appendChild(vUpButton); vDownButton.addEventListener('touchstart', vDownTouchStart); vUpButton.addEventListener('touchstart', vUpTouchStart); |
ボタンがタップされたらボリュームを調整する処理をおこないます。
|
1 2 3 4 5 6 7 |
function vDownTouchStart(){ VolumeDown(); } function vUpTouchStart(){ VolumeUp(); } |
