Downloaded 25 times
![（補足）ソースコードの解説 – tetris.js
:
:
var colors = [
‘cyan’, ‘orange’, ‘blue’, ‘yellow’, ‘red’, ‘green’, ‘purple’
];
:
:
７つのテトリミノの色を決めている配列変数（この中身を変えるとゲームの色も変わる）
例：
‘#ff6a00’, ‘#ff7f7f’, ‘#ffd800’, ‘#00ffff’, ‘#00ff21’, ‘#ff006e’, ‘#e8ffeb’](https://image.slidesharecdn.com/bmxug2017-170203082026/85/Bluemix-25-320.jpg)
![（補足）ソースコードの解説 – controller.js
/*
キーボードを入力した時に一番最初に呼び出される処理
document.body.onkeydown = function( e ) {
// キーに名前をセットする
var keys = {
37: 'left',
39: 'right',
40: 'down',
38: 'rotate'
};
if ( typeof keys[ e.keyCode ] != 'undefined' ) {
// セットされたキーの場合はtetris.jsに記述された処理を呼び出す
keyPress( keys[ e.keyCode ] );
// 描画処理を行う
render();
}
};
*/
var socket;
var th = 5; //. しきい値
var wsUrl = 'ws://' + location.hostname + '/ws/sensor';
function connect(){
socket = new WebSocket(wsUrl);
socket.onmessage = function(e) {
var sensorData = JSON.parse(e.data);
//console.log( sensorData );
if( sensorData.d.ori.tiltLR >= 50 ){
//. 右
keyPress( 'right' );
render();
}else if( sensorData.d.ori.tiltLR <= -50 ){
//. 左
keyPress( 'left' );
render();
:
元々のコードのキー入力判定部分をコメントアウト 自身の /ws/sensor の WebSocket を監視し、何か送られてきた
時はその中身から傾きの値を見てキー判定する](https://image.slidesharecdn.com/bmxug2017-170203082026/85/Bluemix-26-320.jpg)
![（補足）ソースコードの解説 – publish.html
:
:
function publishMessage(){
if( deviceid != null ){
var d = {};
if( lat != null ){
d[‘lat’] = lat;
$(‘#lat’).html( lat );
}
:
:
MQTT パブリッシャー機能を JavaScript で実装。
deviceMotion（スマホが移動）イベントや、deviceOrientation（傾いた）イベントに
反応して、状態を IBM IoT Platform に送信しつつ、画面にも表示する。](https://image.slidesharecdn.com/bmxug2017-170203082026/85/Bluemix-27-320.jpg)
More Related Content
Similar to ハンズオン：Bluemix とスマホでゲームを作ろう！
ハンズオン：Bluemix とスマホでゲームを作ろう！
- 1. BMXUG 女子部ハンズオン 女性限定！”クラウド xIoT 勉強会” Bluemix とスマホでゲームを作ろう！ 2017.Feb
- 2. 自己紹介 Twitter: @dotnsf facebook: https://www.facebook.com/juge.me Blog:http://dotnsf.blog.jp/ 趣味： マンホール 木村 桂（きむら けい） Bluemix エバンジェリスト プログラマー
- 3.
- 4. 用意するもの／前提環境 • IBM Bluemixアカウント • ウェブブラウザの優先言語は日本語 • Bluemix データセンターは us-south （ドメインは mybluemix.net）を使う • eu-gb データセンターの場合、ドメインは eu-gb.mybluemix.net となる • au-syd データセンターの場合、ドメインは au-syd.mybluemix.net となる • 組織は自分の ID と同じ組織、スペースは dev を使うものとする • 自分のスマホ(iPhone/Android) • ジャイロセンサー付きのもの
- 5. 大まかな流れ 1. ハンズオン用ソースコードの入手 2. IBMBluemix アプリケーションプロジェクト作成 3. ソースコード管理機能を追加 4. ソースコードにハンズオン用コードを追加 5. 追加したコードをアプリケーションに反映 6. スマホの情報を WebSocket に送信する Node-RED アプリを作成 7. スマホでゲームをコントロールするアプリ完成 この後のページの左上に表示
- 6. ハンズオン用ソースコードをダウンロード ①https://github.com/dotnsf/mqtttetris にアクセス ② “DownloadZIP” でソースコードをダウンロード＆展開 1. ハンズオン用ソースコードの入手
- 7. ハンズオン用ソースコードを入手 ①mqtttetris-master.zip を展開 ② mqtttetris-masterフォルダ内のソースコードを確認 1. ハンズオン用ソースコードの入手
- 8. Bluemix にログイン ①http://bluemix.net/ にアクセス 2.IBM Bluemix アプリケーションプロジェクト作成 ②IBM ID とパスワードを順に入力 ③ログインできることを確認
- 9. データセンター地域、組織、スペースを確認 ①画面右上の自分の IBM ID部分をクリック ②データセンター地域、組織、スペースの内容を確認（異なっていたら変更）。 今回は組織は米国南部、組織は自分の ID、スペースは dev を想定。 2. IBM Bluemix アプリケーションプロジェクト作成
- 10.
- 11. 「Node-RED スターター」アプリの作成 ①ダッシュボード画面右上の「アプリの作成」をクリック ③固有のアプリ名を入力して、「作成」をクリック ②ボイラープレート一覧の中から“Node-RED Starter” を選択 2. IBM Bluemix アプリケーションプロジェクト作成
- 12.
- 13. IBM DevOps サービスにGit リポジトリ追加 ①「Git の追加」をクリック （注 「有効化」ではない） ②「接続」をクリック ③「閉じる」をクリック 3. ソースコード管理機能を追加
- 14. IBM DevOps サービスのWeb IDE に移動 ①元の画面の「コードの編集」をクリック ②セットアップを待つ ③Web IDE に移動 3. ソースコード管理機能を追加
- 15. ソースコードにゲーム用機能を追加 ①public フォルダを右クリックし、インポート –ファイルまたは zip アーカイブ を選択 ②mqtttetris からダウンロード＆展開したファイルを全て指定 ③mqtttetris のファイルがインポートされたことを確認 4. ソースコードにハンズオン用コードを追加
- 16. （おまけ）ソースコードを変更 ①public フォルダ内の tetris.htmlを選択 ②<title>タグ内の文字列を変更 <!DOCTYPE html> <html> <head> <title>スマホでテトリス</title> <link rel='stylesheet' href='style.css' /> </head> <body onload="connect()"> <audio id="clearsound" src="pop.ogg" preload="auto"></audio> <canvas width='300' height='600'></canvas> <script src='tetris.js'></script> <script src='controller.js'></script> <script src='render.js'></script> </body> </html> 4. ソースコードにハンズオン用コードを追加
- 17.
- 18. デプロイ成功を確認 ①画面右上の “BUILD &DEPLOY” を選択 ③両方成功することを確認 ②Build Stage と Deploy Stage の様子を確認しながら待つ 5. 追加したコードをアプリケーションに反映
- 19. （一旦）動作確認 ①スマホからアプリの URL （アプリ名.mybluemix.net）/publish.htmlにアクセス ③PC からアプリの URL （http://アプリ名.mybluemix.net）/tetris.html にアクセス ②画面上部中央に表示されている文字列（deviceId）を確認 ※まだ操作はできません 5. 追加したコードをアプリケーションに反映
- 20. Node-RED アプリ作成(1) ①アプリの URL（アプリ名.mybluemix.net）/redにアクセス ②キャンバスに IBM IoT のインプットノードを配置 6. スマホの情報を WebSocket に送信する Node-RED アプリを作成
- 21. Node-RED アプリ作成(2) ④debug アウトプットノードをキャンバスに追加し、 ダブルクリック先のOutput を msg.payload.d.ori に変更して、 IBM IoT ノードと線をつなぐ ③IBM IoT インプットノードをダブルクリックして、 deviceId 欄にスマホ画面で確認した deviceId を入力して Done 6. スマホの情報を WebSocket に送信する Node-RED アプリを作成
- 22. Node-RED アプリ作成(3) ⑥Debug タブに情報が流れてくることを確認⑤Deployをクリックして、一旦実行 （スマホを動かしてみる） 6. スマホの情報を WebSocket に送信する Node-RED アプリを作成
- 23. Node-RED アプリ作成(4) ⑧WebSocket ノードの出力先（鉛筆アイコンから）を /ws/sensorに変更 ⑦WebSocket アウトプットノードを追加し、IBM IoT ノードとつなぐ 6. スマホの情報を WebSocket に送信する Node-RED アプリを作成
- 24. Node-RED アプリ作成(5) ⑩テトリス画面をリロードし、スマホの動きに合わせて テトリミノが動くことを確認 ⑨再度 Deploy 7.スマホでゲームをコントロールするアプリ完成 完成！
- 25. （補足）ソースコードの解説 – tetris.js : : varcolors = [ ‘cyan’, ‘orange’, ‘blue’, ‘yellow’, ‘red’, ‘green’, ‘purple’ ]; : : ７つのテトリミノの色を決めている配列変数（この中身を変えるとゲームの色も変わる） 例： ‘#ff6a00’, ‘#ff7f7f’, ‘#ffd800’, ‘#00ffff’, ‘#00ff21’, ‘#ff006e’, ‘#e8ffeb’
- 26. （補足）ソースコードの解説 – controller.js /* キーボードを入力した時に一番最初に呼び出される処理 document.body.onkeydown= function( e ) { // キーに名前をセットする var keys = { 37: 'left', 39: 'right', 40: 'down', 38: 'rotate' }; if ( typeof keys[ e.keyCode ] != 'undefined' ) { // セットされたキーの場合はtetris.jsに記述された処理を呼び出す keyPress( keys[ e.keyCode ] ); // 描画処理を行う render(); } }; */ var socket; var th = 5; //. しきい値 var wsUrl = 'ws://' + location.hostname + '/ws/sensor'; function connect(){ socket = new WebSocket(wsUrl); socket.onmessage = function(e) { var sensorData = JSON.parse(e.data); //console.log( sensorData ); if( sensorData.d.ori.tiltLR >= 50 ){ //. 右 keyPress( 'right' ); render(); }else if( sensorData.d.ori.tiltLR <= -50 ){ //. 左 keyPress( 'left' ); render(); : 元々のコードのキー入力判定部分をコメントアウト 自身の /ws/sensor の WebSocket を監視し、何か送られてきた 時はその中身から傾きの値を見てキー判定する
- 27. （補足）ソースコードの解説 – publish.html : : functionpublishMessage(){ if( deviceid != null ){ var d = {}; if( lat != null ){ d[‘lat’] = lat; $(‘#lat’).html( lat ); } : : MQTT パブリッシャー機能を JavaScript で実装。 deviceMotion（スマホが移動）イベントや、deviceOrientation（傾いた）イベントに 反応して、状態を IBM IoT Platform に送信しつつ、画面にも表示する。