Copy Default Code

#mobileControls button {
padding: 10px;
font-size: 18px;
font-family: 'PixelFont', sans-serif;
}
</style>

<div id="gameContainer">
<div id="score">Score: 0</div>
<canvas id="gameCanvas"></canvas>
<button id="startButton">START</button>
</div>

function updateColor(element, color) {
switch (element) {
case 'canvasColor':
canvasColor = color;
document.getElementById('gameContainer').style.backgroundColor = color;
break;
case 'snakeColor':
snakeColor = color;
break;
case 'foodColor':
foodColor = color;
break;
case 'borderColor':
borderColor = color;
document.getElementById('gameContainer').style.borderColor = color;
break;
}
draw();
saveColors(); // Call saveColors after updating colors
}

function saveColors() {
const canvasWidth = document.getElementById('canvasWidth').value || canvas.style.width;
const canvasHeight = document.getElementById('canvasHeight').value || canvas.style.height;

const trimmedCss = css.trim();
document.getElementById('add-css').value = trimmedCss;
document.getElementById('add-css-export').innerHTML = trimmedCss;
}

function updateCanvasSize() {
const canvasWidth = document.getElementById('canvasWidth').value;
const canvasHeight = document.getElementById('canvasHeight').value;

if (canvasWidth) {
canvas.style.width = canvasWidth;
}
if (canvasHeight) {
canvas.style.height = canvasHeight;
}
canvas.width = Math.max(canvas.offsetWidth, 500);
canvas.height = Math.max(canvas.offsetHeight, 500);
draw(); // Redraw the canvas with the new size
}

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const grid = 20;
let count = 0;
let snake = {
x: 160,
y: 160,
dx: grid,
dy: 0,
cells: [],
maxCells: 4
};
let food = {
x: 320,
y: 320
};
let score = 0;
let gameStarted = false;

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

function resetGame() {
snake.x = 160;
snake.y = 160;
snake.dx = grid;
snake.dy = 0;
snake.cells = [];
snake.maxCells = 4;
score = 0;
document.getElementById('score').innerText = `Score: ${score}`;
food.x = getRandomInt(0, 25) * grid;
food.y = getRandomInt(0, 25) * grid;
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = canvasColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = snakeColor;
snake.cells.forEach(function(cell, index) {
ctx.fillRect(cell.x, cell.y, grid - 1, grid - 1);
if (cell.x === food.x && cell.y === food.y) {
snake.maxCells++;
score++;
document.getElementById('score').innerText = `Score: ${score}`;
food.x = getRandomInt(0, 25) * grid;
food.y = getRandomInt(0, 25) * grid;
}
for (let i = index + 1; i < snake.cells.length; i++) {
if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
resetGame();
}
}
});

ctx.fillStyle = foodColor;
ctx.fillRect(food.x, food.y, grid - 1, grid - 1);
}

function update() {
if (!gameStarted) return;

if (count++ < 4) {
requestAnimationFrame(update);
return;
}
count = 0;
snake.x += snake.dx;
snake.y += snake.dy;
if (snake.x < 0) {
snake.x = canvas.width - grid;
} else if (snake.x >= canvas.width) {
snake.x = 0;
}
if (snake.y < 0) {
snake.y = canvas.height - grid;
} else if (snake.y >= canvas.height) {
snake.y = 0;
}
snake.cells.unshift({ x: snake.x, y: snake.y });
if (snake.cells.length > snake.maxCells) {
snake.cells.pop();
}
draw();
requestAnimationFrame(update);
}

const startButton = document.getElementById('startButton');
startButton.addEventListener('click', () => {
gameStarted = true;
startButton.style.display = 'none';
resetGame();
update();
});

canvas.width = Math.max(canvas.offsetWidth, 500);
canvas.height = Math.max(canvas.offsetHeight, 500);
draw(); // Initial draw to reflect default size
</script>

‍

Copy CUSTOM Code