simon/quickdraw-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

circle is ratio-sensitive now!

Browse Source
This commit is contained in:
simon
2026-06-06 19:57:05 -05:00
parent 55845a80fb
commit ff51e386c6
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+16 -9
View File
@@ -37,6 +37,7 @@
<script> <script>
const gameBorderWidth = 1;
const targetWidth = 20; const targetWidth = 20;
const targetHeight = 20; const targetHeight = 20;
@@ -44,8 +45,8 @@
let pageHeight = window.innerHeight; let pageHeight = window.innerHeight;
const frameElement = document.getElementById("frame"); const frameElement = document.getElementById("frame");
let frameHeight = frameElement.offsetHeight - targetHeight; let frameHeight = frameElement.offsetHeight;
let frameWidth = frameElement.offsetWidth - targetWidth; let frameWidth = frameElement.offsetWidth;
let target; let target;
@@ -53,21 +54,29 @@
window.addEventListener("resize", (e) => { window.addEventListener("resize", (e) => {
this.pageWidth = window.innerWidth; this.pageWidth = window.innerWidth;
this.pageHeight = window.innerHeight; this.pageHeight = window.innerHeight;
this.frameHeight = frameElement.offsetHeight; this.frameHeight = frameElement.offsetHeight - targetHeight;
this.frameWidth = frameElement.offsetWidth; this.frameWidth = frameElement.offsetWidth - targetWidth;
console.log('page: ' + this.pageWidth + ' x ' + this.pageHeight); console.log('page: ' + this.pageWidth + ' x ' + this.pageHeight);
console.log('frame: ' + this.frameWidth + ' x ' + this.frameHeight); console.log('frame: ' + this.frameWidth + ' x ' + this.frameHeight);
}); });
let k, r, x, y; let k, r, x, y;
let radians; 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++) { for (let i = 0; i < 360; i++) {
r = frameWidth / 2; r = (frameWidth / 2) - (targetWidth / 2);
radians = degreesToRadians(i); radians = degreesToRadians(i);
x = r * Math.cos(i); x = ((r * 1 * Math.cos(radians)) + xFrameAdjustment);
y = r * Math.sin(i); y = ((r * ratio * Math.sin(radians)) + yFrameAdjustment);
console.log(x + ', ' + y); console.log(x + ', ' + y);
generateTarget(x, y); generateTarget(x, y);
@@ -78,8 +87,6 @@
console.log('frame: ' + frameWidth + ' x ' + frameHeight); console.log('frame: ' + frameWidth + ' x ' + frameHeight);
function degreesToRadians(degrees) { function degreesToRadians(degrees) {
return degrees * (Math.PI / 180) return degrees * (Math.PI / 180)
} }