Back

Version 4

12/18/2024
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function SnakeGame() {
const canvasRef = useRef(null);
const [gameState, setGameState] = useState({
score: 0,
gameOver: false,
gameStarted: false
});

useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
// Enhanced game constants
const gridSize = 25; // Slightly larger grid
const tileCount = 20;
canvas.width = canvas.height = gridSize * tileCount;

// Background gradient
const backgroundGradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
backgroundGradient.addColorStop(0, '#1a2a3a');
backgroundGradient.addColorStop(1, '#0c1525');

// Snake initial state with more sophisticated design
let snake = [
{ x: 10 * gridSize, y: 10 * gridSize }
];
let dx = gridSize;
let dy = 0;
let food = generateFood();
let score = 0;
let gameOver = false;
let gameStarted = false;
vadergit-cerebras_coder.web.val.run
Updated: December 18, 2024