lch24.github.io/ground.js at main · lch24/lch24.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import control from "./control.js";
import color from "./color.js";
const grd = document.createElement("canvas");
grd.width = 1600;
grd.height = 900;
grd.id = "ground";
document.body.append(grd);
export const ctx = grd.getContext("2d");
const Ground = {
  position: [0, 0],
  color: "#CD853F",
  color2: "#F0FFF0",
  texture: null,
  async draw() {
    let lst = control.convert(this.position[0], this.position[1]);
    if (this.texture) {
      const img = new Image();
      img.src = this.texture;
      await new Promise((resolve) => {
        img.onload = resolve;
      });
      ctx.save();
      ctx.transform(1, 1.36, 0, 1, lst[0], lst[1]);
      ctx.filter = "brightness(0.5)";
      ctx.drawImage(img, 0, 0, 24, 30);
      ctx.restore();
      ctx.save();
      ctx.transform(1.2, 0, 0.785, 1, lst[0], lst[1]);
      ctx.filter = "brightness(1.5)";
      ctx.drawImage(img, 0, 0, 67, 31.8);
      ctx.restore();
      ctx.save();
      ctx.translate(lst[0] + 24, lst[1] + 32);
      ctx.drawImage(img, 0, 0, 80, 30);
      ctx.restore();
    } else {
      if (!this.color.startsWith("#")) {
        this.color = colorNameToHex(this.color);
      }
      ctx.beginPath();
      ctx.fillStyle = color.getDarkColor(this.color, 0.3);
      ctx.moveTo(lst[0], lst[1]);
      ctx.lineTo(lst[0], lst[1] + 30);
      ctx.lineTo(lst[0] + 24, lst[1] + 62);
      ctx.lineTo(lst[0] + 24, lst[1] + 32);
      ctx.fill();
      ctx.stroke();
      ctx.beginPath();
      ctx.fillStyle = color.getLightColor(this.color, 0.3);
      ctx.moveTo(lst[0], lst[1]);
      ctx.lineTo(lst[0] + 24, lst[1] + 32);
      ctx.lineTo(lst[0] + 104, lst[1] + 32);
      ctx.lineTo(lst[0] + 80, lst[1]);
      ctx.fill();
      ctx.stroke();
      ctx.beginPath();
      ctx.fillStyle = this.color;
      ctx.moveTo(lst[0] + 24, lst[1] + 32);
      ctx.lineTo(lst[0] + 24, lst[1] + 62);
      ctx.lineTo(lst[0] + 104, lst[1] + 62);
      ctx.lineTo(lst[0] + 104, lst[1] + 32);
      ctx.fill();
      ctx.stroke();
    }
  },
  async draw2() {
    let lst = control.convert(this.position[0], this.position[1]);
    if (this.texture) {
      const img = new Image();
      img.src = this.texture;
      await new Promise((resolve) => {
        img.onload = resolve;
      });
      ctx.save();
      ctx.transform(1, 1.36, 0, 1, lst[0], lst[1]);
      ctx.filter = "brightness(0.5)";
      ctx.drawImage(img, 0, 0, 24, 30);
      ctx.restore();
      ctx.save();
      ctx.transform(1.2, 0, 0.785, 1, lst[0], lst[1]);
      ctx.filter = "brightness(1.5)";
      ctx.drawImage(img, 0, 0, 67, 31.8);
      ctx.restore();
      ctx.save();
      ctx.translate(lst[0] + 24, lst[1] + 32);
      ctx.drawImage(img, 0, 0, 80, 30);
      ctx.restore();
    } else {
      if (!this.color2.startsWith("#")) {
        this.color2 = colorNameToHex(this.color2);
      }
      ctx.beginPath();
      ctx.fillStyle = color.getDarkColor(this.color2, 0.3);
      ctx.moveTo(lst[0], lst[1]);
      ctx.lineTo(lst[0], lst[1] + 30);
      ctx.lineTo(lst[0] + 24, lst[1] + 62);
      ctx.lineTo(lst[0] + 24, lst[1] + 32);
      ctx.fill();
      ctx.stroke();
      ctx.beginPath();
      ctx.fillStyle = color.getLightColor(this.color2, 0.3);
      ctx.moveTo(lst[0], lst[1]);
      ctx.lineTo(lst[0] + 24, lst[1] + 32);
      ctx.lineTo(lst[0] + 104, lst[1] + 32);
      ctx.lineTo(lst[0] + 80, lst[1]);
      ctx.fill();
      ctx.stroke();
      ctx.beginPath();
      ctx.fillStyle = this.color2;
      ctx.moveTo(lst[0] + 24, lst[1] + 32);
      ctx.lineTo(lst[0] + 24, lst[1] + 62);
      ctx.lineTo(lst[0] + 104, lst[1] + 62);
      ctx.lineTo(lst[0] + 104, lst[1] + 32);
      ctx.fill();
      ctx.stroke();
    }
  },
  clear() {
    ctx.clearRect(0, 0, 1600, 900);
  },
};
export default Ground;