diff options
| -rw-r--r-- | src/index.html | 5 | ||||
| -rw-r--r-- | src/index.js | 22 |
2 files changed, 19 insertions, 8 deletions
diff --git a/src/index.html b/src/index.html index aa49141..da667a9 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Document</title> + <title>Throw</title> <script type="module" src="index.js"></script> <style> html, @@ -14,8 +14,9 @@ div#throwable { position: fixed; transform: translate(-50%, -50%); - background-color: red; border-radius: 50%; + background-color: black; + background-size: cover; } </style> </head> diff --git a/src/index.js b/src/index.js index 1275360..e07ac8a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,13 @@ import RAPIER from "./rapier.es.js"; +const objElement = document.querySelector("div#throwable"); + +const queryParams = new URLSearchParams(window.location.search); +const image = queryParams.get("image"); +if (image !== null) { + objElement.style.backgroundImage = `url(${decodeURI(image)})`; +} + RAPIER.init().then(() => { const CLICK_IMPULSE_MULTIPLIER = 300_000; const GRAVITY = { x: 0.0, y: 2000 }; @@ -36,7 +44,6 @@ RAPIER.init().then(() => { obj, ); - const objElement = document.querySelector("div#throwable"); const objSize = { x: OBJ_BASE_SIZE.x, y: OBJ_BASE_SIZE.y, @@ -81,12 +88,15 @@ RAPIER.init().then(() => { y: clickPosition.y - objPosition.y, }; const distance = Math.sqrt(direction.x ** 2 + direction.y ** 2); - obj.setLinvel({x: 0, y: 0}); + obj.setLinvel({ x: 0, y: 0 }); if (distance > 0) { - obj.applyImpulse({ - x: (direction.x * CLICK_IMPULSE_MULTIPLIER) / distance, - y: (direction.y * CLICK_IMPULSE_MULTIPLIER) / distance, - }); + obj.applyImpulse( + { + x: (direction.x * CLICK_IMPULSE_MULTIPLIER) / distance, + y: (direction.y * CLICK_IMPULSE_MULTIPLIER) / distance, + }, + true, + ); } }); |