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

總網頁瀏覽量

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

2019/10/03

[2019鐵人賽] - 20.筆記IoT初練習- 小財神啊!你看見那個鐵人在惡搞iT邦熊俠嗎?Johnny Five 之 光敏電阻- 小遊戲(?)應用篇


上篇本來想做中二的小夜燈 ......
但我看到光敏電阻的輸出數值後,突然覺得好像可以做更有(ㄨˊ)趣(ㄩㄥˋ)的東西XDDD

登登楞登~登登~ (多拉A夢的音效)

Flappy iT Bear (☝ ՞ਊ ՞)☝


謎之音:這蝦.....餃朋友啦XD
本魯:我果然是很無聊的魯宅啊~科科~

不過做出來有莫名的成就感,現在就跟著我一起浪費才能吧~ヽ(・×・´)ゞ

故事是這樣開始的.......

昨天寫完光敏電阻後,心裡覺得有點空虛....
就這麼剛好撇到每天都會看到 iT 邦幫忙鐵人賽 首頁,有個野生的小熊(?)在那邊上上下下的動...


突然靈光一閃 (✪ω✪)
如果用光敏電阻的連續數值,應該可以做的像 Flappy Bird 一樣的遊戲吧XDD

於是....就是決定是你啦!(ΦωΦ) (小財神不要打我 X


身為一個開發者,要抓熊是很簡單的
把 Dev Tool 打開後一個 Move 小熊就被我 Download 下來了 (  ̄ 3 ̄)y▂ξ

抓完熊後,
身為一個開發者擁有好奇心是 hen 正常的
心之音:這個網頁做(ㄙㄨˋ)的(ㄘㄞˊ)不(ㄏㄣˇ)錯(ㄉㄨㄛ)耶~


嗯~這山 這草 這場景都不錯耶~我全都要了 ლ(╹◡╹ლ)

怎麼玩?想法是這樣的~

我的想法是熊俠會像 flappy bird 的動作機制。

flappy bird需要點擊才會飛一下,

熊俠則是光照一下才會飛一下,如果沒有光照就飛不起來~


想法是這樣的,解構網頁給你們看~


現在我們有草、小熊、背景,就可以做出小熊從草叢飛起來的假象XD
利用 CSS 的 Z 軸 順序,依序把場景物件給定位好~

快速的切好後,網頁長這樣子

---
>工商時間:
想更快速的切好版嗎?每天20分鐘內讓你學到大絕招!
趕快訂閱 Amos 老師的
金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
讓你切版比我快~
---


接下來要進入程式啦~(๑•̀ㅂ•́)و✧

後端部分

和昨天一樣,我們取光敏電阻的數值加上用 Socket.io 傳給前端接收;
唯一要改的是偵測的頻率可以改快一點,我就設0.25秒輸出一次數值好了~

小熊的動作就由前端來處理 d( ・∀・)b

```
  photoresistor = new five.Sensor({
    pin: 'A0',
    freq: 250,
  });
```


> 程式碼
```
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() {
  photoresistor = new five.Sensor({
    pin: 'A0',
    freq: 250, // 改成0.25秒輸出一次數值
  });

  sio.on('connection', function(socket) {
    photoresistor.on('data', function() {
      pVal = this.value; // 取得數值
   
      //透過socket傳給Clinet端(前端)
      socket.emit('startData', {
        pVal: pVal,
      });
    });
  });
});

```

前端部分


讓小熊飛起來的關鍵是 CSS 的 `position` 定位!
先來看完整的HTML架構

> HTML
```
<body>
  <div class="bg">
    <div class="top"></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>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="index.js"></script>
</body>
```


HTML部分比較簡單,
最外層的 < div class='bg' > 為被定位點,絕對定位在網頁的左上角 top:0 left:0 的地方,
再由 top、bear、footer 定位在 bg 上。

```
<!-- 先設定好絕對定位 position:relative; 讓小熊之後以相對定位來使用-->
<div class="bg">
  <div class="top"></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>
```

```
<!-- 定位點依附著 <div class="bg"> -->
  <div class="top"></div>
  <div class="bear"><img src="img/bear-fly.svg" alt="" /></div>
  <div class="footer"><img src="img/footerbg.png" alt="" /></div>
```

設置CSS樣式表


> CSS

```
.bg {
  position: relative;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
}
.top {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url('img/background.jpg');
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: center;
  background-size: cover;
}
.bear {
  position: absolute;
  width: 100px;
  height: auto;
  /* top: 0; */
  left: 50%;
  transition-duration: 0.5s;
}
.footer {
  position: absolute;
  width: 100vw;
  height: auto;
  top: 70%;
  left: 0%;
}
```
把 top、bear、footer 依照相對位置 position: absolute; 定位
小熊要上下動像超人一樣飛行,利用設定 CSS 的 `top` 屬性讓小熊上下動作~


謎之音:可是小熊看起來 頓ㄉㄟ 頓ㄉㄟ 的欸......
本魯:這就是關鍵啦~

CSS有一個很棒的屬性叫 `transition-duration` -「轉場動畫時間

> MDN:CSS transition-duration
https://developer.mozilla.org/zh-TW/docs/Web/CSS/transition-duration

我們變化小熊的 top 定位時設定 `transition-duration` 的時間來延遲轉場動畫
這樣動作看起來比較順暢~



解決完小熊的飛行動作後,做到這邊也差不多半成品啦~ (  ´Д`)y━・~
接下來是前端 JavaScript 的部分

> JavaScript

```
var socket = io.connect();

socket.on('startData', function(data) {
  // 當socket開始連線時,接收資料
  tempData = data.pVal;
  // 把接收到的值變成百分比
  topPosition = tempData / 10;
  // 有時候數值會超過100,可處理可不處理
  if (topPosition >= 100) {
    topPosition = 100;
  }
  // 調用jQuery的.css()函式來改變熊的垂直定位
  $('.bear').css('top', '' + topPosition + '%');
});


```

程式碼比 CSS 還要簡單 XD

昨天已知光敏電阻的數值大約在 1000 ~ 100 之間,
而我們熊的垂直定位單位使用比較彈性的百分比
才不會因為視窗大小、伸縮跑版不見,ㄌㄧ在JavaScript上也比較好寫~

讓數值落在 100 之內,只要把前端接收到的數值除上 10 就可以了。
```
  // 原始數值
  tempData = data.pVal;
  // 把接收到的值變成百分比
  topPosition = tempData / 10;
  // 有時候數值會超過100,可處理可不處理
  if (topPosition >= 100) {
    topPosition = 100;
  }
```
最後一步,
用 jQuery 的 .css() 函式改變熊的垂直定位數值就可以啦~

```
//第一個參數填CSS屬性名稱(propertyName),第二個參數填上數值(value)
.css(propertyName, value)
```

> jquery - .css()
https://api.jquery.com/css/#css-propertyName-value

這樣就完成啦! (*´∀`)~♥
超簡單又無用的小玩具XD



如果再加上一些障礙物物件讓熊俠像 flappy bird 的水管一樣,例如寫鐵人文的時間啦、寫鐵人賽時會出現的立志句子啦~那就更好玩了XD

甚至,我有個大膽的想法,可以製作各種 Sersor 的闖關遊戲!
因為看到邦友挖洗菜呱的鐵人文 「每日挖個坑,用坑填起耍廢聊天室! 」系列
讓多名User利用Socket連線一起玩,抽 Sensor 闖不同的關卡,是不是一種商機呢?
(才不會勒~(寫文寫到腦洞大開.....

好吧~
前端工程師的生活,往往就是這麼樸實無華,且枯燥~

今天就到這啦~明天又不知道要寫什麼了.....



0 留言:

張貼留言