Skip to content

jimmacur/chess-war

Repository files navigation

Chess War

Overview

Chess War is an innovative fusion between the classic card game of War and the pieces and values from Chess. Combining traditional chess values with exciting battle mechanics, players face off in a an unpredictable head-to-head match, either against a computer or a friend (coming soon!).

Players can select custom avatars, track scores, and engage in thrilling battles where chess pieces are randomly assigned battle values. The ultimate goal? Dominate the board and claim victory!

Planning

Figma

Github project board

Features

  • Battle Mechanics: Chess pieces receive randomized battle values within their classical range, adding an element of unpredictability to the game.
  • Custom Avatars: Select from a variety of fun and themed chess avatars to represent your style.
  • Real-Time Score Tracking: Stay updated as scores dynamically change throughout the game.
  • Interactive UI: Built with Vue and Tailwind CSS for a seamless user experience.
  • Responsive Design: Ensures an optimized experience across devices, from desktop to mobile.
  • Error Handling: Ensures that the features of User Name, selected pieces, and avatar create a seamless user experience

Gameplay Preview

Gameplay Preview Enjoy the exciting game play of Chess War!

Winning

Gameplay Preview *This showcases when the game ends, displaying the winner, and giving the option to play again or go to the homepage.

Responsive Design

Responsive Design

Technologies learned

This project marked my first experience working with VueJS, and I’ve grown to appreciate several aspects of the framework:

  • Component Organization: Vue’s structure, with clear separation between templates, scripts, and styles, made development intuitive and efficient.
  • State Management: Vue’s Composition API provided a powerful yet easy-to-use way to manage and share state across components.
  • Component Communication: Using props and hooks for communication between components felt seamless and logical.
  • Routing: Vue Router made navigation and dynamic routing simple and efficient.

Technologies Used

Vue.js

TypeScript

Tailwind CSS

Installation

  1. Clone this repo

    git clone https://github.com/yourusername/chess-war.git

  2. Navigate to the directory

    cd chess-war

  3. npm install

  4. npm run dev

  5. open you browser to localhost:5173

  6. Enjoy your game!!

Future enhancements

  • Multiplayer mode: Play live with friends through real-time connections.
  • Queen promotion: Add strategic depth by allowing pawn promotion under specific criteria.
  • More avatars: Expand the avatar selection with new themes and styles.
  • Difficulty levels: Introduce adjustable difficulty to challenge players of all skill levels.
  • Animations and sounds: Introduce adjustable AI difficulty to challenge players of all skill levels.

Contributors

Jim Macur

Acknowledgements

  • A big thank you to Lichess for providing the beautiful SVGs of chess pieces used in this project. The chess piece assets are sourced from the open-source Lichess GitHub repository.

Last Updated