0、簡(jiǎn)介

本人在大學(xué)本科最后的一個(gè)課程設(shè)計(jì)，做的比較有趣味，同時(shí)最近的物聯(lián)網(wǎng)逐漸大熱，所以分享一下自己的作品設(shè)計(jì)過程。作品是在機(jī)智云最為簡(jiǎn)單的STM32核心板例程上開展的，使用到的通信協(xié)議是機(jī)智云寫好的機(jī)智云連接固件，網(wǎng)頁編程也是機(jī)智云的WebSocket Demo。本人做的是在原有的核心系統(tǒng)上添加別踩白塊的物聯(lián)網(wǎng)游戲功能。實(shí)現(xiàn)效果如下：

優(yōu)酷視頻地址：http://player.youku.com/embed/XMzcyMzU0NjE0OA==

得到的效果就是在網(wǎng)頁上JavaScript 別踩白塊游戲顯示數(shù)據(jù)通過WebSocket發(fā)送到機(jī)智云控制平臺(tái)，然后機(jī)智云下發(fā)到STM32，實(shí)現(xiàn)網(wǎng)頁游戲顯示與STM32顯示同步（實(shí)際會(huì)有一點(diǎn)網(wǎng)絡(luò)延遲）。

1、實(shí)現(xiàn)設(shè)備

1）SmarKit - ESP STM32核心板

2）機(jī)智云平臺(tái)

3）0.96寸的OLED顯示屏（四針，IIC通信）

4）機(jī)智云websocket Demo 加上簡(jiǎn)單的別踩白塊游戲JS

5）燒錄好機(jī)智云固件的ESP8266

2、實(shí)現(xiàn)步驟

2.1編寫STM32硬件程序

在機(jī)智云的協(xié)議頭文件修改自己的設(shè)備信息（在機(jī)智云創(chuàng)建設(shè)備后獲取到）：

添加別踩白塊數(shù)據(jù)的宏定義，在這我是使用兩個(gè)uint8_t類型數(shù)據(jù)來傳輸，因?yàn)轱@示的白塊位置共16個(gè)，原本打算用uint16_t傳輸?shù)模切枰薷恼椎臋C(jī)智云上傳包格式，所以我就直接拆分兩段數(shù)據(jù)傳輸，宏定義是為了方便后面編程使用：

添加別踩白塊的數(shù)據(jù)到傳輸包結(jié)構(gòu)體：

游戲調(diào)度函數(shù)實(shí)現(xiàn)：

游戲計(jì)時(shí)顯示

機(jī)智云數(shù)據(jù)包獲取后的事件響應(yīng)函數(shù)添加：

2.2 網(wǎng)頁別踩白塊js與機(jī)智云websocket實(shí)現(xiàn)

具體的實(shí)現(xiàn)就是直接使用機(jī)智云提供的websocket的Demo添加上別踩白塊的JS代碼，實(shí)際的代碼量有點(diǎn)大，這里不詳細(xì)解說，后續(xù)會(huì)在文末給出整套代碼。

2.3 在機(jī)智云部署產(chǎn)品

首先就是在機(jī)智云創(chuàng)建一個(gè)自己的產(chǎn)品，以此來獲取 Product Key，這個(gè)是機(jī)智云硬件的入網(wǎng)密匙。

添加數(shù)據(jù)節(jié)點(diǎn)：

2.4 配置網(wǎng)頁控制信息

用網(wǎng)頁控制接入到機(jī)智云的設(shè)備仍需要許多步驟，因?yàn)橐ＷC設(shè)備安全，就必須實(shí)現(xiàn)用戶與設(shè)備綁定，綁定需要獲取響應(yīng)的密令。具體的用戶與設(shè)備綁定參考機(jī)智云官方的資料：http://docs.gizwits.com/zh-cn/UserManual/UseWebsocket.html

配置成功效果如下：

2.5 websocke連接設(shè)備

2.6 測(cè)試物聯(lián)網(wǎng)別踩白塊游戲

3、工程整套源代碼

由于博客園的沒有很好的文件分享端口，所以我就使用隔壁CSDN的文件分享：https://download.csdn.net/download/vitcou/10541825

如果有人想要用其他的STM32實(shí)現(xiàn)如此效果，就必須配置好機(jī)智云連接，我是直接使用燒錄好機(jī)智云固件的ESP8266來實(shí)現(xiàn)的。