lch24.github.io/Block2.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import control from "./control.js";
import color from "./color.js";
const blc2 = document.createElement("canvas");
blc2.width = 1600;
blc2.height = 900;
blc2.id = "block2";
document.body.append(blc2);
const ctx = blc2.getContext("2d");
const Block2 = {
  num: 0,
  state: 1,
  position: [0, 0],
  colour: "#00EE00",
  texture: "2.png",
  async draw1() {
    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, -80, 24, 80);
      ctx.restore();
      ctx.save();
      ctx.transform(1.2, 0, 0.785, 1, lst[0], lst[1] - 80);
      ctx.filter = "brightness(1.5)";
      ctx.drawImage(img, 0, 0, 131, 31.8);
      ctx.restore();
      ctx.save();
      ctx.translate(lst[0] + 24, lst[1] - 48);
      ctx.drawImage(img, 0, 0, 160, 80);
      ctx.restore();
    } else {
      if (!this.colour.startsWith("#")) {
        this.colour = color.colorNameToHex(this.colour);
      }
      ctx.save();
      ctx.fillStyle = color.getDarkColor(this.colour, 0.4);
      ctx.transform(1, 1.36, 0, 1, lst[0], lst[1]);
      ctx.fillRect(0, -80, 24, 80);
      ctx.restore();
      ctx.save();
      ctx.fillStyle = color.getLightColor(this.colour, 0.4);
      ctx.transform(1.2, 0, 0.785, 1, lst[0], lst[1] - 80);
      ctx.fillRect(0, 0, 131, 31.8);
      ctx.restore();
      ctx.save();
      ctx.fillStyle = this.colour;
      ctx.translate(lst[0] + 24, lst[1] - 48);
      ctx.fillRect(0, 0, 160, 80);
      ctx.restore();
    }
  },
  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, -160, 24, 160);
      ctx.restore();
      ctx.save();
      ctx.transform(1.2, 0, 0.785, 1, lst[0], lst[1] - 160);
      ctx.filter = "brightness(1.5)";
      ctx.drawImage(img, 0, 0, 66, 31.8);
      ctx.restore();
      ctx.save();
      ctx.translate(lst[0] + 24, lst[1] - 128);
      ctx.drawImage(img, 0, 0, 80, 160);
      ctx.restore();
    } else {
      if (!this.colour.startsWith("#")) {
        this.colour = color.colorNameToHex(this.colour);
      }
      ctx.save();
      ctx.fillStyle = color.getDarkColor(this.colour, 0.4);
      ctx.transform(1, 1.36, 0, 1, lst[0], lst[1]);
      ctx.fillRect(0, -160, 24, 160);
      ctx.restore();
      ctx.save();
      ctx.fillStyle = color.getLightColor(this.colour, 0.4);
      ctx.transform(1.2, 0, 0.785, 1, lst[0], lst[1] - 160);
      ctx.fillRect(0, 0, 66, 31.8);
      ctx.restore();
      ctx.save();
      ctx.fillStyle = this.colour;
      ctx.translate(lst[0] + 24, lst[1] - 128);
      ctx.fillRect(0, 0, 80, 160);
      ctx.restore();
    }
  },
  async draw3() {
    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, -80, 48, 80);
      ctx.restore();
      ctx.save();
      ctx.transform(1.2, 0, 0.75, 1, lst[0], lst[1] - 80);
      ctx.filter = "brightness(1.5)";
      ctx.drawImage(img, 0, 0, 66, 66);
      ctx.restore();
      ctx.save();
      ctx.translate(lst[0] + 48, lst[1] - 16);
      ctx.drawImage(img, 0, 0, 80, 80);
      ctx.restore();
    } else {
      if (!this.colour.startsWith("#")) {
        this.colour = color.colorNameToHex(this.colour);
      }
      ctx.save();
      ctx.fillStyle = color.getDarkColor(this.colour, 0.4);
      ctx.transform(1, 1.36, 0, 1, lst[0], lst[1]);
      ctx.fillRect(0, -80, 48, 80);
      ctx.restore();
      ctx.save();
      ctx.fillStyle = color.getLightColor(this.colour, 0.4);
      ctx.transform(1.2, 0, 0.75, 1, lst[0], lst[1] - 80);
      ctx.fillRect(0, 0, 66, 66);
      ctx.restore();
      ctx.save();
      ctx.fillStyle = this.colour;
      ctx.translate(lst[0] + 48, lst[1] - 16);
      ctx.fillRect(0, 0, 80, 80);
      ctx.restore();
    }
  },
  clear() {
    ctx.clearRect(0, 0, 1600, 900);
  },
};
export default Block2;