今回は簡単にWebアプリが作りてしまうCodePenを使用してゲームを作ってみました！
Netlifyに作成したアプリを公開しているのでObnizをお持ちの方はぜひ試してみてください！
あなたは持っていますか？
まずは完成したアプリを動画でごらんください！
あなたは正解できますか？
## 使用したライブラリ,フレームワーク HTMLとJSでライブラリ,フレームワークになります。 Obnizはブラウザ版を使用しているのでVSCodeなどでで使用する際は気を付けてください。絶対解けない無理ゲー作った笑
— kkyosuke (@kkyosuke17) May 23, 2021
正解した人いたら教えてほしい
色は動画だと100パー無理😂#obniz#webアプリ pic.twitter.com/cSkk1xFBWD
ソースコードとObnizの接続
まずはObnizの接続です。
使用した部品は2つになります。
| 部品 | 型番 |
|---|---|
| スピーカー | 圧電スピーカー(圧電サウンダ)(１３ｍｍ)ＰＫＭ１３ＥＰＹＨ４０００－Ａ０ |
| フルカラーLED | マイコン内蔵ＲＧＢＬＥＤ ８ｍｍ ＰＬ９８２３－Ｆ８ |
配線は画像の通りになります。
この後記載するソースコードに合わせて配線しているので配線を変える際はソースコードも合わせて変更ください。
続いてソースコードになります。
HTMLとJSは
<html lang="jp" >
<head>
<meta charset="UTF-8">
<title>絶対色感,絶対音感ゲーム</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>
<body>
<!-- 全体をVue.js有効にする -->
<div id="app" class="container text-white bg-dark p-1">
<!-- タイトル -->
<div class="row text-center">
<div class="col-sm-6 mx-auto"><h1>絶対色感,絶対音感ゲーム</h1></div>
</div>
<!-- 設定 -->
<div class="form-group my-3 mx-4">
<div class="border-bottom col-sm-12"><h5>Obniz ID</h5></div>
</div>
<div class="form-group form-inline my-3 mx-5">
<input v-model:value="ObnizID[0]" class="form-control" type="text" maxlength="4" style="width:80px;">
<label class="control-label mx-2">-</label>
<input v-model:value="ObnizID[1]" class="form-control" type="text" maxlength="4" style="width:80px;">
</div>
<!-- 電源ON -->
<div class="form-group my-3 mx-4">
<div class="border-bottom col-sm-12"><h5>Obniz起動</h5></div>
</div>
<div class="form-group my-3 mx-5">
<button v-on:click="PowerON" class="btn btn-success">電源ON</button>
</div>
<!-- 回答欄 -->
<div class="form-group my-3 mx-4">
<div class="border-bottom col-sm-12"><h5>回答欄</h5></div>
</div>
<div class="form-group form-inline my-3 mx-5">
<label class="control-label mx-2">R</label>
<input v-model:value="R" class="form-control" type="text" maxlength="3" style="width:80px;">
<label class="control-label mx-2">G</label>
<input v-model:value="G" class="form-control" type="text" maxlength="3" style="width:80px;">
<label class="control-label mx-2">B</label>
<input v-model:value="B" class="form-control" type="text" maxlength="3" style="width:80px;">
<div class="form-group form-inline my-3 mx-5">
<label class="control-label mx-2">周波数2000~4000Hz</label>
<input v-model:value="Sound" class="form-control" type="text" maxlength="4" style="width:80px;">
</div>
<div class="form-group my-3 mx-5">
<button v-on:click="Answer" class="btn btn-success">答え合わせ！</button>
</div>
</body>
</html>
const sleep = (msec) => new Promise(res => setTimeout(res, msec));
// Obniz関数
let obniz;
// Obniz呼び出し関数
const connect = function(func, ob){
console.log(ob.connectionState);
// Obnizへの接続を確認
if (ob.connectionState === "connected") {
func();
} else {
ob.on('connect', () => {
func();
})
}
}
const app = new Vue({
el: '#app', // Vueが管理する一番外側のDOM要素
data: {
// Vue内部で利用する変数定義
ObnizID: ['0000', '0000'],
R:0,
G:0,
B:0,
Sound:0,
RAnswer:0,
GAnswer:0,
BAnswer:0,
SoundAnswer:0,
},
methods: {
// 関数はココに記述
PowerON: function() {
// Obniz ID 指定
let obnizid = `${this.ObnizID[0]}-${this.ObnizID[1]}`;
console.log(obnizid);
this.obniz = new Obniz(obnizid);
let me = this; // thisを関数内で使えないので変数に代入
// connect関数を呼んで、connect関数内で以下のFunctionを実行
connect(async function() {
//配線に合わせて番号を変更
const rgbled = me.obniz.wired('WS2811', { gnd: 0, vcc: 1, din: 2 });
const speaker = me.obniz.wired('Speaker', { signal: 10, gnd: 11 });
//乱数によりRGBと周波数を生成
var RGBmin = 0 ;
var RGBmax = 255 ;
var Soundmin = 2000 ;
var Soundmax = 4000 ;
RAnswer = Math.floor( Math.random() * (RGBmax + 1 - RGBmin) ) + RGBmin;
GAnswer = Math.floor( Math.random() * (RGBmax + 1 - RGBmin) ) + RGBmin;
BAnswer = Math.floor( Math.random() * (RGBmax + 1 - RGBmin) ) + RGBmin;
SoundAnswer = Math.floor( Math.random() * (Soundmax + 1 - Soundmin) ) + Soundmin;
me.obniz.display.clear();
me.obniz.display.print('ON');
rgbled.rgb(RAnswer,GAnswer,BAnswer);
speaker.play(SoundAnswer);
me.obniz.display.clear();
}, this.obniz);
},
Answer: function() {
//アラートメッセージに回答を表示
const outAlert = '答え！！R,' + RAnswer + ' G,' + GAnswer + ' B,' + BAnswer + ' 周波数' + SoundAnswer+ ' Hz';
alert(outAlert);
},
},
});
ソースコードは以下を参考にして作成しました。
自作PC特化だけど、リモート起動や自動起動を好きにカスタムできるWebアプリをobnizで試作してみた
できなかったこと
今回は回答を判断するというところができませんでした。
できなかったところは2つ
・入力された値から正解不正解をアラートする。
・正解不正解で動くサーボモータを付ける。
1つ目は皆さんもコードを読んでいてここ使っていなくないか？と思われた方もいるかと思います。
以下抜粋部分になりますが、入力欄の変数が宣言しているだけでどこにも使われていないのです。
本来なら入力されたRGBと周波数を答えと照らし合わせて正解不正解をアラートで表現したかったです。
Vue.jsのv-ifにうまく組み込めずこういった形になってしまいました。
const app = new Vue({
el: '#app', // Vueが管理する一番外側のDOM要素
data: {
// Vue内部で利用する変数定義
ObnizID: ['0000', '0000'],
R:0,
G:0,
B:0,
Sound:0,
RAnswer:0,
GAnswer:0,
BAnswer:0,
SoundAnswer:0,
},
2つ目は前回私が作成した「飲み物提供マシン」でサーボモータをボールに接着剤で固めてしまったため取れなくなってしまいました。。。
なんとアホな形で実現しなかったのでしょう。。。
終わりに
今回Webアプリを作成するということでアイデア出しにとても苦しみました。
最初はアイドルのスケジュールやTwitterをおすすめするといったWebアプリを作成しようと思いました。
しかし公式が運営しているサイトで十分ではないか？と思いモチベが上がらず断念。
モチベーションを維持できそうなものということで一旦Webアプリから離れ今いじりたい技術ということで前回楽しかったObnizを使ったWebアプリという案にたどり着きました。
ただObnizをあまりいじれなかった原因としてアイデア出しが遅れたのもそうですがネットに落ちているソースコードを即時に読むことができなかったのも原因でした。
ソースコードがあふれている世の中で読解力が大事だと改めて認識しました。