An open API service indexing awesome lists of open source software.

https://github.com/archiedev242/arcanoid_js

simple arcanoid game on JS
https://github.com/archiedev242/arcanoid_js

arkanoid arkanoid-game game-development it-start javascript-game

Last synced: 12 months ago
JSON representation

simple arcanoid game on JS

Awesome Lists containing this project

README

          


🚀 Arkanoid JS


Classic Arcade Game Built with Vanilla JavaScript



[![JavaScript](https://img.shields.io/badge/JavaScript-ES6%2B-yellow?style=for-the-badge&logo=javascript)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)

Game Preview

[![Play Now](https://img.shields.io/badge/PLAY%20NOW-00BFFF?style=for-the-badge&logo=gamejolt&logoColor=white)](https://archiedev242.github.io/arcanoid_js/)

## 🎮 About the Game

Arkanoid JS is a modern reimagining of the classic arcade game, built from scratch using pure JavaScript, HTML5 Canvas, and CSS. This project was developed in 2020-2021 during my studies at IT-Start programming courses, marking my first major foray into game development and web technologies.

Experience the nostalgic gameplay with smooth controls, vibrant visuals, and challenging levels that will test your reflexes and strategy.

## ✨ Key Features



🎮 Classic Gameplay


Faithful to the original Arkanoid experience with precise controls and physics




🏆 Progressive Difficulty


Multiple levels with increasing challenge and unique brick patterns




📊 Score System


Track your high scores and compete with friends




🎨 Modern Design


Sleek, responsive interface with smooth animations



## 🚀 Quick Start

1. Download or clone the repository
2. Open `index.html` in your web browser
3. Start playing!

Or play directly in your browser: [Play Now](https://archiedev242.github.io/arcanoid_js/)

## 🎮 Game Controls







Move platform





SPACE

Launch ball




## 🛠️ Project Structure

```
arcanoid_js/
├── index.html # Main HTML file
├── game.js # Core game logic and mechanics
├── main.css # Styling and animations
└── img/ # Game assets
├── background.png # Game background
├── ball.png # Ball sprite
├── block.png # Brick sprites
└── platform.png # Player platform
```

## 🧑‍💻 Technology Stack



Frontend



  • HTML5

  • CSS3

  • JavaScript (ES6+)




Game Development



  • HTML5 Canvas API

  • Object-Oriented Programming

  • Game Loop Implementation




Design Tools



  • Adobe Illustrator (Sprites)

  • Cinema 4D (Background)

  • Git & GitHub

  • Visual Studio Code

  • Chrome DevTools



## 🖥️ System Requirements

- **OS**: Windows 10/11, macOS 10.14+, or modern Linux distro
- **Browser**: Latest version of Chrome, Firefox, Safari, or Edge
- **Screen Resolution**: 1920x1080 recommended

## 🚧 Development Roadmap

- [x] Basic game mechanics
- [x] Score system
- [ ] Multiple levels
- [ ] Power-ups
- [ ] Sound effects and music
- [ ] High score leaderboard

## 🤝 Contributing

Contributions are what make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 🙏 Acknowledgments

- **IT-Start** - For the amazing programming courses
- **My Mentors** - For their guidance and support
- **The Classic Arkanoid** - For the inspiration
- **You** - For checking out this project!


Made with ❤️ by ArchieDev242