Initial commit

js/runtime/background.js

@@ -0,0 +1,52 @@
+import Sprite from '../base/sprite';
+import { SCREEN_WIDTH, SCREEN_HEIGHT } from '../render';
+
+const BACKGROUND_IMAGE_SRC = 'images/bg.jpg';
+const BACKGROUND_WIDTH = 512;
+const BACKGROUND_HEIGHT = 512;
+const BACKGROUND_SPEED = 2;
+
+/**
+ * 游戏背景类
+ * 提供 update 和 render 函数实现无限滚动的背景功能
+ */
+export default class BackGround extends Sprite {
+  constructor() {
+    super(BACKGROUND_IMAGE_SRC, SCREEN_WIDTH, SCREEN_HEIGHT);
+  }
+
+  update() {
+    // 背景不再滚动
+  }
+
+  /**
+   * 背景图重绘函数
+   * 绘制一张静态图片
+   */
+  render(ctx) {
+    ctx.drawImage(
+      this.img,
+      0,
+      0,
+      this.width,
+      this.height,
+      0,
+      0,
+      SCREEN_WIDTH,
+      SCREEN_HEIGHT
+    );
+
+    // 绘制第二张背景
+    ctx.drawImage(
+      this.img,
+      0,
+      0,
+      this.width,
+      this.height,
+      0,
+      BACKGROUND_HEIGHT,
+      SCREEN_WIDTH,
+      SCREEN_HEIGHT
+    );
+  }
+}