Breakout powered by M5StickC and JoyStickHat
Contents
Make things
Let’s play Breakout Game on a browser with a controller made by M5StickC and Joystick for M5StickC.
Materials
How to make
Hardware connection
Wire the M5StickC_Joystick the M5StickC obnizOS is installed like the image below by referring to M5StickC_Joystick Library.
Software
Use Canvas to draw blocks and balls.
Canvas is an HTML5 and JavaScript feature that allows you to draw diagrams and pictures in your browser in the same way that you can sketch diagrams and pictures in the real world.
The following code is the basic code of Canvas. (Citation.:MDN Web docs)
This code will draw a rectangle in the browser.
<!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>
By drawing an element (such as a block or a ball) in JavaScript on the canvas, and then writing the element, erasing it, writing it, and erasing it repeatedly, we can create an animation that makes the element appear to be moving.
Master the block-scraping game in Canvas by visiting the MDN site here.
In the above site, the paddle is manipulated with the keyboard, but this time let’s manipulate the paddle using the x-axis and y-axis provided by the joystick.