diff options
| -rw-r--r-- | quickdraw-game.html | 25 |
1 files changed, 16 insertions, 9 deletions
diff --git a/quickdraw-game.html b/quickdraw-game.html index 175abfb..77191c3 100644 --- a/quickdraw-game.html +++ b/quickdraw-game.html @@ -37,6 +37,7 @@ <script> + const gameBorderWidth = 1; const targetWidth = 20; const targetHeight = 20; @@ -44,8 +45,8 @@ let pageHeight = window.innerHeight; const frameElement = document.getElementById("frame"); - let frameHeight = frameElement.offsetHeight - targetHeight; - let frameWidth = frameElement.offsetWidth - targetWidth; + let frameHeight = frameElement.offsetHeight; + let frameWidth = frameElement.offsetWidth; let target; @@ -53,21 +54,29 @@ window.addEventListener("resize", (e) => { this.pageWidth = window.innerWidth; this.pageHeight = window.innerHeight; - this.frameHeight = frameElement.offsetHeight; - this.frameWidth = frameElement.offsetWidth; + this.frameHeight = frameElement.offsetHeight - targetHeight; + this.frameWidth = frameElement.offsetWidth - targetWidth; console.log('page: ' + this.pageWidth + ' x ' + this.pageHeight); console.log('frame: ' + this.frameWidth + ' x ' + this.frameHeight); }); let k, r, x, y; let radians; + + let ratio = frameHeight / frameWidth; + + let xFrameAdjustment = ((pageWidth - frameWidth) * 2) - (targetWidth / 2); + let yFrameAdjustment = (frameHeight / 2) - (targetWidth / 2); + + generateTarget(xFrameAdjustment, yFrameAdjustment) + for (let i = 0; i < 360; i++) { - r = frameWidth / 2; + r = (frameWidth / 2) - (targetWidth / 2); radians = degreesToRadians(i); - x = r * Math.cos(i); - y = r * Math.sin(i); + x = ((r * 1 * Math.cos(radians)) + xFrameAdjustment); + y = ((r * ratio * Math.sin(radians)) + yFrameAdjustment); console.log(x + ', ' + y); generateTarget(x, y); @@ -78,8 +87,6 @@ console.log('frame: ' + frameWidth + ' x ' + frameHeight); - - function degreesToRadians(degrees) { return degrees * (Math.PI / 180) } |