53 lines
951 B
JavaScript
53 lines
951 B
JavaScript
|
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
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|