[2019鐵人賽] - 29.筆記IoT初練習- 用 Joystick 讓熊俠飛向鐵人賽終點！ - Johnny Five 之 Joystick 搖桿 - 遊戲(?)應用篇

[2019鐵人賽] - 29.筆記IoT初練習- 用 Joystick 讓熊俠飛向鐵人賽終點！ - Johnny Five 之 Joystick 搖桿 - 遊戲(?)應用篇

  10/14/2019    King Tzeng

---

本魯宅：第29篇了～時間真的過的好快啊～
謎之音：(ΦωΦ) 

今天要寫的是～下音樂～
登登楞登～登登～ (多拉A夢的音效)

「邁向終點吧！鐵人熊俠！」ᕙ(˵ ಠ ਊ ಠ ˵)ᕗ 

謎之音：不就是之前的光敏電阻篇改一下嗎....
本魯宅：不！我加了動畫～（被打）

故事是這樣開始的…

本系列結束前，一直讓我念念不忘的留言～
記得有位邦友是這樣說的～

我們的邦友總是那麼熱情的來留言！XD
本魯心之音：但看到這則留言我好害怕RRR.......這....這本魯寫不出來吧.....

好在這位邦友說他明年要寫～我們謝謝他～
真．勇者工程師要創造新的遊戲平台了！！（欸欸！不對吧 X

好吧！那我來為你指引道路吧～（欸！就和你說不對吧（被打～

怎麼做？想法是這樣的～

昨天使用 Joystick 物件 X 軸和 Y 軸變化時會返回 大約 -1～1 的數值 ，
我們就用這個數值來讓熊俠飛起來！

怎麼利用呢？
這次我們用 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',
    );
  });

```  

開啟網頁 → 利用 `.width()` 和 `.height()` 取得頁面總寬、總高 → 總寬和總高後除上`2`，取得頁面中心點 → 當 Socket 開始與後端連線後 → 取得 Joystick 移動量 → 一連串的轉換與計算後 → 使用jQ.css()函式改變熊俠的位置 → 完成ヽ(・×・´)ゞ

寫到這邊～
鐵人賽也告一段落了，很謝謝一直關注我的邦友、朋友們，
沒有你們的支持與文章留言，回饋給我一些想法或者鼓勵，
也許我不會那麼有動力與好玩的想法出來～

感謝在感謝！那麼明日結語見了！（淚 QQ