kunjgit · MohanaSrinivas · Aug 2, 2023 · May 17, 2024 · May 17, 2024 · May 17, 2024
diff --git a/Games/AlphabetClicker.html b/Games/AlphabetClicker.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alphabet Clicker</title>
+    <link rel="stylesheet" href="Alphabetclicker.css">
+</head>
+<body>
+    <div id="game-container">
+        <h1>Alphabet Clicker</h1>
+        <p>Click on all the "A" letters to score points!</p>
+        <div id="letters-container"></div>
+        <div id="score-container">Score: <span id="score">0</span></div>
+        <button id="start-button">Start Game</button>
+    </div>
+    <script src="Alphabetclicker.js"></script>
+</body>
+</html>
diff --git a/Games/Alphabetclicker.css b/Games/Alphabetclicker.css
@@ -0,0 +1,57 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #f0f8ff;
+    margin: 0;
+    padding: 0;
+}
+
+#game-container {
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    background-color: #fff;
+}
+
+#letters-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 20px 0;
+}
+
+.letter {
+    font-size: 24px;
+    margin: 10px;
+    padding: 10px;
+    border: 2px solid #333;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.letter:hover {
+    background-color: #f0e68c;
+}
+
+#score-container {
+    font-size: 20px;
+    margin: 20px 0;
+}
+
+#start-button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+#start-button:hover {
+    background-color: #45a049;
+}
diff --git a/Games/Alphabetclicker.js b/Games/Alphabetclicker.js
@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const lettersContainer = document.getElementById('letters-container');
+    const scoreElement = document.getElementById('score');
+    const startButton = document.getElementById('start-button');
+    let score = 0;
+
+    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+    function generateLetters() {
+        lettersContainer.innerHTML = '';
+        for (let i = 0; i < 30; i++) {
+            const letter = document.createElement('div');
+            letter.classList.add('letter');
+            const randomLetter = alphabet[Math.floor(Math.random() * alphabet.length)];
+            letter.textContent = randomLetter;
+            letter.addEventListener('click', () => {
+                if (randomLetter === 'A') {
+                    score++;
+                    scoreElement.textContent = score;
+                    letter.style.visibility = 'hidden';
+                }
+            });
+            lettersContainer.appendChild(letter);
+        }
+    }
+
+    startButton.addEventListener('click', () => {
+        score = 0;
+        scoreElement.textContent = score;
+        generateLetters();
+    });
+});
diff --git a/Games/Readme.Md b/Games/Readme.Md
@@ -0,0 +1,56 @@
+# Alphabet Clicker
+
+Alphabet Clicker is a simple web-based game where players click on all instances of the letter "A" to score points. It's built using HTML, CSS, and JavaScript, and it's a fun and educational way to practice letter recognition.
+
+## Table of Contents
+
+- [Demo](#demo)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Demo
+
+Check out the game in action [here](#). (You can upload your game to a platform like GitHub Pages and provide the link here.)
+
+## Features
+
+- Simple and intuitive interface
+- Randomly generated letters
+- Click on the letter "A" to score points
+- Real-time score updates
+- Responsive design
+
+## Installation
+
+To set up the game locally on your machine, follow these steps:
+
+1. **Clone the repository:**
+    ```sh
+    git clone https://github.com/your-username/alphabet-clicker.git
+    ```
+
+2. **Navigate to the project directory:**
+    ```sh
+    cd alphabet-clicker
+    ```
+
+3. **Open `index.html` in your web browser:**
+    ```sh
+    open index.html
+    ```
+    Or, you can simply double-click the `index.html` file to open it in your default browser.
+
+## Usage
+
+1. **Start the game:**
+   - Click the "Start Game" button to generate a new set of letters.
+
+2. **Play the game:**
+   - Click on all the letter "A"s you find to increase your score.
+   - The score will update in real-time as you click the letters.
+
+3. **Reset the game:**
+   - Click the "Start Game" button again to reset the score and generate a new set of letters.
diff --git a/Games/index.html b/Games/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alphabet Clicker</title>
+    <link rel="stylesheet" href="Alphabetclicker.css">
+</head>
+<body>
+    <div id="game-container">
+        <h1>Alphabet Clicker</h1>
+        <p>Click on all the "A" letters to score points!</p>
+        <div id="letters-container"></div>
+        <div id="score-container">Score: <span id="score">0</span></div>
+        <button id="start-button">Start Game</button>
+    </div>
+    <script src="Alphabetclicker.js"></script>
+</body>
+</html>
diff --git a/Games/snake and apple/Readme.md b/Games/snake and apple/Readme.md
@@ -0,0 +1,29 @@
+# Snake and Apple Game
+
+![Snake and Apple Game](screenshot.png)
+
+Snake and Apple is a classic arcade-style game where the player controls a snake that moves around the screen to eat apples and grow longer. The game ends if the snake collides with the screen boundaries or itself.
+
+## How to Play
+
+1. Use the arrow keys (up, down, left, right) to control the snake's movement.
+2. The snake will move continuously in the direction indicated by the arrow keys.
+3. Your goal is to eat the red apples (represented by red squares) that appear on the screen.
+4. Each time the snake eats an apple, it will grow longer.
+5. The game ends if the snake collides with the screen boundaries or itself.
+
+## Getting Started
+
+To play the Snake and Apple Game, follow these steps:
+
+1. Clone the repository or download the ZIP file.
+2. Open the `index.html` file in your web browser.
+3. Use the arrow keys to control the snake's movement.
+4. Eat the red apples to grow longer and increase your score.
+5. Avoid colliding with the screen boundaries or the snake's body.
+
+## Contributing
+
+Contributions are welcome! If you find any issues or have ideas for improvements, please open an issue or submit a pull request.
+
+
diff --git a/Games/snake and apple/index.html b/Games/snake and apple/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Snake and Apple Game</title>
+  <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+  <h1><font size="8px" face="impact" color="red">Snake and Apple Game</font></h1>
+  <div class="game-container">
+    <div class="snake" id="snakeHead"></div>
+    <div class="apple" id="apple"></div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/snake and apple/script.js b/Games/snake and apple/script.js
@@ -0,0 +1,92 @@
+const gameContainer = document.querySelector(".game-container");
+const snakeHead = document.getElementById("snakeHead");
+const apple = document.getElementById("apple");
+
+const gridSize = 50;
+const cellSize = gameContainer.clientWidth / gridSize;
+
+let snake = [{ x: 2, y: 2 }];
+let direction = { x: 1, y: 0 };
+let applePosition = { x: 5, y: 5 };
+
+// Function to update the snake's position and check for collisions
+function updateGame() {
+  const nextX = snake[0].x + direction.x;
+  const nextY = snake[0].y + direction.y;
+
+  if (nextX < 0 || nextX >= gridSize || nextY < 0 || nextY >= gridSize) {
+    // Snake collided with the screen boundaries
+    gameOver();
+    return;
+  }
+
+  if (snake.some(segment => segment.x === nextX && segment.y === nextY)) {
+    // Snake collided with itself
+    gameOver();
+    return;
+  }
+
+  const newHead = { x: nextX, y: nextY };
+  snake.unshift(newHead);
+
+  // Check if the snake ate the apple
+  if (nextX === applePosition.x && nextY === applePosition.y) {
+    generateApple();
+  } else {
+    snake.pop();
+  }
+
+  drawSnake();
+}
+
+// Function to draw the snake on the game board
+function drawSnake() {
+  snakeHead.style.left = `${snake[0].x * cellSize}px`;
+  snakeHead.style.top = `${snake[0].y * cellSize}px`;
+}
+
+// Function to generate a new apple at a random position
+function generateApple() {
+  applePosition = {
+    x: Math.floor(Math.random() * gridSize),
+    y: Math.floor(Math.random() * gridSize)
+  };
+  apple.style.left = `${applePosition.x * cellSize}px`;
+  apple.style.top = `${applePosition.y * cellSize}px`;
+}
+
+// Function to handle keypress events for changing the snake's direction
+function handleKeyPress(event) {
+  switch (event.key) {
+    case "ArrowUp":
+      direction = { x: 0, y: -1 };
+      break;
+    case "ArrowDown":
+      direction = { x: 0, y: 1 };
+      break;
+    case "ArrowLeft":
+      direction = { x: -1, y: 0 };
+      break;
+    case "ArrowRight":
+      direction = { x: 1, y: 0 };
+      break;
+  }
+}
+
+// Function to end the game
+function gameOver() {
+  alert("Game Over! Your score: " + (snake.length - 1));
+  snake = [{ x: 2, y: 2 }];
+  direction = { x: 1, y: 0 };
+  generateApple();
+}
+
+// Initialize the game
+generateApple();
+drawSnake();
+
+// Start the game loop
+const gameLoop = setInterval(updateGame, 100);
+
+// Add event listener for handling keypress events
+document.addEventListener("keydown", handleKeyPress);
diff --git a/Games/snake and apple/styles.css b/Games/snake and apple/styles.css
@@ -0,0 +1,35 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    margin: 50px;
+  }
+
+  h1 {
+    color: #007BFF;
+  }
+
+  .game-container {
+    position: relative;
+    width: 900px;
+    height: 900px;
+    border: 2px solid #007BFF;
+    overflow: hidden;
+    margin: 20px auto;
+    border-radius:8px;
+  }
+
+  .snake, .apple {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+  }
+
+  .snake {
+    background-color: #007BFF;
+  }
+
+  .apple {
+    background-color: #FF6347;
+  }
+
+