create the image manager, implement the remote image load.

.gitignore

@@ -0,0 +1,4 @@
+cloudfunction/login/node_modules
+cloudfunction/test
+cloudfunction/uploadScore
+cloudfunction/upload/node_modules

miniprogram/js/databus.js

@@ -1,4 +1,5 @@
 import Pool from './base/pool'
+import ImageManager from './image.js'
 
 let instance
 
@@ -12,6 +13,7 @@ export default class DataBus {
 
     instance = this
 
+    this.images = new ImageManager()
     this.pool = new Pool()
     this.mode = 0
 

miniprogram/js/home/home.js

@@ -3,7 +3,7 @@ import Sprite from '../base/sprite'
 const screenWidth = window.innerWidth
 const screenHeight = window.innerHeight
 
-const BG_IMG_SRC = 'images/garbages/home_page.png'
+const BG_IMG_SRC = `${wx.env.USER_DATA_PATH}/home_page.png`
 const BG_WIDTH = 512
 const BG_HEIGHT = 512
 
@@ -60,10 +60,10 @@ export default class BackGround extends Sprite {
   bgRender(ctx) {
     ctx.drawImage(
       this.img,
+      145,
       0,
-      0,
-      this.width,
-      this.height,
+      screenWidth,
+      screenHeight,
       0,
       this.top,
       screenWidth,
@@ -92,10 +92,10 @@ export default class BackGround extends Sprite {
 
     ctx.drawImage(
       this.img,
+      145,
       0,
-      0,
-      this.width,
-      this.height,
+      screenWidth,
+      screenHeight,
       0,
       this.top,
       screenWidth,

miniprogram/js/image.js

@@ -0,0 +1,48 @@
+const fs = wx.getFileSystemManager()
+
+export default class ImageManager {
+  constructor() {
+    this.introPage = new Image()
+    this.imageGet(this.introPage, 'cloud://classification-test-d20ada.636c-classification-test-d20ada/intro.jpg', 'intro.jpg')
+    this.imageGet('cloud://classification-test-d20ada.636c-classification-test-d20ada/home_page.png', 'home_page.png')
+  }
+
+  /**
+   * get an image from the server and save it. 
+   * The download will start right after the name start, 
+   * but the game won't be blocked and image objects will be empty initially. 
+   * If the image has already been stored, it will be obtained directly.
+   * @param {Image} img: the image object.
+   * @param {string} fileID: the ID for the picture.
+   * @param {string} path: the location to store the image.
+   */
+  imageGet(img, fileID, path) {
+    fs.getFileInfo({
+      filePath: `${wx.env.USER_DATA_PATH}/${path}`,
+      success: res => {
+        console.log('success')
+        img.src = `${wx.env.USER_DATA_PATH}/${path}`
+      }, 
+      fail: () => {
+        console.log('reach')
+        wx.cloud.downloadFile({
+          fileID: fileID,
+          success: res => {
+            fs.saveFile({
+              tempFilePath: res.tempFilePath,
+              filePath: `${wx.env.USER_DATA_PATH}/${path}`,
+              success: res => {
+                console.log(res.savedFilePath)
+                img.src = res.savedFilePath
+              },
+              fail: err => {
+                console.log('image load failed')
+              }
+            })
+          }
+        })
+      }
+    })
+  }
+
+}

miniprogram/js/main.js

@@ -10,8 +10,7 @@ let ctx = canvas.getContext('2d')
 let databus = new DataBus()
 let background = new Image()
 background.src = 'images/garbages/home_page.png'
-let introPage = new Image()
-introPage.src = 'images/intro.jpg'
+let introPage = databus.images.introPage
 let tipImg = new Image()
 tipImg.src = 'images/tip.png'
 
@@ -31,7 +30,6 @@ export default class Main {
     // 维护当前requestAnimationFrame的id
     this.aniId = 0
     this.personalHighScore = null
-
     // 0 present the normal and 1 present the difficult
     databus.mode = 0
     // display the introduction page
@@ -129,8 +127,6 @@ export default class Main {
       // enemy.init(6)
       enemy.init(2, Math.floor(Math.random() * 4) + 1)
       databus.enemys.push(enemy)
-      console.log(enemy.classification)
-      console.log(enemy.img.src)
     }
   }
 
@@ -441,7 +437,7 @@ export default class Main {
 
   }
   home_render() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.clearRect(0, 0, screenWidth, screenHeight)
 
     this.bg.render(ctx)
   }
@@ -462,15 +458,16 @@ export default class Main {
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     ctx.drawImage(
       background,
+      145,
       0,
-      0,
-      background.width,
-      background.height,
+      screenWidth,
+      screenHeight,
       0,
       0,
       screenWidth,
       screenHeight
     )
+
     ctx.drawImage(
       tipImg,
       0, 0,