Question 259998 in Html Question posted in
Some basic documentation can be found here.

html/css canvas width/height handling

i’m trying to code snake as a browsergame in javascript for a school project and i want to do it with an external .js file – not just in the .html.
my problem now is: when i call the main function in my html body, only the canvas gets modified by my script, not the snakeparts.

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Snake - The Browser Game</title>
    </head>
    <body onload='main()'>
        <canvas id="gameCanvas">
            
        </canvas>
    <script type="text/javascript" src="snake.js"></script>
    </body>
</html>

style.css:

#gameCanvas {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

snake.js:

const board_border = 'black';
const board_background = "white";
const snake_col = 'lightblue';
const snake_border = 'darkblue';

const snakeboard = document.getElementById('gameCanvas');
const snakeboard_ctx = gameCanvas.getContext('2d');

let snake = [{x: 200, y: 200}, {x: 190, y: 200}, {x: 180, y: 200}, {x: 170, y: 200}, {x: 160, y: 200}]

function main(){
    clearCanvas();
    drawSnake();
}

function clearCanvas(){
    snakeboard_ctx.fillStyle = board_background;
    snakeboard_ctx.strokestyle = board_border;
    snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
    snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
}

function drawSnake(){
   snake.forEach(drawSnakeparts);
}

function drawSnakeparts(snakePart){
    snakeboard.fillStyle = snake_col;
    snakeboard.strokeStyle = snake_border;
    snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);  
    snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

i’m fairly new to all that stuff, couldn’t find the answer after a lot of googling and asking gpt…

Tags:

2

Answers


  1. 0

    Your entire snake is out of canvas, because your canvas is 300×150

    You have to change canvas width and height through attributes

    Changing styles will only stretch the current pixels

    const board_border = 'black';
const board_background = "white";
const snake_col = 'lightblue';
const snake_border = 'darkblue';

const snakeboard = document.getElementById('gameCanvas');
const snakeboard_ctx = gameCanvas.getContext('2d');

let snake = [{
  x: 200,
  y: 200
}, {
  x: 190,
  y: 200
}, {
  x: 180,
  y: 200
}, {
  x: 170,
  y: 200
}, {
  x: 160,
  y: 200
}]

main()

function main() {
  clearCanvas();
  drawSnake();
}

function clearCanvas() {
  snakeboard_ctx.fillStyle = board_background;
  snakeboard_ctx.strokestyle = board_border;
  snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
  snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
}

function drawSnake() {
  snake.forEach(drawSnakeparts);
}

function drawSnakeparts(snakePart) {
  snakeboard.fillStyle = snake_col;
  snakeboard.strokeStyle = snake_border;
  snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
    #gameCanvas {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <canvas id="gameCanvas" height="400" width="400"></canvas>
    Login or Signup to reply.
  2. 0

    You need to set the width/height of the canvas. If you do not specify them, the default is 300×150. And since your snake is positioned at y:200 it is out of the visible area.

    Read HTMLCanvasElement: width property and HTMLCanvasElement: height property

    Use

    <canvas id="gameCanvas" width="400" height="400">
</canvas>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search