[2019鐵人賽] - 20.筆記IoT初練習- 小財神啊！你看見那個鐵人在惡搞iT邦熊俠嗎？Johnny Five 之 光敏電阻- 小遊戲(?)應用篇
上篇本來想做中二的小夜燈 ......
但我看到光敏電阻的輸出數值後，突然覺得好像可以做更有(ㄨˊ)趣(ㄩㄥˋ)的東西XDDD
登登楞登～登登～ (多拉A夢的音效)
Flappy iT Bear (☝ ՞ਊ ՞）☝
謎之音：這蝦.....餃朋友啦XD
本魯：我果然是很無聊的魯宅啊～科科～
不過做出來有莫名的成就感，現在就跟著我一起浪費才能吧～ヽ(・×・´)ゞ
故事是這樣開始的.......
昨天寫完光敏電阻後，心裡覺得有點空虛....
突然靈光一閃 (✪ω✪)
如果用光敏電阻的連續數值，應該可以做的像 Flappy Bird 一樣的遊戲吧XDD
於是....就是決定是你啦！(ΦωΦ) （小財神不要打我 X
把 Dev Tool 打開後一個 Move 小熊就被我
抓完熊後，
心之音：這個網頁做(ㄙㄨˋ)的(ㄘㄞˊ)不(ㄏㄣˇ)錯(ㄉㄨㄛ)耶～
嗯～這山 這草 這場景都不錯耶～
怎麼玩？想法是這樣的～
我的想法是熊俠會像 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 + '%');
});
昨天已知光敏電阻的數值大約在 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 留言:
張貼留言