機智雲WebSocket實現物聯網遊戲

0、簡介

　　本人在大學本科最後的一個課程設計，作的比較有趣味，同時最近的物聯網逐漸大熱，因此分享一下本身的做品設計過程。做品是在機智雲最爲簡單的STM32核心板例程上開展的，使用到的通訊協議是機智雲寫好的機智雲鏈接固件，網頁編程也是機智雲的WebSocket Demo。本人作的是在原有的核心繫統上添加別踩白塊的物聯網遊戲功能。實現效果以下：

                         　　

 

 

優酷視頻：http://player.youku.com/embed/XMzcyMzU0NjE0OA==

 

獲得的效果就是在網頁上JavaScript 別踩白塊遊戲顯示數據經過WebSocket發送到機智雲控制平臺，而後機智雲下發到STM32，實現網頁遊戲顯示與STM32顯示同步（實際會有一點網絡延遲）。

 

一、實現設備

　　1）SmarKit - ESP STM32核心板

　　2）機智雲平臺

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

　　4）機智雲websocket Demo 加上簡單的別踩白塊遊戲JS （websocket API開發指南：http://docs.gizwits.com/zh-cn/Cloud/WebsocketAPI.html ）

 　   5）燒錄好機智雲固件的ESP8266  （固件下載地址：https://download.gizwits.com/zh-cn/p/92/94）

二、實現步驟

　　2.1編寫STM32硬件程序

　　　　在機智雲的協議頭文件修改本身的設備信息（在機智雲建立設備後獲取到）：

　　　　

　　　　添加別踩白塊數據的宏定義，在這我是使用兩個uint8_t類型數據來傳輸，由於顯示的白塊位置共16個，本來打算用uint16_t傳輸的，可是須要修改整套的機智雲上傳包格式，因此我就直接拆分兩段數據傳輸，宏定義是爲了方便後面編程使用：

　　　　

　　　　添加別踩白塊的數據到傳輸包結構體：

　　　　

　　　　遊戲調度函數實現：

　　　　

 

　　　　　　遊戲計時顯示

 　　　　　      　　　

 

　　　　　　機智雲數據包獲取後的事件響應函數添加：

　　　　　　

　　2.2 網頁別踩白塊js與機智雲websocket實現

　　　　　　具體的實現就是直接使用機智雲提供的websocket的Demo添加上別踩白塊的JS代碼，實際的代碼量有點大，這裏不詳細解說，後續會在文末給出整套代碼。

　　

　　2.3 在機智雲部署產品

　　首先就是在機智雲建立一個本身的產品，以此來獲取 Product Key，這個是機智雲硬件的入網密匙。

 

　　添加數據節點：

　　2.4 配置網頁控制信息

　用網頁控制接入到機智雲的設備仍須要許多步驟，由於要保證設備安全，就必須實現用戶與設備綁定，綁定須要獲取響應的密令。具體的用戶與設備綁定參考機智雲官方的資料：http://docs.gizwits.com/zh-cn/UserManual/UseWebsocket.html

配置成功效果以下：

　　2.5 websocke鏈接設備

　

 

 　　2.6 測試物聯網別踩白塊遊戲

 

三、工程整套源代碼

　　因爲部分的代碼是不能獲得運行效果，因此我這直接提供整套工程源碼：https://files.cnblogs.com/files/vitcou/%E7%89%A9%E8%81%94%E7%BD%91%E5%88%AB%E8%B8%A9%E7%99%BD%E5%9D%97%E6%B8%B8%E6%88%8F.zip

 　　

　　若是有人想要用其餘的STM32實現如此效果，就必須配置好機智雲鏈接，我是直接使用燒錄好機智雲固件的ESP8266來實現的。

 

　　因爲本人的知識水平有限，寫的比較簡陋，大佬見諒！