クリエイター手抜きプロジェクト[551]IoT obniz編 スイッチを利用する/古籏一浩

投稿:  著者:  読了時間:8分(本文:約3,800文字)



今回は、obnizのスイッチを利用してみます。また、スイッチを利用して簡単なゲームも作ります。

obnizには左上にスイッチがあります。このスイッチは単純に押すだけでなく、左右にも動かすことができます。ダイヤルではないので、無限に回すことはできません。このスイッチは、以下の4つの状態のいずれかになります。

none  操作されていない
left  左に回した(左側に倒した)
right  右に回した(右側に倒した)
push  押した

このスイッチに関するドキュメントは以下のページにあります。

https://obniz.io/doc/sdk/doc/switch

obnizではスイッチの状態が変化した時に呼び出す、イベントハンドラを定義することができます。





スイッチが操作されると、changeイベントが発生します。このイベントを捕捉して処理するには、obnizオブジェクトのswitchオブジェクトのonchangeプロパティに、イベントハンドラを設定します。要するに以下のように定義します。

obniz.switch.onchange=イベントハンドラ

このイベントハンドラには、スイッチの状態がパラメーターとして渡されます。このパラメーターの値に応じて、各種処理を行うことになります。

ボタンが押されたら、その状態を表示するプログラムは以下のようになります。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@1.4.4/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>
var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
obniz.display.clear();
obniz.switch.onchange=function(state){
obniz.display.clear();
obniz.display.print(state);
}
}
</script>
</body>
</html>

スイッチを操作すると、obnizの画面にnoneやpushなどの文字が表示されます。スイッチの状態を調べて処理する場合は、イベントハンドラに渡された文字を調べます。

以下のプログラムは、スイッチを回して数をカウントするものです。スイッチを押すと、カウンタは0にリセットされます。スイッチを左に回すと、値は1減ります。右に回すと1増えます。野鳥を数える時に役立つかもしれません(?)

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@1.4.4/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>
var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
var count=0;
obniz.display.clear();
obniz.display.print(0);
obniz.switch.onchange=function(state){
obniz.display.clear();
if(state=="push"){ count=0; }
if(state=="left"){ count--; }
if(state=="right"){ count++; }
obniz.display.print(count);
}
}
</script>
</body>
</html>

次に、obnizのスイッチを使ったゲームです。スイッチを押してから10秒のところで、スイッチを押して止めるゲームです。このプログラムでは何秒経過しても自動的に止まらないので、20秒経過したらゲームオーバーになるように改良してみるとよいかもしれません。

また、ゲームのヒントになるように、5秒経過したら何か表示するなど工夫してみてもよいでしょう。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@1.4.4/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>
var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
var gameFlag=false;
var startTime,endTime;
obniz.display.clear();
obniz.display.font(null,11);
obniz.display.print("スイッチオンで開始");
obniz.switch.onchange=function(state){
if(state!="push"){ return; }
if(gameFlag==false){
gameFlag=true;
startTime=new Date();
obniz.display.clear();
obniz.display.print("タイマースタート");
}else{
gameFlag=false;
endTime=new Date();
var time=(endTime-startTime)/1000;
obniz.display.clear();
obniz.display.print("ゲームオーバー");
obniz.display.print("時間:"+time);
obniz.display.print("スイッチオンでリトライ");
}
}
}
</script>
</body>
</html>


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

長野県でも今年の夏は暑い……。日陰にある温度計でさえ36度。雨が降れば、まだ涼しくなるはずだけど、雨も降らない……。ただ、暑いだけという、なんか宇宙戦艦ヤマトIIIみたいな展開。

・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram

・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936
[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/

・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591
https://www.amazon.co.jp/dp/4844397605

・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP
http://digiconcart.com/dccartstore/cart/info/2561/218591

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/

・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/

・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/

・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/

・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/