├── .prettierrc
└── index.html


/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |  "singleQuote": true,
 3 |   "semi": false,
 4 |   "trailingComma": "none",
 5 |   "overrides": [
 6 |     {
 7 |       "files": "*.html",
 8 |       "options": {
 9 |         "parser": "html"
10 |       }
11 |     }
12 |   ]
13 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   body {
  3 |     margin: 0;
  4 |     background: #0c4a6e;
  5 |   }
  6 | </style>
  7 | 
  8 | <script
  9 |   async
 10 |   src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"
 11 | ></script>
 12 | 
 13 | <script type="importmap">
 14 |   {
 15 |     "imports": {
 16 |       "three": "https://unpkg.com/three@0.150.1/build/three.module.js",
 17 |       "three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
 18 |     }
 19 |   }
 20 | </script>
 21 | 
 22 | <script type="module">
 23 |   import * as THREE from 'three'
 24 |   import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 25 | 
 26 |   const scene = new THREE.Scene()
 27 |   const camera = new THREE.PerspectiveCamera(
 28 |     75,
 29 |     window.innerWidth / window.innerHeight,
 30 |     0.1,
 31 |     1000
 32 |   )
 33 |   camera.position.set(4.61, 2.74, 8)
 34 | 
 35 |   const renderer = new THREE.WebGLRenderer({
 36 |     alpha: true,
 37 |     antialias: true
 38 |   })
 39 |   renderer.shadowMap.enabled = true
 40 |   renderer.setSize(window.innerWidth, window.innerHeight)
 41 |   document.body.appendChild(renderer.domElement)
 42 | 
 43 |   const controls = new OrbitControls(camera, renderer.domElement)
 44 | 
 45 |   class Box extends THREE.Mesh {
 46 |     constructor({
 47 |       width,
 48 |       height,
 49 |       depth,
 50 |       color = '#00ff00',
 51 |       velocity = {
 52 |         x: 0,
 53 |         y: 0,
 54 |         z: 0
 55 |       },
 56 |       position = {
 57 |         x: 0,
 58 |         y: 0,
 59 |         z: 0
 60 |       },
 61 |       zAcceleration = false
 62 |     }) {
 63 |       super(
 64 |         new THREE.BoxGeometry(width, height, depth),
 65 |         new THREE.MeshStandardMaterial({ color })
 66 |       )
 67 | 
 68 |       this.width = width
 69 |       this.height = height
 70 |       this.depth = depth
 71 | 
 72 |       this.position.set(position.x, position.y, position.z)
 73 | 
 74 |       this.right = this.position.x + this.width / 2
 75 |       this.left = this.position.x - this.width / 2
 76 | 
 77 |       this.bottom = this.position.y - this.height / 2
 78 |       this.top = this.position.y + this.height / 2
 79 | 
 80 |       this.front = this.position.z + this.depth / 2
 81 |       this.back = this.position.z - this.depth / 2
 82 | 
 83 |       this.velocity = velocity
 84 |       this.gravity = -0.002
 85 | 
 86 |       this.zAcceleration = zAcceleration
 87 |     }
 88 | 
 89 |     updateSides() {
 90 |       this.right = this.position.x + this.width / 2
 91 |       this.left = this.position.x - this.width / 2
 92 | 
 93 |       this.bottom = this.position.y - this.height / 2
 94 |       this.top = this.position.y + this.height / 2
 95 | 
 96 |       this.front = this.position.z + this.depth / 2
 97 |       this.back = this.position.z - this.depth / 2
 98 |     }
 99 | 
100 |     update(ground) {
101 |       this.updateSides()
102 | 
103 |       if (this.zAcceleration) this.velocity.z += 0.0003
104 | 
105 |       this.position.x += this.velocity.x
106 |       this.position.z += this.velocity.z
107 | 
108 |       this.applyGravity(ground)
109 |     }
110 | 
111 |     applyGravity(ground) {
112 |       this.velocity.y += this.gravity
113 | 
114 |       // this is where we hit the ground
115 |       if (
116 |         boxCollision({
117 |           box1: this,
118 |           box2: ground
119 |         })
120 |       ) {
121 |         const friction = 0.5
122 |         this.velocity.y *= friction
123 |         this.velocity.y = -this.velocity.y
124 |       } else this.position.y += this.velocity.y
125 |     }
126 |   }
127 | 
128 |   function boxCollision({ box1, box2 }) {
129 |     const xCollision = box1.right >= box2.left && box1.left <= box2.right
130 |     const yCollision =
131 |       box1.bottom + box1.velocity.y <= box2.top && box1.top >= box2.bottom
132 |     const zCollision = box1.front >= box2.back && box1.back <= box2.front
133 | 
134 |     return xCollision && yCollision && zCollision
135 |   }
136 | 
137 |   const cube = new Box({
138 |     width: 1,
139 |     height: 1,
140 |     depth: 1,
141 |     velocity: {
142 |       x: 0,
143 |       y: -0.01,
144 |       z: 0
145 |     }
146 |   })
147 |   cube.castShadow = true
148 |   scene.add(cube)
149 | 
150 |   const ground = new Box({
151 |     width: 10,
152 |     height: 0.5,
153 |     depth: 50,
154 |     color: '#0369a1',
155 |     position: {
156 |       x: 0,
157 |       y: -2,
158 |       z: 0
159 |     }
160 |   })
161 | 
162 |   ground.receiveShadow = true
163 |   scene.add(ground)
164 | 
165 |   const light = new THREE.DirectionalLight(0xffffff, 1)
166 |   light.position.y = 3
167 |   light.position.z = 1
168 |   light.castShadow = true
169 |   scene.add(light)
170 | 
171 |   scene.add(new THREE.AmbientLight(0xffffff, 0.5))
172 | 
173 |   camera.position.z = 5
174 |   console.log(ground.top)
175 |   console.log(cube.bottom)
176 | 
177 |   const keys = {
178 |     a: {
179 |       pressed: false
180 |     },
181 |     d: {
182 |       pressed: false
183 |     },
184 |     s: {
185 |       pressed: false
186 |     },
187 |     w: {
188 |       pressed: false
189 |     }
190 |   }
191 | 
192 |   window.addEventListener('keydown', (event) => {
193 |     switch (event.code) {
194 |       case 'KeyA':
195 |         keys.a.pressed = true
196 |         break
197 |       case 'KeyD':
198 |         keys.d.pressed = true
199 |         break
200 |       case 'KeyS':
201 |         keys.s.pressed = true
202 |         break
203 |       case 'KeyW':
204 |         keys.w.pressed = true
205 |         break
206 |       case 'Space':
207 |         cube.velocity.y = 0.08
208 |         break
209 |     }
210 |   })
211 | 
212 |   window.addEventListener('keyup', (event) => {
213 |     switch (event.code) {
214 |       case 'KeyA':
215 |         keys.a.pressed = false
216 |         break
217 |       case 'KeyD':
218 |         keys.d.pressed = false
219 |         break
220 |       case 'KeyS':
221 |         keys.s.pressed = false
222 |         break
223 |       case 'KeyW':
224 |         keys.w.pressed = false
225 |         break
226 |     }
227 |   })
228 | 
229 |   const enemies = []
230 | 
231 |   let frames = 0
232 |   let spawnRate = 200
233 |   function animate() {
234 |     const animationId = requestAnimationFrame(animate)
235 |     renderer.render(scene, camera)
236 | 
237 |     // movement code
238 |     cube.velocity.x = 0
239 |     cube.velocity.z = 0
240 |     if (keys.a.pressed) cube.velocity.x = -0.05
241 |     else if (keys.d.pressed) cube.velocity.x = 0.05
242 | 
243 |     if (keys.s.pressed) cube.velocity.z = 0.05
244 |     else if (keys.w.pressed) cube.velocity.z = -0.05
245 | 
246 |     cube.update(ground)
247 |     enemies.forEach((enemy) => {
248 |       enemy.update(ground)
249 |       if (
250 |         boxCollision({
251 |           box1: cube,
252 |           box2: enemy
253 |         })
254 |       ) {
255 |         cancelAnimationFrame(animationId)
256 |       }
257 |     })
258 | 
259 |     if (frames % spawnRate === 0) {
260 |       if (spawnRate > 20) spawnRate -= 20
261 | 
262 |       const enemy = new Box({
263 |         width: 1,
264 |         height: 1,
265 |         depth: 1,
266 |         position: {
267 |           x: (Math.random() - 0.5) * 10,
268 |           y: 0,
269 |           z: -20
270 |         },
271 |         velocity: {
272 |           x: 0,
273 |           y: 0,
274 |           z: 0.005
275 |         },
276 |         color: 'red',
277 |         zAcceleration: true
278 |       })
279 |       enemy.castShadow = true
280 |       scene.add(enemy)
281 |       enemies.push(enemy)
282 |     }
283 | 
284 |     frames++
285 |     // cube.position.y += -0.01
286 |     // cube.rotation.x += 0.01
287 |     // cube.rotation.y += 0.01
288 |   }
289 |   animate()
290 | </script>
291 | 


--------------------------------------------------------------------------------