## 第10回目 ## 前回行ったこと 簡単なサンプルプログラムのほうでコンソールログを使い、原因を探った 簡易的なプログラムにおいてstopを加えたが、toioが止まらずにずっと進んでいる。 <前回のプログラム> ``` // move the cube cube.move(100, 100, 0) // | | `--- duration [ms] // | `--------- right motor speed // `-------------- left motor speed console.log("move") cube.stop() console.log("stop") ``` ## 今回行うこと アドバイスなどを取り入れ、さらに自分たちで原因を探ってみる。 また、衝突判定も行う。 alloy-tools MacやLinuxの環境で動作するのに、Windowsで動作しないことが発覚し原因を探っていくことになったがまずそもそものOSの違いやJavascriptの実行順序についてちょっと調べてみた。 [ブラウザでのJavascriptの実行順序](https://kde.hateblo.jp/entry/2017/05/20/212928#:~:text=%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E3%81%AE%20JavaScript%20%E3%81%AE%E5%87%A6%E7%90%86%E3%81%AE%E6%B5%81%E3%82%8C%201%20%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8Chtml%E3%82%92%E8%AA%AD%E3%82%80%E3%81%A8%E6%9C%80%E5%88%9D%E3%81%AB%20Window%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%20...%202,%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%81%8C%E5%AE%8C%E4%BA%86%E3%81%97%E3%81%9F%E6%99%82%E7%82%B9%E3%81%A7document....%209%20%E6%9C%80%E5%BE%8C%E3%81%AB%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AF%20Window%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E5%AF%BE%E3%81%97%E3%81%A6load%E3%82%A4%20...%2010%20%E3%81%93%E3%81%93%E3%81%8B%E3%82%89%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%AE%9A%E7%BE%A9%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AA%E3%81%A9%E6%A7%98%E3%80%85%E3%81%AA%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E5%8F%97%E3%81%91%E3%81%A4%E3%81%91%E3%81%A6%E3%80%81%20) **OSの違いによる、プログラムに及ぼす可能性のある事** ![](https://i.imgur.com/DXsd8GU.png) 一応参考サイトを乗せておくが、たぶん関係ないのではと考えている。 Javascript文字コード https://www.sejuku.net/blog/64703 Javascript改行コード https://www.sejuku.net/blog/55631 <setTimeoutを用いたプログラム> ``` const { NearestScanner } = require('@toio/scanner') //async function main() { export let toiojs = {}; //let cube = {}; let cube = { connected: "(defined)", turnOnLight: _ => undefined, turnOffLight: _ => undefined, playPresetSound: _ => undefined, stopSound: _ => undefined, move: _ => undefined, stop: _ => undefined }; export async function main() { // start a scanner to find the nearest cube const cube = await new NearestScanner().start() // connect to the cube await cube.connect() // move the cube cube.move(100, 100, 0) // | | `--- duration [ms] // | `--------- right motor speed // `-------------- left motor speed console.log("move") setTimeout(()=>toiojs.stopMoving(), 1000) console.log("finish") } toiojs.stopMoving = function () { cube.stop(); console.log("stop") } //main() ``` <結果> 動き続ける ![](https://i.imgur.com/BGQhUpK.png) → stopが機能していないのではないかという結論 https://toio.github.io/toio.js/classes/_toio_cube.cube.html#stop 壁の衝突 https://note.com/npaka/n/n448aabbeee07 https://zenn.dev/chibi929/articles/161f08b885cb6d 詳しいコード内容(Collision) https://github.com/toio/toio.js/blob/2c12188/packages/cube/src/cube.ts#L236 <壁の衝突判定プログラム> ``` const { NearestScanner } = require('@toio/scanner') //async function main() { export let toiojs = {}; //let cube = {}; let cube = { connected: "(defined)", turnOnLight: _ => undefined, turnOffLight: _ => undefined, playPresetSound: _ => undefined, stopSound: _ => undefined, move: _ => undefined, stop: _ => undefined }; export async function main() { // start a scanner to find the nearest cube const cube = await new NearestScanner().start() // connect to the cube await cube.connect() // move the cube cube.move(10, 10, 0) // | | `--- duration [ms] // | `--------- right motor speed // `-------------- left motor speed console.log("move") setTimeout(toiojs.stopMoving, 1000) // 追加プログラム(衝突) cube.on('sensor:collision', (evt) => { if (evt.isCollisionDetected) { console.log('衝突判定'); //cube.playPresetSound(4); } }); console.log("finish") } toiojs.stopMoving = function () { cube.stop(); console.log("stop") } //main() ``` <結果> スピードが遅いと判定しないが、スピードが普通の場合は実行できた。 ``` cube.move(10, 10, 0) // 遅い cube.move(50, 50, 0) // 普通 ``` <衝突時停止するプログラム> ``` const { NearestScanner } = require('@toio/scanner') //async function main() { export let toiojs = {}; //let cube = {}; let cube = { connected: "(defined)", turnOnLight: _ => undefined, turnOffLight: _ => undefined, playPresetSound: _ => undefined, stopSound: _ => undefined, move: _ => undefined, stop: _ => undefined }; export async function main() { // start a scanner to find the nearest cube const cube = await new NearestScanner().start() // connect to the cube await cube.connect() // move the cube cube.move(50, 50, 0) // | | `--- duration [ms] // | `--------- right motor speed // `-------------- left motor speed console.log("move") //setTimeout(toiojs.stopMoving, 1000) cube.on('sensor:collision', (evt) => { if (evt.isCollisionDetected) { console.log('衝突判定'); cube.stop(); // 衝突時止まる //cube.playPresetSound(4); } }); console.log("finish") } ``` <結果> 衝突時、停止した。 ## 追加 npmとwebpack4でビルド https://qiita.com/civic/items/82c0184bcadc50965f91 他サイト https://qiita.com/yukibe/items/453d874eb7ce929363d6 毎回ビルドしないと最新のプログラムが反映されない問題がこのサイトを理解することでブラウザを再読み込みすることで解決することが出来そう。これも同時並行で進めていきたい。 ## 来週の目標 これからは役割分担をしていくようにしたい。 座標の取得をして、簡単なゲームみたいなものを作りたい。