Joho da Cobrinha fácil's game

Click here for free DL of the app version that can save data.

No:52058

236

←

Prev Next

→

Joho da Cobrinha fácil
Developer User19080｜Date and time 24/3/17 13:50:51
Build time 7.325 sec｜Game capacity 2.398KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Jogo da Cobrinha</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  document.body.appendChild(canvas);

canvas.width = 400;
  canvas.height = 400;

const blockSize = 10;
  const snake = {
    x: 10,
    y: 10,
    dx: 0,
    dy: 0,
    body: [
      {x: 10, y: 10},
      {x: 10, y: 20},
      {x: 10, y: 30}
    ]
  };

let food = {
    x: Math.floor(Math.random() * 39) * blockSize,
    y: Math.floor(Math.random() * 39) * blockSize
  };

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'green';
    ctx.fillRect(snake.x, snake.y, blockSize, blockSize);

ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, blockSize, blockSize);

snake.body.forEach(segment => {
      ctx.fillRect(segment.x, segment.y, blockSize, blockSize);
    });
  }

function update() {
    snake.x += snake.dx * blockSize;
    snake.y += snake.dy * blockSize;

if (snake.x < 0) snake.x = canvas.width - blockSize;
    if (snake.x >= canvas.width) snake.x = 0;
    if (snake.y < 0) snake.y = canvas.height - blockSize;
    if (snake.y >= canvas.height) snake.y = 0;

const head = {x: snake.x, y: snake.y};
    snake.body.unshift(head);

if (snake.x === food.x && snake.y === food.y) {
      food.x = Math.floor(Math.random() * 39) * blockSize;
      food.y = Math.floor(Math.random() * 39) * blockSize;
    } else {
      snake.body.pop();
    }
  }

function loop() {
    update();
    draw();
    setTimeout(() => requestAnimationFrame(loop), 100);
  }

loop();