M5StickCで作るブロック崩し

M5StickCとJoyStickHatで動くブロック崩し

今回やること

M5StickCとM5Stick_Joystickをコントローラーにして、ブラウザ上に表示されたブロック崩しゲームで遊びます。

用意するもの

組み立て方

obnizOSを書き込んだM5StickCとM5StickC_Joystickを配線します。

obniz公式デバイスのM5StickCの販売は終了しました。

プログラム

ブロックやボールを描くためにCanvasを利用します。

Canvasは、現実世界で図や絵をスケッチするのと同様に、ブラウザ上で図や絵を描くことが出来るHTML5とJavaScriptの機能です。

以下コードはCanvasの基本コードです。(引用:MDN Web docs)

こちらのコードで、ブラウザ上に四角形が描画されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");

 ctx.beginPath();
 ctx.rect(20, 40, 50, 50);
 ctx.fillStyle = "#FF0000";
 ctx.fill();
 ctx.closePath();
</script>

</body>
</html>

CanvasにJavaScriptで要素(ブロックやボールなど)を描画し、その要素を書いては消し書いては消しを繰り返すことでアニメーションが可能になり、要素が動いているように見えます。

こちらのMDNサイトで、Canvasでのブロックくずしゲームをマスターしてください。

上記サイトでは、パドルをキーボードで操作していますが今回はjoystickで得られるx軸とy軸を使ってパドルを操作してみましょう。

 

完成したプログラム

M5StickC[obniz無期限ライセンス付属]
無期限クラウドライセンス付属
M5StickC
M5StickCを買う
（Amazon.co.jp）