Hardware components | ||||||
 |
| × | 1 | |||
| × | 1 | ||||
Let’s play Breakout Game on a browser with a controller made by M5StickC and Joystick for M5StickC.
MaterialsHow to makeHardware 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.
Program<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script
src="https://unpkg.com/obniz@3.4.0/obniz.js"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/m5stickcjs/m5stickc.js"></script>
<style>
#container {
width: 600px;
margin: 50px auto auto auto;
}
</style>
</head>
<body>
<div id="obniz-debug"></div>
<div id="container">
<canvas id="canvas" width="600" height="450"></canvas>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const fps = 1000 / 50;
const ballRadius = 12;
let run = true;
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 4;
let dy = -4;
let boardHeight = 10;
let boardWidth = 85;
let boardX = (canvas.width - boardWidth) / 2;
let blockRowCount = 5;
let blockColumnCount = 3;
let blockWidth = canvas.width / blockRowCount - 20;
let blockHeight = 25;
let blockPadding = 10;
let blockOffsetTop = 30;
let blockOffsetLeft = 30;
let score = 0;
let life = 3;
let blocks = [];
function Block() {
this.x = 0;
this.y = 0;
this.alive = true;
}
for (let c = 0; c < blockColumnCount; c++) {
blocks[c] = [];
for (let r = 0; r < blockRowCount; r++) {
blocks[c][r] = new Block();
}
}
function collisionDetection() {
for (let c = 0; c < blockColumnCount; c++) {
for (let r = 0; r < blockRowCount; r++) {
let b = blocks[c][r];
if (b.alive) {
if (
x > b.x &&
x < b.x + blockWidth &&
y > b.y &&
y < b.y + blockHeight
) {
dy = -dy;
b.alive = false;
score++;
if (score == blockRowCount * blockColumnCount) {
run = false;
ctx.font = "40px Arial";
ctx.fillStyle = "#00FF3B";
ctx.fillText("CLEAR!!", canvas.width / 3, canvas.height / 2 - 20);
}
}
}
}
}
}
function frameOutDetection() {
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy < ballRadius) {
dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
if (x > boardX && x < boardX + boardWidth) {
dy = -dy;
} else {
life--;
if (!life) {
run = false;
ctx.font = "40px Arial";
ctx.fillStyle = "#FF1111";
ctx.fillText("GAME OVER", canvas.width / 3, canvas.height / 2 - 20);
} else {
x = canvas.width / 2;
y = canvas.height - 30;
dx = 5;
dy = -5;
boardX = (canvas.width - boardWidth) / 2;
}
}
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#00A4E3";
ctx.fill();
ctx.closePath();
}
function drawBoard() {
ctx.beginPath();
ctx.rect(boardX, canvas.height - boardHeight, boardWidth, boardHeight);
ctx.fillStyle = "#00A4E3";
ctx.fill();
ctx.closePath();
}
function drawblocks() {
for (let c = 0; c < blockColumnCount; c++) {
for (let r = 0; r < blockRowCount; r++) {
if (blocks[c][r].alive) {
let blockX = r * (blockWidth + blockPadding) + blockOffsetLeft;
let blockY = c * (blockHeight + blockPadding) + blockOffsetTop;
blocks[c][r].x = blockX;
blocks[c][r].y = blockY;
ctx.beginPath();
ctx.rect(blockX, blockY, blockWidth, blockHeight);
ctx.fillStyle = "#00A4E3";
ctx.fill();
ctx.closePath();
}
}
}
}
function drawHeader() {
ctx.font = "16px Arial";
ctx.fillStyle = "#00A4E3";
ctx.fillText("Score: " + score, 10, 20);
ctx.fillText("Life: " + life, canvas.width - 65, 20);
}
const obniz = new Obniz.M5StickC("OBNIZ_ID_HERE");
obniz.onconnect = async function() {
const joystick = obniz.wired("M5StickC_JoyStick", { scl: 26, sda: 0 });
let direction = 0;
async function getXLoop() {
direction = await joystick.getXWait();
await obniz.wait(10);
}
async function main() {
getXLoop();
ctx.clearRect(0, 0, canvas.width, canvas.height);
collisionDetection();
frameOutDetection();
drawblocks();
drawBall();
drawBoard();
drawHeader();
if (direction >= 1 && boardX < canvas.width - boardWidth) {
boardX += 7;
} else if (direction <= -1 && boardX > 0) {
boardX -= 7;
}
x += dx;
y += dy;
if (run) {
setTimeout(main, fps);
}
}
main();
};
</script>
</body>
</html>Before we get into the project, let's look into obniz.
Here → obniz for DIY electronics
obniz is a cloud-connected IoT development board. You can program on the web browser of any smartphone or computer and the command is sent to obniz through the internet via obniz cloud. By connecting the obniz to the cloud through wifi, users can remotely control devices that are physically connected to obniz.
Thanks to this cloud based approach, you can program with Python, Javascript, or other languages you prefer and control hardware directly. You don't need to integrate firmware into the device side. Recording and analyzing data is also easy with obniz cloud service.
Want to control hardware things with your current Python or Javascript skill? Want to start IoT project but don't know where to start? Want to learn programming with languages you prefer?
obniz will help you broaden your viewpoint and develop both your SW and HW skills.
For more information, please visit our official website → Official Website
Where to get obniz board? → Amazon /Official Store
Comments