From 5fa32196fdb04a0aa4ad0755df03bf11b82f10c8 Mon Sep 17 00:00:00 2001 From: Bye <bye@byecorps.com> Date: Sat, 19 Aug 2023 21:12:04 +0100 Subject: [PATCH] i made a graph --- src/img/selector.webp | Bin 94 -> 0 bytes src/img/t.webp | Bin 296 -> 0 bytes src/index.html | 1 + src/js/canvas.js | 6 +++ src/js/game.js | 101 ++++++++++++++++++++++++++++++++++++++++-- src/js/utils.js | 2 + 6 files changed, 106 insertions(+), 4 deletions(-) delete mode 100644 src/img/selector.webp delete mode 100644 src/img/t.webp diff --git a/src/img/selector.webp b/src/img/selector.webp deleted file mode 100644 index 8e9d19bc0d5eb33b558f06ff0e907e744ba41b11..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 94 zcmWIYbaM-1U|<M$bqWXzu!!JdU|<knU|`?}BS)VA4=Dx)21b5^|AK-|4u>BJpJ5T6 s&nNhIK10FOqoLEd!vZW6#26SDL>L+7GHMBc_5NdE;61?b#DReU0Fs{+F#rGn diff --git a/src/img/t.webp b/src/img/t.webp deleted file mode 100644 index 2b34fe83084e7f51ed6e01bf8c9c5b3762c919ac..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 296 zcmWIYbaPW+WMBw)bqWXzu<#LKWMI(uKgcX#?y#b<Q1(mzBlX^w3)-9*I41mw4f1@- zq9nW_Lh$6#3CGvB{^W1?pR9efD|JiL=37;_mx&lL>af_QB?xyYGf0Zo^Q=p)jr}Ei zv7RmOw%H`c@83#)^Ybg7y4Bgy>Y)`lZTbJz$3re}^Shj)WS1yY)8l(gbk&0EhdZk* zcF1i~Vp@KEvC<B?u7ff)8{SMeuXFgp|LUvq8+Q3iA>mUMjvOyE>1BNoCKvo**~a5F zOdZz!%C`@giSk8HSTETS@2#)*`pDcL33fh=TO5R<{b~-yWlMdI<DMdVH1+Vex7VGU x40mU`IbM)C8+bBXVf)saYsJzhV2sn*^GzPbnfo^Ut=VgGSS~RwP56QdBLH?WgG~Sc diff --git a/src/index.html b/src/index.html index 83a0e4d..6cb5043 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,7 @@ canvas, body { margin: 0; touch-action: none; + -webkit-user-select: none; user-select: none; } canvas { diff --git a/src/js/canvas.js b/src/js/canvas.js index 6cb40fc..2cc5c38 100644 --- a/src/js/canvas.js +++ b/src/js/canvas.js @@ -51,6 +51,12 @@ class Canvas { this.ctx.lineTo(x2-this.cX, y2-this.cY); this.ctx.stroke(); } + + drawRect(x, y, w, h, c="white") { + this.ctx.fillStyle = c; + this.ctx.fillRect(x-this.cX, y-this.cY, w, h); + } + } export { Canvas }; diff --git a/src/js/game.js b/src/js/game.js index 3ebfd40..e93272e 100644 --- a/src/js/game.js +++ b/src/js/game.js @@ -18,6 +18,7 @@ let running = 1; let currentFrame = 0; let targetFrames = 60; +let runAtMonitorRefreshRate = 0; let lastFrameTime = performance.now(); @@ -87,15 +88,61 @@ loadingRoom.updateStatus = (status) => { text.render(status, 0, 0); } -const debugRoom = new Room("debug"); +const debugRoom = new Room("debug"); +debugRoom.index = 0; +debugRoom.submenu = "main"; +debugRoom.roomList = []; +debugRoom.options = { + "main": [ + {"label": "Change Room", "action": _ => {debugRoom.submenu = "changeRoom"; debugRoom.index = 0;}}, + {"label": "Change Target FPS", "action": _ => {debugRoom.submenu = "changeTargetFPS"; debugRoom.index = 0;}}, + {"label": "Unlock refresh rate", "action": _ => {runAtMonitorRefreshRate = !runAtMonitorRefreshRate;}}, + {"label": "Exit", "action": _ => {changeRoom(searchForRoom("menu"))}}, + ], + "changeRoom": [], + "changeTargetFPS": [ + {"label": "60", "action": _ => {targetFrames = 60;}}, + {"label": "30", "action": _ => {targetFrames = 30;}}, + ], +}; debugRoom.init = () => { if (!debug) changeRoom(searchForRoom("menu")); + for (let i = 0; i < rooms.length; i++) { + debugRoom.roomList.push({"label": rooms[i].name, "action": _ => {changeRoom(i);}}); + } + debugRoom.options.changeRoom = debugRoom.roomList; } + +debugRoom.keyDown = (key) => { + if (pressedLastFrame.includes(key)) return; + + const keyActions = { + ArrowUp: () => debugRoom.index--, + ArrowDown: () => debugRoom.index++, + Enter: () => debugRoom.options[debugRoom.submenu][debugRoom.index].action(), + Escape: () => {debugRoom.submenu = "main"; debugRoom.index = 0;}, + }; + + const action = keyActions[key]; + if (action) action(); + if (debugRoom.index >= debugRoom.options[debugRoom.submenu].length) debugRoom.index = 0; + if (debugRoom.index < 0) debugRoom.index = debugRoom.options[debugRoom.submenu].length-1; +} + debugRoom.draw = () => { canvas.fill("black"); + + canvas.drawRect(Math.sin(currentFrame /(canvas.width / 2)) * canvas.width - 32, canvas.height-64, 32, 32, "#222034"); } debugRoom.drawGUI = () => { + text.render("Debug Room", 0, 15); + text.render(">", 0, 20+7*(debugRoom.index + 1)); + for (let i = 0; i < debugRoom.options[debugRoom.submenu].length; i++) { + text.render(debugRoom.options[debugRoom.submenu][i].label, 8, 20+7*(i+1)); + } + debugStatuses.push("Current Frame:"+currentFrame+`(~${Math.round((currentFrame/targetFrames)*100)/100} sec)`); + debugStatuses.push(`CubePos:${Math.sin(currentFrame /(canvas.width / 2)) * canvas.width - 32}`) } const menuRoom = new Room("menu"); @@ -131,19 +178,65 @@ menuRoom.keyDown = (key) => { if (menuRoom.index >= menuRoom.options.length) menuRoom.index = 0; if (menuRoom.index < 0) menuRoom.index = menuRoom.options.length-1; } + +// The following rooms should be removed before submitting. +const testing_graphing = new Room("testing_graphing"); +testing_graphing.yScale = 10; +testing_graphing.a = 0; +testing_graphing.b = 0; +testing_graphing.c = (canvas.height/4)*testing_graphing.yScale; + +testing_graphing.keyDown = (key) => { + if (pressedLastFrame.includes(key)) return; + + const keyActions = { + ArrowUp: () => testing_graphing.a += 0.25, + ArrowDown: () => testing_graphing.a -= 0.25, + ArrowLeft: () => testing_graphing.b -= 0.25, + ArrowRight: () => testing_graphing.b += 0.25, + KeyA: () => testing_graphing.c -= 0.25, + KeyD: () => testing_graphing.c += 0.25, + }; + + const action = keyActions[key]; + if (action) action(); +} + +testing_graphing.draw = () => { + // draws a quadratic graph + // y = ax^2 + bx + c + canvas.fill("black"); + canvas.drawLine(0, canvas.height/2, canvas.width, canvas.height/2, "white"); + canvas.drawLine(canvas.width/2, 0, canvas.width/2, canvas.height, "white"); + for (let i = 0; i < canvas.width; i++) { + let x = i - canvas.width/2; + let y = (testing_graphing.a * (x**2) + testing_graphing.b * x + testing_graphing.c) / testing_graphing.yScale; + canvas.drawRect(i, canvas.height/2 - y, 1, 1, "white"); + } +} + +testing_graphing.drawGUI = () => { + text.render(`y = ${testing_graphing.a}x^2 + ${testing_graphing.b}x + ${testing_graphing.c}`, 0, 0); +} + rooms.push(loadingRoom); rooms.push(menuRoom); rooms.push(debugRoom); +// REMOVE THESE +rooms.push(testing_graphing); + currentRoom = rooms[roomIndex]; + + let main = () => { // main game loop if (!running) return; requestAnimationFrame(main); + let now = performance.now(); let delta = now - lastFrameTime; - - if (delta < 1000 / targetFrames) return; + if (!runAtMonitorRefreshRate && delta < 1000 / targetFrames) return; currentFrame++; debugStatuses = []; @@ -163,7 +256,7 @@ let main = () => { // main game loop pressedLastFrame = currentKeys; if (debug) { - text.render("FPS:" + Math.round(1000 / delta), 0, 0); + text.render(`${Math.round(1000 / delta)}/${targetFrames}FPS`, 0, 0); text.render(currentRoom.name, canvas.width-(text.charWidth*(currentRoom.name.length)), 0); debugStatuses.push("Debug mode"); diff --git a/src/js/utils.js b/src/js/utils.js index 9f6bcc2..6e00082 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -6,3 +6,5 @@ export const pi = Math.PI; export const getParameter = key => key ? params.get(key) : 0; export const hash = _ => window.location.hash; export const setHash = string => window.location.hash = string; + + -- GitLab