2048_of_chen_xiaofa/wx/js/base/background.js

/**
 * 游戏背景
 */

export default class BackGround {
  constructor(ctx, w, h) {
    // this.w = w
    // this.h = h
    this.render(ctx, w, h)

    // 重新开始按钮区域方便简易判断按钮点击
    this.btnArea = {
      startX: 0.04*w,
      startY: 50,
      endX  : 0.04*w  + 0.2*w,
      endY  : 50 + 0.16*w
    }
  }
  /**
   * 背景图重绘函数
   * 绘制浅色背景图, 大小和屏幕一致
   * 绘制三个按钮, 即文字
   * 绘制棋盘背景板
   */
  render(ctx, w, h) {
    ctx.clearRect(0, 0, w, h);
    ctx.fillStyle = '#F0F0F0'
    ctx.fillRect(0, 0, w, h)

    ctx.fillStyle = '#F7921E'
    ctx.font = "30px 微软雅黑"
    // ctx.textBaseline = "top"
    ctx.fillText("2048之陈小发", 0.04*w, 0.1*w);

    ctx.fillStyle = '#8F7A66'
    ctx.fillRect(0.04*w, 50, 0.2*w, 0.16*w)
    ctx.fillStyle = '#BAAB9E'
    ctx.fillRect(0.28*w, 50, 0.32*w, 0.16*w)
    ctx.fillStyle = '#F7921E'
    ctx.fillRect(0.64*w, 50, 0.32*w, 0.16*w)
    ctx.fillStyle = 'white'
    ctx.font = "20px 微软雅黑"
    ctx.textAlign = "center"
    ctx.textBaseline = "top"
    ctx.fillText("重玩", 0.14*w, 50+0.04*w);
    ctx.fillText("最高分数", 0.44*w, 50);
    ctx.fillText("当前分数", 0.8*w, 50);
    // console.log(0.14*w, 50+0.1*w)
    // 棋盘背景
    ctx.fillStyle = '#BBADA0'
    ctx.fillRect(0.04*w, 50+0.3*w, 0.92*w, 0.92*w)
  }
}