Skip to content

Commit

Permalink
added custom cursor
Browse files Browse the repository at this point in the history
  • Loading branch information
@plastikup
plastikup committed May 13, 2024
1 parent 2a28a51 commit a96442c
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 24 deletions.
Binary file added assets/fancyCursor.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions game.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
body {
margin: 0;
background-color: #fff;

cursor: none;
}

canvas {
Expand Down
67 changes: 43 additions & 24 deletions scripts/ui.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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;
}

Expand All @@ -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);
Expand Down

0 comments on commit a96442c

Please sign in to comment.