Dicee: A Simple JavaScript Dice Game
Built using HTML, CSS, and JavaScript
Objectives
- Learn JavaScript Fundamentals: Practice DOM manipulation, event handling, and random number generation.
- Build an Interactive Web App: Create a responsive and visually appealing game interface.
- Enhance Web Development Skills: Apply HTML, CSS, and JavaScript in a cohesive project.
Features
- Dynamic Dice Roll: Clicking the refresh button triggers a new dice roll for both players.
- Random Number Generation: Utilizes JavaScript's Math.random() to simulate dice rolls.
- DOM Manipulation: Updates the dice images and displays the winner dynamically.
- Responsive Design: Ensures the game is accessible and visually consistent across devices.
Technical Implementation
- HTML: Structures the game layout, including player sections and dice images.
- CSS: Styles the game elements, providing a clean and user-friendly interface.
-
JavaScript:
- Generates random numbers between 1 and 6 to simulate dice rolls.
- Updates the src attribute of dice images based on the roll.
- Compares the two rolls and displays the winner or a draw message.
Challenges and Solutions
- Image Updating: Ensuring the correct dice image displays for each roll required careful mapping between random numbers and image files.
- Responsive Layout: Achieving a consistent look across different screen sizes involved using flexible CSS units and media queries.
