akshay-js / azure-aks

Hi 👋, I'm Akshay

A passionate fullstack developer from India

Connect with me:

Languages and Tools:

 

azure-aks's Issues

Test

Import React, { useState, useEffect, useCallback } from 'react';
import './SnakeGame.css';

function SnakeGame() {
  const gridSize = 20;
  const initialSnake = [{ x: 5, y: 5 }];
  const [snake, setSnake] = useState(initialSnake);
  const [food, setFood] = useState(generateFood());
  const [direction, setDirection] = useState('right');
  const [score, setScore] = useState(0);
  const [gameOver, setGameOver] = useState(false);

  function generateFood() {
    const x = Math.floor(Math.random() * gridSize);
    const y = Math.floor(Math.random() * gridSize);
    return { x, y };
  }

  const handleKeyPress = useCallback((event) => {
    switch (event.key) {
      case 'ArrowUp':
        setDirection('up');
        break;
      case 'ArrowDown':
        setDirection('down');
        break;
      case 'ArrowLeft':
        setDirection('left');
        break;
      case 'ArrowRight':
        setDirection('right');
        break;
      default:
        break;
    }
  }, []);

  const moveSnake = () => {
    const newHead = { ...snake[0] };

    switch (direction) {
      case 'up':
        newHead.y -= 1;
        break;
      case 'down':
        newHead.y += 1;
        break;
      case 'left':
        newHead.x -= 1;
        break;
      case 'right':
        newHead.x += 1;
        break;
      default:
        break;
    }

    const newSnake = [newHead, ...snake.slice(0, -1)];
    setSnake(newSnake);
  };

  useEffect(() => {
    window.addEventListener('keydown', handleKeyPress);

    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, [handleKeyPress]);

  useEffect(() => {
    const gameInterval = setInterval(() => {
      if (!gameOver) {
        moveSnake();
      }
    }, 100);

    return () => {
      clearInterval(gameInterval);
    };
  }, [gameOver]);

  useEffect(() => {
    const checkCollision = () => {
      const head = snake[0];

      // Check collision with walls
      if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) {
        setGameOver(true);
        return;
      }

      // Check collision with itself
      for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
          setGameOver(true);
          return;
        }
      }

      // Check collision with food
      if (head.x === food.x && head.y === food.y) {
        setScore(score + 1);
        setFood(generateFood());

        // Extend the snake
        const newSnake = [...snake];
        newSnake.unshift({});
        setSnake(newSnake);
      }
    };

    checkCollision();
  }, [snake, food, score]);

  return (
    <div className="snake-game">
      <div className="game-board">
        {Array.from({ length: gridSize }).map((_, y) => (
          <div className="row" key={y}>
            {Array.from({ length: gridSize }).map((_, x) => (
              <div
                className={`cell ${
                  snake.some((segment) => segment.x === x && segment.y === y)
                    ? 'snake'
                    : food.x === x && food.y === y
                    ? 'food'
                    : ''
                }`}
                key={x}
              ></div>
            ))}
          </div>
        ))}
      </div>
      <div className="game-info">
        <div className="score">Score: {score}</div>
        {gameOver && <div className="game-over-message">Game Over!</div>}
      </div>
    </div>
  );
}

export default SnakeGame;




/* Styles for the main game container */
.snake-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #111;
  font-family: Arial, sans-serif;
  color: #fff;
}

/* Styles for the game board container */
.game-board {
  display: grid;
  grid-template-columns: repeat(20, 20px); /* Adjust grid size as needed */
  gap: 1px;
  background-color: #222;
  border: 2px solid #333;
  border-radius: 5px;
  padding: 10px;
}

/* Styles for each row in the game board */
.row {
  display: flex;
  flex-direction: row;
}

/* Styles for individual cells in the game board */
.cell {
  width: 20px;
  height: 20px;
  background-color: #222;
}

/* Style for the snake's body */
.cell.snake {
  background-color: #00cc00;
  border-radius: 50%; /* Make the snake cells round */
}

/* Style for the food item */
.cell.food {
  background-color: #ff6600;
  border-radius: 50%; /* Make the food item round */
}

/* Styles for game information */
.game-info {
  margin-top: 20px;
  text-align: center;
}

/* Style for the score display */
.score {
  font-size: 24px;
}

/* Style for the game over message */
.game-over-message {
  color: #ff0000;
  font-size: 36px;
  font-weight: bold;
  margin-top: 20px;
}