#18 JavaScriptでアクションゲームを作る │ 操作ボタン＆スライディング追加！

走れない代わりに、走るゲームを創るプロジェクト、第18回。

今回は、

操作用のボタン

を追加し、ロックマンがスライディングできるようにした。

とうとうボタンを追加してしまった…

アクションが増やせるのはいいが、パンドラの箱を開けてしまったかもしれない。

バックナンバー

過去のバックナンバー（改訂履歴）は以下のとおり。

バックナンバー
本日の成果物
- なぜ、Jボタン・Kボタンなのか？
本日のドット絵
- スライディング
本日のソースコード（CSS）
今後の展望

本日の成果物

　SOUND　

Jボタン：ジャンプ
Kボタン：スライディング

PCの場合は、キーボードのJ・Kキーで同じ操作が可能である。

なぜ、Jボタン・Kボタンなのか？

それはとりもなおさず

PCのホームポジションだから

である。

左利きの方には申し訳ないが、右手の人差し指と中指で完結できるようにした。

また、ボタン名が「J」「K」のままであるのは
今後、もしボタン操作を案内するような局面で「スマホの場合はАボタンを、PCの場合はJボタンを押してね」みたいなことになると、伝える側も読む側もややこしくなるからである。

共通して「Jボタンを押してね」のほうがお互いラクだ。

決して筆者がJK好きだからということではない。

誤解しないでほしい。

本日のドット絵

本日追加したのは「スライディング」のドット絵である。

スライディング

f:id:you_key69:20220303225546j:plain — しまった、これからは変身前・後を用意しなきゃいけない（うかつだった…）

ふつうロックマンのスライディングは敵の攻撃を避けたり、隙間をとおったりするために使うが、~~今回特に当たり判定を変えていないので、敵を避けるのには使えない。~~
→その後、かわせるように変えてみた

あくまでボタン操作を楽しむことが目的なので、ご承知いただきたい。

本日のソースコード（CSS）

ボタンはスマホフレンドリーのため、大きめに設置した。

HTMLだけでは実現できなかったので、CSS（スタイルシート）をとりあえずそのまま直書きしている。

<style>
.J1{
    width: 160px;
    height: 50px;
    margin: 5px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #999999;
    background: #9999ff;
    color: #ffffff;
    cursor: pointer;
}
.K1{
    width: 160px;
    height: 50px;
    margin: 5px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #999999;
    background: #ff9999;
    color: #ffffff;
    cursor: pointer;
}
#btn_J:active {background: #8888ee;}
#btn_K:active {background: #ee8888;}
</style>

<canvas id="gamecanvas" width="420" height="360" onclick="restart()"></canvas>
	<br>
	<button id="btn_J" onclick="click_J()" class="J1">J▲</button>
	<button id="btn_K" onclick="click_K()" class="K1">K▼</button>
	<button id="btn_Share" onclick="showLink()" style="width:60px;height:75px;">Tweet</button>

ボタンの色・形が定まったら、ちゃんとはてなブログの「デザインCSS」に追加したいと思う。