Spring26-Day28-BehaviorTrees/index.html at main · CS2510/Spring26-Day28-BehaviorTrees · 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!-- Please carefully review the rules about academic integrity found in the academicIntegrity.md file found at the root of this project. -->

<!doctype html>
<html>

<head>
  <title>Test Aspect Ratios</title>
  <style>
    /* Engine-Specific */
    * {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <canvas id="canv"></canvas>
  <script src="./engine/Engine.js"></script>
  <script src="./engine/Scene.js"></script>
  <script src="./engine/GameObject.js"></script>
  <script src="./engine/Component.js"></script>
  <script src="./engine/Input.js"></script>
  <script src="./engine/Vector2.js"></script>
  <script src="./engine/Time.js"></script>
  <script src="./engine/Collisions.js"></script>
  <script src="./engine/SceneManager.js"></script>
  <script src="./engine/Mathf.js"></script>

  <script src="./engine/components/Transform.js"></script>
  <script src="./engine/components/TextLabel.js"></script>
  <script src="./engine/components/Polygon.js"></script>
  <script src="./engine/components/Collider.js"></script>
  <script src="./engine/components/RigidBody.js"></script>
  <script src="./engine/components/Camera.js"></script>


  <script>

    const square = [new Vector2(-10, -10), new Vector2(10, -10), new Vector2(10, 10), new Vector2(-10, 10)]

    class MainScene extends Scene {
      constructor() {
        super("gray")
        this.instantiate(new HorizontalWallGameObject(), new Vector2(200, 200))
        this.instantiate(new HorizontalWallGameObject(), new Vector2(400, 200))

        this.instantiate(new HorizontalWallGameObject(), new Vector2(200, 600))


        this.instantiate(new VerticalWallGameObject(), new Vector2(100, 300))
        this.instantiate(new VerticalWallGameObject(), new Vector2(100, 500))

        this.instantiate(new VerticalWallGameObject(), new Vector2(500, 300))
        this.instantiate(new VerticalWallGameObject(), new Vector2(500, 500))

        this.instantiate(new HeroGameObject(), new Vector2(400, 300))

        const text = this.instantiate(new GameObject("Text Game Object", { layer: "UI" }), new Vector2(50, 50))
        text.addComponent(new TextLabel(), { text: "Points" })

        const label = this.instantiate(new GameObject("Label Game Object", { layer: "UI" }), new Vector2(50, 10))
        label.addComponent(new TextLabel(), { text: "Hero" })

        const button = this.instantiate(new GameObject("Button Game Object", {layer: "UI"}), new Vector2(100, 100));
        button.addComponent(new Polygon(), {points: square, fillStyle: "blue"})
        button.addComponent(new Collider())
        button.addComponent(new ButtonComponent())

      }
    }

    class HorizontalWallGameObject extends GameObject {
      constructor() {
        super("HorizontalWallGameObject")
        this.addComponent(new Polygon(), { points: [new Vector2(-100, -10), new Vector2(100, -10), new Vector2(100, 10), new Vector2(-100, 10)] })
        this.addComponent(new Collider(),)
      }
    }

    class VerticalWallGameObject extends GameObject {
      constructor() {
        super("VerticalWallGameObject")
        this.addComponent(new Polygon(), { points: [new Vector2(-10, -100), new Vector2(10, -100), new Vector2(10, 100), new Vector2(-10, 100)] })
        this.addComponent(new Collider())
      }
    }

    class HeroGameObject extends GameObject {
      constructor() {
        super("HeroGameObject")
        this.addComponent(new Polygon(), { points: square, fillStyle: "red" })
        this.addComponent(new Collider())
        this.addComponent(new RigidBody())
        this.addComponent(new HeroController())
      }
    }

    class ButtonComponent extends Component{
      onMouseOver(){
        console.log("Over Button")
      }
    }

    class HeroController extends Component {
      speed = 100
      onMouseOver() {


        console.log("Mouse Over")
      }
      fixedUpdate() {
        let offset = new Vector2(0, 0)

        if (Input.keysDown.includes("ArrowRight")) offset = offset.add(new Vector2(1, 0))
        if (Input.keysDown.includes("ArrowLeft")) offset = offset.add(new Vector2(-1, 0))
        if (Input.keysDown.includes("ArrowUp")) offset = offset.add(new Vector2(0, -1))
        if (Input.keysDown.includes("ArrowDown")) offset = offset.add(new Vector2(0, 1))

        let c = offset
        let a = c.normalized()
        let b = offset.times(Time.deltaTime * this.speed)

        this.transform.position = this.transform.position.add(b)


        if (Camera.main.transform.position.x - this.transform.position.x > 25) {
          Camera.main.transform.position.x = this.transform.position.x + 25
        }
        if (Camera.main.transform.position.x - this.transform.position.x < -25) {
          Camera.main.transform.position.x = this.transform.position.x - 25
        }
        Camera.main.transform.position.y = this.transform.position.y

        Camera.main.transform.scale = new Vector2(1, 1)


        Camera.main.transform.position.x = Mathf.clamp(Camera.main.transform.position.x, 0, 600)


        // Camera.main.transform.scale = new Vector2(.5, .5)


        // const p = this.transform.position
        // const cp = Camera.main.transform.position
        // const q = 100
        // if (p.x - cp.x > q) cp.x = Mathf.lerp(p.x - q, cp.x, .9)
        // if (p.x - cp.x < -q) cp.x = Mathf.lerp(p.x + q, cp.x, .9)

        // if (p.y - cp.y > q) cp.y = Mathf.lerp(p.y - q, cp.y, .9)
        // if (p.y - cp.y < -q) cp.y = Mathf.lerp(p.y + q, cp.y, .9)

        // const labelGameObject = GameObject.find("Label Game Object")


        // labelGameObject.transform.position = Camera.worldPointToScreenPoint(this.transform.position)
        // labelGameObject.transform.position.y -= 20
      }
    }

    SceneManager.currentScene = new MainScene()
    Engine.start({ aspectRatio: 2, cameraWidth : 1000})
  </script>
</body>

</html>