Web Bae•9mo ago

Mobile Terminal Based Snake Game

Hey everyone! I've built out this terminal in webflow on my website https://corsetti.dev If you type in the command snake you can play snake in the terminal. My problem comes in on mobile, I've got the touch controls working correctly and I know you can't exit the game yet, but my grid just doesn't seem to be adjusting correctly

  function calculateGridSize(canvasWidth, canvasHeight) {
    const maxGridSize = 20; // Maximum grid size you'd like to use
    const minGridSize = 10; // Minimum grid size you find acceptable
    let idealGridSize = Math.min(canvasWidth, canvasHeight) / 25; // Example calculation

    // Clamp the grid size between minGridSize and maxGridSize
    idealGridSize = Math.max(minGridSize, Math.min(maxGridSize, idealGridSize));

    // Ensure the grid size is a whole number
    idealGridSize = Math.floor(idealGridSize);

    // Adjust canvas size to fit an exact number of grids
    canvas.width = Math.floor(canvas.width / idealGridSize) * idealGridSize;
    canvas.height = Math.floor(canvas.height / idealGridSize) * idealGridSize;

    return idealGridSize;
  }

  function calculateGridSize(canvasWidth, canvasHeight) {
    const maxGridSize = 20; // Maximum grid size you'd like to use
    const minGridSize = 10; // Minimum grid size you find acceptable
    let idealGridSize = Math.min(canvasWidth, canvasHeight) / 25; // Example calculation

    // Clamp the grid size between minGridSize and maxGridSize
    idealGridSize = Math.max(minGridSize, Math.min(maxGridSize, idealGridSize));

    // Ensure the grid size is a whole number
    idealGridSize = Math.floor(idealGridSize);

    // Adjust canvas size to fit an exact number of grids
    canvas.width = Math.floor(canvas.width / idealGridSize) * idealGridSize;
    canvas.height = Math.floor(canvas.height / idealGridSize) * idealGridSize;

    return idealGridSize;
  }

this is my function to calculate the grid size, and I thought I could get the results I wanted by manipulating the values but I'm just really spinning my wheels at this point Whole repo is on github if you want to check it out https://github.com/corsettiDev/personal-terminal

corsettiDev

Patrick Corsetti is a Web & Webflow Developer based in Ontario, Canada. Reach out to collaborate on your next project together.

GitHub

GitHub - corsettiDev/personal-terminal: Terminal functionality on p...

Terminal functionality on personal webflow site. Contribute to corsettiDev/personal-terminal development by creating an account on GitHub.

2 Replies

Web Bae•9mo ago

Love this! Just played nd it’s so cool. I think the issue is in the second to last line where you set canvas.height. You set it using canvas.height as in input, but I think you shouldn’t. I would approach this by calculating the number of cells you want to fit in the width. I.e. if you want 25 cells, divide the canvaswidth by 25 to get the width of each cell. Since you want a perfect square, the height of the cell will equal the width. So divide the canvas height by the size you calculated in previous step to get number of cells you need to render. Am I correct in assuming that the number of cells is constant? Or do you want more cells for larger screens? Also you could maybe refactor this to be “more pure” by setting the canvas width and height outside of the function since this return a value. Not necessary but as the codebase grows you might lose track of the side effect here

AtomicZBRAOP•9mo ago

Haha glad that you liked it!! I did want it to change with the viewport so that it’s always the same size as the terminal window! But I was actually thinking of swapping the width and height declarations if the canvas height is larger than the width I think I had to move the canvas size declarations out of the function anyways because I want to add other games, but also have an event listener for resizing the canvas element that applies to all games

Gaming

Programming

Mobile Terminal Based Snake Game