{"id":26471143,"url":"https://github.com/tesfamichael12/space-invaders","last_synced_at":"2026-04-18T06:03:52.191Z","repository":{"id":281577808,"uuid":"900518628","full_name":"Tesfamichael12/space-invaders","owner":"Tesfamichael12","description":"Space Invaders is a thrilling browser-based game where you pilot a spaceship, dodge enemy fire, and battle waves of invaders for the highest score. Built with HTML5 Canvas and JavaScript, it delivers a dynamic and interactive gaming experience.","archived":false,"fork":false,"pushed_at":"2025-03-10T02:00:04.000Z","size":24700,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T03:22:20.550Z","etag":null,"topics":["advanced-dom-manipulation","cavas","css","dom","domma","html","javascript","space-invaders","space-invaders-game","web-based-game","web-based-games"],"latest_commit_sha":null,"homepage":"https://space-invaders-by-tesfamichael-tafere.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tesfamichael12.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-09T00:37:14.000Z","updated_at":"2025-03-10T02:07:25.000Z","dependencies_parsed_at":"2025-03-10T03:32:26.863Z","dependency_job_id":null,"html_url":"https://github.com/Tesfamichael12/space-invaders","commit_stats":null,"previous_names":["tesfamichael12/space-invaders"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tesfamichael12%2Fspace-invaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tesfamichael12%2Fspace-invaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tesfamichael12%2Fspace-invaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tesfamichael12%2Fspace-invaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tesfamichael12","download_url":"https://codeload.github.com/Tesfamichael12/space-invaders/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244506034,"owners_count":20463464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["advanced-dom-manipulation","cavas","css","dom","domma","html","javascript","space-invaders","space-invaders-game","web-based-game","web-based-games"],"created_at":"2025-03-19T20:53:29.856Z","updated_at":"2026-04-18T06:03:47.125Z","avatar_url":"https://github.com/Tesfamichael12.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Space Invaders\n\nWelcome to the **Space Invaders** project! This is an exciting and captivating game where you control a spaceship, navigate through space, and battle against waves of invaders. Get ready for an intergalactic adventure! 🌌\n\n# 🎮 [![Play Live](https://img.shields.io/badge/Play%20Live-Click%20Here-brightgreen)](https://space-invaders-by-tesfamichael-tafere.netlify.app/)\n\n## 🌟 Features\n\n- **Dynamic Spaceship Controls**: Move your spaceship in any direction to dodge enemy fire and position yourself for the perfect shot. 🎮\n- **Shooting Mechanics**: Fire lasers to destroy the invaders and protect your spaceship. 💥\n- **Invader Grid**: Face a challenging grid of invaders that shoot back at you. Stay sharp and keep moving! 👾\n- **Score System**: Track your score as you defeat invaders and aim for the highest score possible. 🏆\n- **Exciting Gameplay**: Fast-paced and thrilling action that keeps you on the edge of your seat. 🚀\n\n## 🛠️ How It Was Made\n\nThe **Space Invaders** game was built using the HTML5 `\u003ccanvas\u003e` element and JavaScript to create an interactive and dynamic gaming experience. Here's a detailed explanation of the key components:\n\n### HTML5 Canvas\n\nThe game utilizes the HTML5 `\u003ccanvas\u003e` element to render the game graphics. The canvas provides a drawable region in the browser where we can use JavaScript to draw and animate the game elements.\n\n```html\n\u003ccanvas id=\"gameCanvas\" width=\"800\" height=\"600\"\u003e\u003c/canvas\u003e\n```\n\n### JavaScript Logic\n\n#### Initial Setup\n\nWe start by selecting the canvas element and setting up the 2D rendering context:\n\n```javascript\nconst canvas = document.getElementById('gameCanvas')\nconst ctx = canvas.getContext('2d')\n```\n\n#### Game Loop\n\nThe game loop is the core of the game, responsible for updating the game state and rendering the graphics on each frame:\n\n```javascript\nfunction gameLoop() {\n  update()\n  render()\n  requestAnimationFrame(gameLoop)\n}\n```\n\n#### Spaceship Controls\n\nWe handle user input to control the spaceship using event listeners for keyboard events:\n\n```javascript\ndocument.addEventListener('keydown', (event) =\u003e {\n  switch (event.key) {\n    case 'ArrowUp':\n      // Move spaceship up\n      break\n    case 'ArrowDown':\n      // Move spaceship down\n      break\n    case 'ArrowLeft':\n      // Move spaceship left\n      break\n    case 'ArrowRight':\n      // Move spaceship right\n      break\n    case ' ':\n      // Shoot laser\n      break\n  }\n})\n```\n\n#### Shooting Mechanics\n\nWe implement the shooting mechanics by creating laser objects and updating their positions:\n\n```javascript\nfunction shootLaser() {\n  const laser = {\n    x: spaceship.x,\n    y: spaceship.y,\n    width: 5,\n    height: 20,\n    speed: 5\n  }\n  lasers.push(laser)\n}\n\nfunction updateLasers() {\n  lasers.forEach((laser) =\u003e {\n    laser.y -= laser.speed\n    // Check for collisions with invaders\n  })\n}\n```\n\n#### Invader Grid\n\nWe create a grid of invaders and update their positions to move across the screen:\n\n```javascript\nfunction createInvaders() {\n  for (let row = 0; row \u003c rows; row++) {\n    for (let col = 0; col \u003c cols; col++) {\n      invaders.push({\n        x: col * invaderWidth,\n        y: row * invaderHeight,\n        width: invaderWidth,\n        height: invaderHeight\n      })\n    }\n  }\n}\n\nfunction updateInvaders() {\n  invaders.forEach((invader) =\u003e {\n    invader.x += invaderSpeed\n    // Change direction and move down if edge is reached\n  })\n}\n```\n\n#### Collision Detection\n\nWe implement collision detection to check if lasers hit invaders or if invaders hit the spaceship:\n\n```javascript\nfunction checkCollisions() {\n  lasers.forEach((laser) =\u003e {\n    invaders.forEach((invader) =\u003e {\n      if (\n        laser.x \u003c invader.x + invader.width \u0026\u0026\n        laser.x + laser.width \u003e invader.x \u0026\u0026\n        laser.y \u003c invader.y + invader.height \u0026\u0026\n        laser.y + laser.height \u003e invader.y\n      ) {\n        // Handle collision\n      }\n    })\n  })\n}\n```\n\nBy combining these components, we create a fully functional and engaging Space Invaders game. Enjoy coding and happy gaming! 🚀👾\n\n## 🛠️ Installation\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/Tesfamichael12/space-invaders.git\n   ```\n2. Navigate to the project directory:\n   ```bash\n   cd space-invaders\n   ```\n3. Install the dependencies:\n   ```bash\n   npm install\n   ```\n4. Start the game:\n   ```bash\n   npm start\n   ```\n\n## 🤝 Contributing\n\nYou are most welcomed to contribut and make this game even better! Feel free to open issues or submit pull requests.\n\n## 📧 Contact\n\nIf you have any questions or feedback, please reach out to at [tesfamichael132@gmail.com](mailto:tesfamichael132@gmail.com).\n\nEnjoy the game and happy shooting! 🚀👾\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftesfamichael12%2Fspace-invaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftesfamichael12%2Fspace-invaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftesfamichael12%2Fspace-invaders/lists"}