[2019鐵人賽] - 29.筆記IoT初練習- 用 Joystick 讓熊俠飛向鐵人賽終點！ - Johnny Five 之 Joystick 搖桿 - 遊戲(?)應用篇
本魯宅：第29篇了～時間真的過的好快啊～
謎之音：(ΦωΦ)
今天要寫的是～下音樂～
登登楞登～登登～ (多拉A夢的音效)
「邁向終點吧！鐵人熊俠！」ᕙ(˵ ಠ ਊ ಠ ˵)ᕗ
謎之音：不就是之前的光敏電阻篇改一下嗎....
本魯宅：不！我加了動畫～（被打）
記得有位邦友是這樣說的～
我們的邦友總是那麼熱情的來留言！XD
本魯心之音：但看到這則留言我好害怕RRR.......這....這本魯寫不出來吧.....
好在這位邦友說他明年要寫～我們謝謝他～
真．勇者工程師要創造新的遊戲平台了！！（欸欸！不對吧 X
好吧！那我來為你指引道路吧～（欸！就和你說不對吧（被打～
我們就用這個數值來讓熊俠飛起來！
怎麼利用呢？
這次我們用 CSS3 的 transform:translate(x,y); 屬性來改變小熊在頁面上的位置！
先從網頁解構來看～
初始化 - 中心點
這次要讓熊俠飛來飛去，假設遊戲一開始設定在網頁中心點出發
首要我們要取得網頁的中心點位置！
User 的瀏覽器視窗大小不會一樣大，那中心點的數值也會因人而異！
所以這次要用 JavaScript 來取得視窗的寬高數值，
取得總視窗高度後在除上 2 就是中心點位置，XY 軸都使用相同步驟。
熊俠的位置 - 移動變量
移動熊俠需要可變的數值，我們從 Arduino 那邊取得 Joystick 的數值後加以處理，
由昨天可知 Joystick 數值可能為負值，可能為正值 又落在 -1 ～ +1 之間，
故
熊俠的移動量變數 ＝ Joystick 回傳的數值 * 視窗中心點位置
這邊是把 Joystick 移動了多少轉成在視窗上的移動多少的位置
接下來
當前熊俠的位置 ＝ 視窗中心點 + 熊俠的移動量變數
最後只要把剛剛熊俠移動了多少加上視窗中心點的位置，就會變成現在熊俠飛到的位置了！
本魯宅：484很簡單啊～
謎之音：屁啦！！！
恩....只是要腦筋要轉一下而已啦....我也是在紙上畫出來想了一下才想好的....
(燒腦........
由於我們上次就切好版了！這次直接進入程式吧～(๑•̀ㅂ•́)و✧
後端部分
我們取 Joystick 的數值，這次有X軸與Y軸的兩個數值，用 Socket.io 傳給前端接收；
```
socket.emit('startData', {
jXAxis: jXAxis,
jYAxis: jYAxis,
});
});
```
完整程式碼：
```
var io = require('socket.io');
var express = require('express');
var five = require('johnny-five');
var board = new five.Board();
var app = express();
app.use(express.static('www'));
var server = app.listen(3000, function() {
console.log('connected!');
});
var sio = io(server);
board.on('ready', function() {
var joystick = new five.Joystick({
// [ x, y ]
pins: ['A0', 'A1'],
});
sio.on('connection', function(socket) {
joystick.on('change', function() {
console.log(' x : ', this.x);
console.log(' y : ', this.y);
jXAxis = this.x;
jYAxis = this.y;
socket.emit('startData', {
jXAxis: jXAxis,
jYAxis: jYAxis,
});
});
});
});
```
前端部分
這次有加上看起來像遊戲的元素，
像是鐵人鍊成啦～歷年來我的鐵人鍊成獎牌啊～（不是炫耀X
HTML
```
<div class="bg">
<div class="top"></div>
<div class="someimg">
<img class="flag" src="img/flag.png" alt="" />
<img class="iron iron1" src="img/iron1.png" alt="" />
<img class="iron iron2" src="img/iron2.png" alt="" />
</div>
<div class="bear"><img src="img/bear-fly.svg" alt="" /></div>
<div class="footer"><img src="img/footerbg.png" alt="" /></div>
<div class="bell">
<p>訂閱下去 - IoT沒那麼難！新手用JavaScript入門做自己的玩具～</p>
</div>
</div>
```
CSS Style
這次我們使用 CSS 的 transform:translate 屬性，來改變熊俠的位置！
```css
// 定義平移 2D 元素
transform:translate(x,y);
```
改變的數值就和上面寫的一樣，
joystick移動量轉為元素平移量算出後，利用jQuery 的 .css() 函式改變小熊位置即可！
> translate 的 x 為 Joystick 的 X 軸移動量，
> translate 的 y 為 Joystick 的 Y 軸移動量；
這次還有在一些 HTML 元素加上 CSS 動畫，看起來比較像遊戲～
CSS 動畫取用自
> Animate.css
https://daneden.github.io/animate.css/
JavaScript
```
var socket = io.connect();
var xCenter = $('.bg').width() / 2; // 取得水平中心點
var yCenter = $('.bg').height() / 2; // 取得垂直中心點
socket.on('startData', function(data) {
// 當socket開始連線時，接收資料
// console.log(data);
XAxis = data.jXAxis;
YAxis = data.jYAxis;
XVal = XAxis.toFixed(2); // 取到小數點後兩位數
YVal = YAxis.toFixed(2); // 取到小數點後兩位數
varXVal = XVal * xCenter; // 取 joystick X軸移動量，轉成視窗元素 X軸 移動量
bearXPos = xCenter + varXVal; // 熊俠 X軸 的位置
varYVal = YVal * yCenter; // 取 joystick Y軸移動量，轉成視窗元素 Y軸 移動量
bearYPos = yCenter + varYVal; // 熊俠 Y軸 的位置
// 使用 jQ .css()函式改變熊俠位置
$('.bear').css(
'transform',
'translate(' + bearXPos + 'px, ' + bearYPos + 'px',
);
});
寫到這邊～
鐵人賽也告一段落了，很謝謝一直關注我的邦友、朋友們，
沒有你們的支持與文章留言，回饋給我一些想法或者鼓勵，
也許我不會那麼有動力與好玩的想法出來～
感謝在感謝！那麼明日結語見了！（淚 QQ
謎之音：(ΦωΦ)
今天要寫的是～下音樂～
登登楞登～登登～ (多拉A夢的音效)
「邁向終點吧！鐵人熊俠！」ᕙ(˵ ಠ ਊ ಠ ˵)ᕗ
謎之音：不就是之前的光敏電阻篇改一下嗎....
本魯宅：不！我加了動畫～（被打）
故事是這樣開始的…
本系列結束前，一直讓我念念不忘的留言～記得有位邦友是這樣說的～
我們的邦友總是那麼熱情的來留言！XD
本魯心之音：但看到這則留言我好害怕RRR.......這....這本魯寫不出來吧.....
好在這位邦友說他明年要寫～我們謝謝他～
真．勇者工程師要創造新的遊戲平台了！！（欸欸！不對吧 X
好吧！那我來為你指引道路吧～（欸！就和你說不對吧（被打～
怎麼做？想法是這樣的～
昨天使用 Joystick 物件 X 軸和 Y 軸變化時會返回 大約 -1～1 的數值 ，我們就用這個數值來讓熊俠飛起來！
怎麼利用呢？
這次我們用 CSS3 的 transform:translate(x,y); 屬性來改變小熊在頁面上的位置！
先從網頁解構來看～
初始化 - 中心點
這次要讓熊俠飛來飛去，假設遊戲一開始設定在網頁中心點出發
首要我們要取得網頁的中心點位置！
所以這次要用 JavaScript 來取得視窗的寬高數值，
取得總視窗高度後在除上 2 就是中心點位置，XY 軸都使用相同步驟。
熊俠的位置 - 移動變量
移動熊俠需要可變的數值，我們從 Arduino 那邊取得 Joystick 的數值後加以處理，
由昨天可知 Joystick 數值可能為負值，可能為正值 又落在 -1 ～ +1 之間，
故
熊俠的移動量變數 ＝ Joystick 回傳的數值 * 視窗中心點位置
這邊是把 Joystick 移動了多少轉成在視窗上的移動多少的位置
接下來
當前熊俠的位置 ＝ 視窗中心點 + 熊俠的移動量變數
最後只要把剛剛熊俠移動了多少加上視窗中心點的位置，就會變成現在熊俠飛到的位置了！
本魯宅：484很簡單啊～
謎之音：屁啦！！！
恩....只是要腦筋要轉一下而已啦....我也是在紙上畫出來想了一下才想好的....
由於我們上次就切好版了！這次直接進入程式吧～(๑•̀ㅂ•́)و✧
後端部分
我們取 Joystick 的數值，這次有X軸與Y軸的兩個數值，用 Socket.io 傳給前端接收；
```
socket.emit('startData', {
jXAxis: jXAxis,
jYAxis: jYAxis,
});
});
```
完整程式碼：
```
var io = require('socket.io');
var express = require('express');
var five = require('johnny-five');
var board = new five.Board();
var app = express();
app.use(express.static('www'));
var server = app.listen(3000, function() {
console.log('connected!');
});
var sio = io(server);
board.on('ready', function() {
var joystick = new five.Joystick({
// [ x, y ]
pins: ['A0', 'A1'],
});
sio.on('connection', function(socket) {
joystick.on('change', function() {
console.log(' x : ', this.x);
console.log(' y : ', this.y);
jXAxis = this.x;
jYAxis = this.y;
socket.emit('startData', {
jXAxis: jXAxis,
jYAxis: jYAxis,
});
});
});
});
```
前端部分
這次有加上
像是鐵人鍊成啦～歷年來我的鐵人鍊成獎牌啊～（不是炫耀X
HTML
```
<div class="bg">
<div class="top"></div>
<div class="someimg">
<img class="flag" src="img/flag.png" alt="" />
<img class="iron iron1" src="img/iron1.png" alt="" />
<img class="iron iron2" src="img/iron2.png" alt="" />
</div>
<div class="bear"><img src="img/bear-fly.svg" alt="" /></div>
<div class="footer"><img src="img/footerbg.png" alt="" /></div>
<div class="bell">
<p>訂閱下去 - IoT沒那麼難！新手用JavaScript入門做自己的玩具～</p>
</div>
</div>
```
CSS Style
這次我們使用 CSS 的 transform:translate 屬性，來改變熊俠的位置！
```css
// 定義平移 2D 元素
transform:translate(x,y);
```
改變的數值就和上面寫的一樣，
joystick移動量轉為元素平移量算出後，利用jQuery 的 .css() 函式改變小熊位置即可！
> translate 的 x 為 Joystick 的 X 軸移動量，
> translate 的 y 為 Joystick 的 Y 軸移動量；
這次還有在一些 HTML 元素加上 CSS 動畫，
CSS 動畫取用自
> Animate.css
https://daneden.github.io/animate.css/
JavaScript
```
var socket = io.connect();
var xCenter = $('.bg').width() / 2; // 取得水平中心點
var yCenter = $('.bg').height() / 2; // 取得垂直中心點
socket.on('startData', function(data) {
// 當socket開始連線時，接收資料
// console.log(data);
XAxis = data.jXAxis;
YAxis = data.jYAxis;
XVal = XAxis.toFixed(2); // 取到小數點後兩位數
YVal = YAxis.toFixed(2); // 取到小數點後兩位數
varXVal = XVal * xCenter; // 取 joystick X軸移動量，轉成視窗元素 X軸 移動量
bearXPos = xCenter + varXVal; // 熊俠 X軸 的位置
varYVal = YVal * yCenter; // 取 joystick Y軸移動量，轉成視窗元素 Y軸 移動量
bearYPos = yCenter + varYVal; // 熊俠 Y軸 的位置
// 使用 jQ .css()函式改變熊俠位置
$('.bear').css(
'transform',
'translate(' + bearXPos + 'px, ' + bearYPos + 'px',
);
});
```
開啟網頁 → 利用 `.width()` 和 `.height()` 取得頁面總寬、總高 → 總寬和總高後除上`2`，取得頁面中心點 → 當 Socket 開始與後端連線後 → 取得 Joystick 移動量 → 一連串的轉換與計算後 → 使用jQ.css()函式改變熊俠的位置 → 完成ヽ(・×・´)ゞ
鐵人賽也告一段落了，很謝謝一直關注我的邦友、朋友們，
沒有你們的支持與文章留言，回饋給我一些想法或者鼓勵，
也許我不會那麼有動力與好玩的想法出來～
感謝在感謝！那麼明日結語見了！（淚 QQ
