From 5e492df5162ee782062165f3b48a930601b87819 Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Thu, 25 Jul 2024 14:48:51 +0530 Subject: [PATCH 1/3] Create index.html --- .../Elemental switch/index.html | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 SinglePlayer - Games/Elemental switch/index.html diff --git a/SinglePlayer - Games/Elemental switch/index.html b/SinglePlayer - Games/Elemental switch/index.html new file mode 100644 index 00000000..65b8f394 --- /dev/null +++ b/SinglePlayer - Games/Elemental switch/index.html @@ -0,0 +1,22 @@ + + + + + + Elemental Switch + + + +
+

Elemental Switch

+ +
+ + + +
+

Use arrow keys to move. Switch between elements to overcome obstacles!

+
+ + + From 409708b8e3033da2544b765f30d752add0220f3d Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Thu, 25 Jul 2024 14:49:06 +0530 Subject: [PATCH 2/3] Create styles.css --- .../Elemental switch/styles.css | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 SinglePlayer - Games/Elemental switch/styles.css diff --git a/SinglePlayer - Games/Elemental switch/styles.css b/SinglePlayer - Games/Elemental switch/styles.css new file mode 100644 index 00000000..d0dffd77 --- /dev/null +++ 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); +} From 57821bca965d729a45c81e01beb39cb887822aaf Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Thu, 25 Jul 2024 14:49:21 +0530 Subject: [PATCH 3/3] Create script.js --- .../Elemental switch/script.js | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 SinglePlayer - Games/Elemental switch/script.js diff --git a/SinglePlayer - Games/Elemental switch/script.js b/SinglePlayer - Games/Elemental switch/script.js new file mode 100644 index 00000000..9a994806 --- /dev/null +++ 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();