1. 程式人生 > >機智雲WebSocket實現物聯網遊戲

機智雲WebSocket實現物聯網遊戲

調度 詳細 修改 機智 設備安全 iic user 參考 player

0、簡介

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

  技術分享圖片

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

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

1、實現設備

  1)SmarKit - ESP STM32核心板

  2)機智雲平臺

  3)0.96寸的OLED顯示屏(四針,IIC通信)

  4)機智雲websocket Demo 加上簡單的別踩白塊遊戲JS

  5)燒錄好機智雲固件的ESP8266

2、實現步驟

  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 測試物聯網別踩白塊遊戲

技術分享圖片

3、工程整套源代碼

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

  

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

機智雲WebSocket實現物聯網遊戲