From a96442cae7d0e1439b95ead97febd56d8dc0d7f4 Mon Sep 17 00:00:00 2001 From: plastikup Date: Mon, 13 May 2024 17:49:54 -0400 Subject: [PATCH] added custom cursor --- assets/fancyCursor.png | Bin 0 -> 24330 bytes game.js | 18 +++++++++++ index.html | 2 ++ scripts/ui.js | 67 ++++++++++++++++++++++++++--------------- 4 files changed, 63 insertions(+), 24 deletions(-) create mode 100644 assets/fancyCursor.png diff --git a/assets/fancyCursor.png b/assets/fancyCursor.png new file mode 100644 index 0000000000000000000000000000000000000000..506a2fe50a2c241172749fed33e0e83cd9a2fa44 GIT binary patch literal 24330 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 literal 0 HcmV?d00001 diff --git a/game.js b/game.js index b5714af..52a2c7c 100644 --- a/game.js +++ b/game.js @@ -1,6 +1,9 @@ +console.clear(); + import { Sandbox } from './scripts/sandbox.js'; import { Snake } from './scripts/snake.js'; import { Ui } from './scripts/ui.js'; +import { canvas, canvasSize, ctx } from './scripts/canvasConfig.js'; /* GLOB VARIABLES */ let allLevelsJson; @@ -79,6 +82,18 @@ document.addEventListener('keyup', function (event) { } }); +/* CURSOR */ +const mouse = { + x: canvasSize / 2, + y: canvasSize / 2, +}; +const mouseImg = new Image(); +mouseImg.src = './assets/fancyCursor.png'; +canvas.addEventListener('mousemove', function (event) { + mouse.x = event.offsetX; + mouse.y = event.offsetY; +}); + /* GAME */ export const GAME_STATES = { intro: 'intro', @@ -115,6 +130,9 @@ function loop() { break; } + //* draw the mouse + ctx.drawImage(mouseImg, mouse.x, mouse.y, (canvasSize * 158) / 4800, (canvasSize * 254) / 4800); + //* for debug purposes only window.selfVars = { snake: snake, diff --git a/index.html b/index.html index 52aa395..cfcb808 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,8 @@ body { margin: 0; background-color: #fff; + + cursor: none; } canvas { diff --git a/scripts/ui.js b/scripts/ui.js index 2f48f14..50cdd67 100644 --- a/scripts/ui.js +++ b/scripts/ui.js @@ -1,22 +1,35 @@ import { GAME_STATES, themeJson } from '../game.js'; -import { ctx, canvasSize, gameFont } from './canvasConfig.js'; +import { ctx, canvasSize, gameFont, canvas } from './canvasConfig.js'; import { SANDBOX_MARGIN } from './sandbox.js'; import { drawCell } from './drawCell.js'; export class Ui { - static gui; + static gui = {}; static loop(currentGameState, currentLevel, snake, swipes, biscuits, swipesRequired) { switch (currentGameState) { case GAME_STATES.intro: { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvasSize, canvasSize); - + + const yShift = canvasSize / 12; + //* title - ctx.font = '30px ' + gameFont; + ctx.font = '64px ' + gameFont; + ctx.fillStyle = themeJson.secondary; + const title1Msmnt = measureText('-a-'); + ctx.fillText('-a-', canvasSize / 2 - title1Msmnt.w / 2, canvasSize / 4 + title1Msmnt.h / 2 + yShift); ctx.fillStyle = themeJson.primary; - const titleMeasurement = measureText('Swipe-a-Snake'); - ctx.fillText('Swipe-a-Snake', canvasSize / 2 - titleMeasurement.w / 2, SANDBOX_MARGIN / 2 + 4); + const title2Msmnt = measureText('swipe'); + ctx.fillText('swipe', canvasSize / 2 - title2Msmnt.w / 2, canvasSize / 4 + title2Msmnt.h / 2 - title1Msmnt.h + yShift); + const title3Msmnt = measureText('snake'); + ctx.fillText('snake', canvasSize / 2 - title3Msmnt.w / 2, canvasSize / 4 + title3Msmnt.h / 2 + title1Msmnt.h + yShift); + + //* buttons + const buttonHeight = ((Ui.gui.play.height / Ui.gui.play.width) * canvasSize) / 3; + ctx.drawImage(Ui.gui.play, canvasSize / 2 - canvasSize / 6, canvasSize / 2 + yShift, canvasSize / 3, buttonHeight); + ctx.drawImage(Ui.gui.levelSelect, canvasSize / 2 - canvasSize / 6 - buttonHeight * 1.25, canvasSize / 2 + yShift, buttonHeight, buttonHeight); + ctx.drawImage(Ui.gui.soundOff, canvasSize / 2 + buttonHeight * 1.25, canvasSize / 2 + yShift, buttonHeight, buttonHeight); break; } @@ -40,44 +53,44 @@ export class Ui { //* level ctx.font = '16px ' + gameFont; ctx.fillStyle = themeJson.secondary; - const levelMeasurement = measureText('level ' + currentLevel); - ctx.fillText('level ' + currentLevel, canvasSize / 2 - levelMeasurement.w / 2, SANDBOX_MARGIN / 2 + levelMeasurement.h + 8); + const levelMsmnt = measureText('level ' + currentLevel); + ctx.fillText('level ' + currentLevel, canvasSize / 2 - levelMsmnt.w / 2, SANDBOX_MARGIN / 2 + levelMsmnt.h + 8); //* title ctx.font = '30px ' + gameFont; ctx.fillStyle = themeJson.primary; - const titleMeasurement = measureText('Swipe-a-Snake'); - ctx.fillText('Swipe-a-Snake', canvasSize / 2 - titleMeasurement.w / 2, SANDBOX_MARGIN / 2 + 4); + const titleMsmnt = measureText('Swipe-a-Snake'); + ctx.fillText('Swipe-a-Snake', canvasSize / 2 - titleMsmnt.w / 2, SANDBOX_MARGIN / 2 + 4); //* biscuits drawCell(canvasSize - 28, 28, 32, 'b', true); ctx.font = '24px ' + gameFont; ctx.fillStyle = themeJson.cookie; - const biscuitMeasurement = measureText(biscuits); - ctx.fillText(biscuits, canvasSize - 44 - biscuitMeasurement.w - 4, biscuitMeasurement.h / 2 + 28); + const biscuitMsmnt = measureText(biscuits); + ctx.fillText(biscuits, canvasSize - 44 - biscuitMsmnt.w - 4, biscuitMsmnt.h / 2 + 28); //* bottom stats ctx.font = '16px ' + gameFont; ctx.fillStyle = themeJson.primary; // swipes - const swipesDescriptionMeasurement = measureText('swipes'); - const swipesDatumMeasurement = measureText(swipes); + const swipesDescriptionMsmnt = measureText('swipes'); + const swipesDatumMsmnt = measureText(swipes); // growth - const growthDescriptionMeasurement = measureText('growth'); - const growthDatumMeasurement = measureText(snake.snakeJson.length); + const growthDescriptionMsmnt = measureText('growth'); + const growthDatumMsmnt = measureText(snake.snakeJson.length); // swipes required - const solvableDescriptionMeasurement = measureText('solvable in'); - const solvableDatumMeasurement = measureText(swipesRequired + ' moves'); + const solvableDescriptionMsmnt = measureText('solvable in'); + const solvableDatumMsmnt = measureText(swipesRequired + ' moves'); // calcs - const evenSpacing = (canvasSize - (swipesDescriptionMeasurement.w + growthDescriptionMeasurement.w + solvableDescriptionMeasurement.w)) / 4; + const evenSpacing = (canvasSize - (swipesDescriptionMsmnt.w + growthDescriptionMsmnt.w + solvableDescriptionMsmnt.w)) / 4; // draw ctx.fillText('swipes', evenSpacing, canvasSize - SANDBOX_MARGIN / 2 - 4); - ctx.fillText(swipes, evenSpacing + swipesDescriptionMeasurement.w / 2 - swipesDatumMeasurement.w / 2, canvasSize - SANDBOX_MARGIN / 2 + swipesDatumMeasurement.h + 4); - ctx.fillText('growth', swipesDescriptionMeasurement.w + 2 * evenSpacing, canvasSize - SANDBOX_MARGIN / 2 - 4); - ctx.fillText(snake.snakeJson.length, swipesDescriptionMeasurement.w + 2 * evenSpacing + growthDescriptionMeasurement.w / 2 - growthDatumMeasurement.w / 2, canvasSize - SANDBOX_MARGIN / 2 + growthDatumMeasurement.h + 4); + ctx.fillText(swipes, evenSpacing + swipesDescriptionMsmnt.w / 2 - swipesDatumMsmnt.w / 2, canvasSize - SANDBOX_MARGIN / 2 + swipesDatumMsmnt.h + 4); + ctx.fillText('growth', swipesDescriptionMsmnt.w + 2 * evenSpacing, canvasSize - SANDBOX_MARGIN / 2 - 4); + ctx.fillText(snake.snakeJson.length, swipesDescriptionMsmnt.w + 2 * evenSpacing + growthDescriptionMsmnt.w / 2 - growthDatumMsmnt.w / 2, canvasSize - SANDBOX_MARGIN / 2 + growthDatumMsmnt.h + 4); ctx.fillStyle = themeJson.secondary; - ctx.fillText('solvable in', swipesDescriptionMeasurement.w + growthDescriptionMeasurement.w + 3 * evenSpacing, canvasSize - SANDBOX_MARGIN / 2 - 4); - ctx.fillText(swipesRequired + ' moves', swipesDescriptionMeasurement.w + growthDescriptionMeasurement.w + 3 * evenSpacing + solvableDescriptionMeasurement.w / 2 - solvableDatumMeasurement.w / 2, canvasSize - SANDBOX_MARGIN / 2 + solvableDatumMeasurement.h + 4); + ctx.fillText('solvable in', swipesDescriptionMsmnt.w + growthDescriptionMsmnt.w + 3 * evenSpacing, canvasSize - SANDBOX_MARGIN / 2 - 4); + ctx.fillText(swipesRequired + ' moves', swipesDescriptionMsmnt.w + growthDescriptionMsmnt.w + 3 * evenSpacing + solvableDescriptionMsmnt.w / 2 - solvableDatumMsmnt.w / 2, canvasSize - SANDBOX_MARGIN / 2 + solvableDatumMsmnt.h + 4); break; } @@ -86,6 +99,12 @@ export class Ui { } } } +Ui.gui.play = new Image(); +Ui.gui.play.src = '../assets/GUI/Buttons/Rect/PlayText/Default.png'; +Ui.gui.levelSelect = new Image(); +Ui.gui.levelSelect.src = '../assets/GUI/Buttons/Square/Levels/Default.png'; +Ui.gui.soundOff = new Image(); +Ui.gui.soundOff.src = '../assets/GUI/Buttons/Square/SoundOff/Default.png'; const measureText = (text) => { const metrics = ctx.measureText(text);