body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
canvas { border: 1px solid #000; }
// Variables for the game
const doodle = document.getElementById('doodle');
const scribble = doodle.getContext('2d');
const wibble = 20; // Size of each segment
let wobble = []; // Snake segments
let gobble = { x: wibble * 5, y: wibble * 5 }; // Food
// Initial snake
const dribble = 5;
for (let i = 0; i < dribble; i++) {
wobble.push({ x: wibble * (dribble - i), y: wibble });
}
// Direction
let nibble = { x: wibble, y: 0 };
// Function to draw the snake
function scribbles() {
scribble.clearRect(0, 0, doodle.width, doodle.height);
scribble.fillStyle = 'green';
for (let segment of wobble) {
scribble.fillRect(segment.x, segment.y, wibble, wibble);
}
scribble.fillStyle = 'red';
scribble.fillRect(gobble.x, gobble.y, wibble, wibble);
}
// Function to move the snake
function quibble() {
const squabble = { x: wobble[0].x + nibble.x, y: wobble[0].y + nibble.y };
wobble.unshift(squabble);
if (squabble.x === gobble.x && squabble.y === gobble.y) {
gobble.x = Math.floor(Math.random() * (doodle.width / wibble)) * wibble;
gobble.y = Math.floor(Math.random() * (doodle.height / wibble)) * wibble;
} else {
wobble.pop();
}
}
// Function to change direction
function babble(event) {
switch (event.key) {
case 'ArrowUp':
if (nibble.y === 0) nibble = { x: 0, y: -wibble };
break;
case 'ArrowDown':
if (nibble.y === 0) nibble = { x: 0, y: wibble };
break;
case 'ArrowLeft':
if (nibble.x === 0) nibble = { x: -wibble, y: 0 };
break;
case 'ArrowRight':
if (nibble.x === 0) nibble = { x: wibble, y: 0 };
break;
}
}
// Game Loop
function wiffle() {
quibble();
scribbles();
setTimeout(wiffle, 100);
}
document.addEventListener('keydown', babble);
wiffle();