Spring26-Day11-Advanced-Input/gameTopDown.html at main · CS2510/Spring26-Day11-Advanced-Input · 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
<!-- 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>Game Top Down</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/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>


    class MainScene extends Scene {
      constructor() {
        super()
        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))

      }
    }

    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)] })
      }
    }

    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)] })
      }
    }

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

    class HeroController extends Component{
      speed = 100
      update(){
        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)
        if(b.magnitude != 0)
          console.log("Move")
        if(Number.isNaN(b.x))
          console.log("NaN")
        this.transform.position = this.transform.position.add(b)
      }
    }

    Engine.currentScene = new MainScene()
    Engine.start()
  </script>
</body>

</html>