把遇到錯誤的、學習到的前端筆記在這邊

總網頁瀏覽量

Copyright © Tzeng Ying-chi. 技術提供:Blogger.

2019/10/14

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


本魯宅:第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

1 則留言: