0份殿、簡介
本人在大學(xué)本科最后的一個課程設(shè)計耸黑，做的比較有趣味玷室，同時最近的物聯(lián)網(wǎng)逐漸大熱零蓉，所以分享一下自己的作品設(shè)計過程。作品是在機智云最為簡單的STM32核心板例程上開展的穷缤，使用到的通信協(xié)議是機智云寫好的機智云連接固件敌蜂，網(wǎng)頁編程也是機智云的WebSocket Demo。本人做的是在原有的核心系統(tǒng)上添加別踩白塊的物聯(lián)網(wǎng)游戲功能津肛。實現(xiàn)效果如下：
優(yōu)酷視頻地址：http://player.youku.com/embed/XMzcyMzU0NjE0OA==
得到的效果就是在網(wǎng)頁上JavaScript 別踩白塊游戲顯示數(shù)據(jù)通過WebSocket發(fā)送到機智云控制平臺章喉，然后機智云下發(fā)到STM32，實現(xiàn)網(wǎng)頁游戲顯示與STM32顯示同步（實際會有一點網(wǎng)絡(luò)延遲）身坐。
1秸脱、實現(xiàn)設(shè)備
1）SmarKit - ESP STM32核心板
2）機智云平臺，注冊一個開發(fā)者賬號
3）0.96寸的OLED顯示屏（四針部蛇，IIC通信）
4）機智云websocket Demo 加上簡單的別踩白塊游戲JS
5）燒錄好機智云固件的ESP8266 （固件下載地址：https://download.gizwits.com/zh-cn/p/92/94）
2摊唇、實現(xiàn)步驟 2.1編寫STM32硬件程序
在機智云的協(xié)議頭文件修改自己的設(shè)備信息（在機智云創(chuàng)建設(shè)備后獲取到）：
添加別踩白塊數(shù)據(jù)的宏定義，在這我是使用兩個uint8_t類型數(shù)據(jù)來傳輸涯鲁，因為顯示的白塊位置共16個巷查，原本打算用uint16_t傳輸?shù)挠行颍切枰薷恼椎臋C智云上傳包格式，所以我就直接拆分兩段數(shù)據(jù)傳輸岛请，宏定義是為了方便后面編程使用：
添加別踩白塊的數(shù)據(jù)到傳輸包結(jié)構(gòu)體：
游戲調(diào)度函數(shù)實現(xiàn)：
游戲計時顯示
機智云數(shù)據(jù)包獲取后的事件響應(yīng)函數(shù)添加：
2.2 網(wǎng)頁別踩白塊js與機智云websocket實現(xiàn)
具體的實現(xiàn)就是直接使用機智云提供的websocket的Demo添加上別踩白塊的JS代碼旭寿，實際的代碼量有點大，這里不詳細解說髓需，后續(xù)會在文末給出整套代碼许师。
2.3 在機智云部署產(chǎn)品
首先就是在機智云創(chuàng)建一個自己的產(chǎn)品，以此來獲取 Product Key僚匆，這個是機智云硬件的入網(wǎng)密匙微渠。
添加數(shù)據(jù)節(jié)點：
2.4 配置網(wǎng)頁控制信息
用網(wǎng)頁控制接入到機智云的設(shè)備仍需要許多步驟，因為要保證設(shè)備安全咧擂，就必須實現(xiàn)用戶與設(shè)備綁定逞盆，綁定需要獲取響應(yīng)的密令。具體的用戶與設(shè)備綁定參考機智云官方的資料：http://docs.gizwits.com/zh-cn/UserManual/UseWebsocket.html
配置成功效果如下：
2.5 websocke連接設(shè)備
2.6 測試物聯(lián)網(wǎng)別踩白塊游戲
QQ截圖20180716142213.jpg?(86.14 KB, 下載次數(shù): 0)
昨天?14:26?上傳
3松申、工程整套源代碼
由于博客園的沒有很好的文件分享端口云芦，所以我就使用隔壁CSDN的文件分享：https://download.csdn.net/download/vitcou/10541825
如果有人想要用其他的STM32實現(xiàn)如此效果，就必須配置好機智云連接贸桶，我是直接使用燒錄好機智云固件的ESP8266來實現(xiàn)的舅逸。
