# **ゼミナールB**
### **今回の目標**
「例4:Micro:bitのボタン操作応じて図形の色や形，大きさを変える」に挑戦して、canvasの使い方を学ぶ
### 図形の変化
ボタンAをおすと図形の形が、ボタンBを押すと図形の色が変わるプログラムを作成する
参考資料
・[【JavaScript】 Canvas上でクリックした線の色変更と移動](https://note.affi-sapo-sv.com/js-line-move.php)
・[キャンバスを作ってその上に描画する](https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it)
・[JavaScriptで図形を描画したい！canvasの基本とライブラリの活用方法](https://www.sejuku.net/blog/96127)
・[[JavaScript] canvasの内容をクリアする（.clearRect）](https://javascript.programmer-reference.com/js-canvas-clearrect/)
### 考え方
以前に作ったボタンサービスのプログラムを元に、ボタンが押された時の処理を変更する
### プログラム
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Micro:bitのボタン操作応じて図形の色や形を変える</title>
</head>
<body>
<button onclick="scan()">スキャン</button>
<button onclick="connect()">接続</button>
<button onclick="getButton()">ボタン状態取得</button>
<button onclick="disconnect()">切断</button>
<canvas id = "myCanvas" width="300" height="300"></canvas>
<script>
const UUID_BUTTON_SERVICE = 'e95d9882-251d-470a-a062-fa1922dfa9a8'
const UUID_BUTTON_SERVICE_CHARACTERISTIC_A = 'e95dda90-251d-470a-a062-fa1922dfa9a8'
const UUID_BUTTON_SERVICE_CHARACTERISTIC_B = 'e95dda91-251d-470a-a062-fa1922dfa9a8'
let device = null;
let service = null;
let service_button = null;
let char_buttonA = null;
let char_buttonB = null;
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let color = ["red","blue","green","black","pink","orange","purple","lightblue"];
let i = 0;
let j = 0;
async function scan() {
device = await navigator.bluetooth.requestDevice({
filters: [
{services: [UUID_BUTTON_SERVICE]},
{ namePrefix: "BBC micro:bit" }
]}
);
}
async function connect() {
server = await device.gatt.connect();
alert('接続しました。');
}
async function getButton() {
service_button = await server.getPrimaryService(UUID_BUTTON_SERVICE);
char_buttonA = await service_button.getCharacteristic(UUID_BUTTON_SERVICE_CHARACTERISTIC_A);
char_buttonB = await service_button.getCharacteristic(UUID_BUTTON_SERVICE_CHARACTERISTIC_B);
await char_buttonA.startNotifications();
char_buttonA.addEventListener('characteristicvaluechanged', ButtonAState);
await char_buttonB.startNotifications();
char_buttonB.addEventListener('characteristicvaluechanged', ButtonBState);
}
function ButtonAState(event) {
let buttonA = event.target.value.getUint8(0);
switch(buttonA) {
case 1:
i++;
if(i % 3 == 0){
ctx.clearRect(100, 100, 150, 150);
ctx.beginPath();
ctx.rect(100, 100, 150, 150);
ctx.fillStyle = color[j];
ctx.fill();
ctx.closePath();
}else if(i % 3 == 1){
ctx.clearRect(100, 100, 150, 150);
ctx.beginPath();
ctx.arc(175, 175, 75, 0, Math.PI*2);
ctx.fillStyle = color[j];
ctx.fill();
ctx.closePath();
}else if(i % 3 == 2){
ctx.clearRect(100, 100, 150, 150);
ctx.beginPath();
ctx.moveTo(175,100);
ctx.lineTo(250,250);
ctx.lineTo(100,250);
ctx.fillStyle = color[j];
ctx.fill();
ctx.closePath();
}
break;
}
}
function ButtonBState(event) {
let buttonB = event.target.value.getUint8(0);
switch(buttonB) {
case 1:
j++;
if(j > 7){
j = 0;
}
if(i % 3 == 0){
ctx.clearRect(100, 100, 150, 150);
ctx.beginPath();
ctx.rect(100, 100, 150, 150);
ctx.fillStyle = color[j];
ctx.fill();
ctx.closePath();
}else if(i % 3 == 1){
ctx.clearRect(100, 100, 150, 150);
ctx.beginPath();
ctx.arc(175, 175, 75, 0, Math.PI*2);
ctx.fillStyle = color[j];
ctx.fill();
ctx.closePath();
}else if(i % 3 == 2){
ctx.clearRect(100, 100, 150, 150);
ctx.beginPath();
ctx.moveTo(175,100);
ctx.lineTo(250,250);
ctx.lineTo(100,250);
ctx.fillStyle = color[j];
ctx.fill();
ctx.closePath();
}
break;
}
}
function disconnect() {
if (!device || !device.gatt.connected)
return;
device.gatt.disconnect();
alert("切断しました。");
}
</script>
</body>
</html>
```
### 結果
ボタンを押すたびに図形の形と色を変更することができた
canvasの使い方が少しは分かってきたので、次は加速度なども用いてゲームの作成に挑戦したい
Sign in with Wallet
Connect another wallet