Merge pull request #1100 from Aditi22Bansal/main

Solved #1090- Elemental switch
ChromeGaming · Jul 31, 2024 · 80d3403 · 80d3403
2 parents d8e62ac + 57821bc
commit 80d3403
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 0 deletions.
diff --git a/SinglePlayer - Games/Elemental switch/index.html b/SinglePlayer - Games/Elemental switch/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Elemental Switch</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="game">
+        <h1>Elemental Switch</h1>
+        <canvas id="gameCanvas" width="600" height="400"></canvas>
+        <div>
+            <button onclick="switchElement('fire')">Fire</button>
+            <button onclick="switchElement('water')">Water</button>
+            <button onclick="switchElement('earth')">Earth</button>
+        </div>
+        <p>Use arrow keys to move. Switch between elements to overcome obstacles!</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Elemental switch/script.js b/SinglePlayer - Games/Elemental switch/script.js
@@ -0,0 +1,88 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+let character = {
+    x: 50,
+    y: 350,
+    width: 30,
+    height: 30,
+    element: 'fire'
+};
+
+let obstacles = [
+    { x: 200, y: 300, width: 50, height: 50, type: 'fire' },
+    { x: 300, y: 200, width: 50, height: 50, type: 'water' },
+    { x: 400, y: 100, width: 50, height: 50, type: 'earth' }
+];
+
+let goal = { x: 550, y: 350, width: 30, height: 30 };
+
+function switchElement(element) {
+    character.element = element;
+}
+
+document.addEventListener('keydown', (e) => {
+    switch (e.key) {
+        case 'ArrowUp': character.y -= 10; break;
+        case 'ArrowDown': character.y += 10; break;
+        case 'ArrowLeft': character.x -= 10; break;
+        case 'ArrowRight': character.x += 10; break;
+    }
+    checkCollisions();
+    drawGame();
+});
+
+function checkCollisions() {
+    obstacles.forEach(obstacle => {
+        if (character.x < obstacle.x + obstacle.width &&
+            character.x + character.width > obstacle.x &&
+            character.y < obstacle.y + obstacle.height &&
+            character.y + character.height > obstacle.y) {
+            if (character.element !== obstacle.type) {
+                alert('Game Over! You hit an obstacle.');
+                resetGame();
+            }
+        }
+    });
+
+    if (character.x < goal.x + goal.width &&
+        character.x + character.width > goal.x &&
+        character.y < goal.y + goal.height &&
+        character.y + character.height > goal.y) {
+        alert('You Win! You reached the goal.');
+        resetGame();
+    }
+}
+
+function resetGame() {
+    character.x = 50;
+    character.y = 350;
+    character.element = 'fire';
+    drawGame();
+}
+
+function drawGame() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = getColor(character.element);
+    ctx.fillRect(character.x, character.y, character.width, character.height);
+
+    obstacles.forEach(obstacle => {
+        ctx.fillStyle = getColor(obstacle.type);
+        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
+    });
+
+    ctx.fillStyle = 'gold';
+    ctx.fillRect(goal.x, goal.y, goal.width, goal.height);
+}
+
+function getColor(element) {
+    switch (element) {
+        case 'fire': return 'red';
+        case 'water': return 'blue';
+        case 'earth': return 'green';
+        default: return 'black';
+    }
+}
+
+drawGame();
diff --git a/SinglePlayer - Games/Elemental switch/styles.css b/SinglePlayer - Games/Elemental switch/styles.css
@@ -0,0 +1,32 @@
+body {
+    text-align: center;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+}
+
+#game {
+    margin: 20px auto;
+    width: 600px;
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+canvas {
+    border: 1px solid #000;
+    margin-top: 10px;
+}
+
+button {
+    margin: 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:active {
+    transform: scale(0.95);
+}