## 第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の違いによる、プログラムに及ぼす可能性のある事**

一応参考サイトを乗せておくが、たぶん関係ないのではと考えている。
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()
```
<結果>
動き続ける

→ 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
毎回ビルドしないと最新のプログラムが反映されない問題がこのサイトを理解することでブラウザを再読み込みすることで解決することが出来そう。これも同時並行で進めていきたい。
## 来週の目標
これからは役割分担をしていくようにしたい。
座標の取得をして、簡単なゲームみたいなものを作りたい。