yannakode / dice-game-animation

A simple dice game built with HTML, CSS and Javascript, with CSS animations. https://yannakode.github.io/dice-game-animation/

Virtual Dice Game

This is a simple virtual dice game implemented in JavaScript, HTML, and CSS. It allows two players to place their bets and roll a virtual dice to determine the winner. The game includes animations and sound effects to enhance the user experience.

Screenshot

How to Play

1. Open the index.html file in your web browser.
2. Enter a number in the "First player" input field to place your bet.
3. Enter a number in the "Second player" input field to place the second player's bet.
4. Click the "DRAW" button to roll the dice.
5. The result of the game will be displayed below the dice.
   • If the rolled number matches neither player's bet, it will show "No hits" in red.
   • If the rolled number matches both players' bets, it will show "The game was tied." in yellow.
   • If the rolled number matches the first player's bet, it will show "Player 01 hits" in blue.
   • If the rolled number matches the second player's bet, it will show "Player 02 hits" in green.

Project Structure

The project consists of the following files:

• index.html: The main HTML file that contains the game interface and structure.
• css/style.css: The CSS file that defines the styles and animations for the game.
• js/script.js: The JavaScript file that implements the game logic and event handling.
• img/: Directory containing the dice images used in the game.
• assets/dado-rolando.mp3: Sound effect file for the dice rolling animation.

Compatibility

The game should be compatible with modern web browsers that support HTML5, CSS3, and JavaScript.

Credits

This project was developed as part of the "JavaScript Course" course taught by "Edison Maia". The course covered JavaScript, HTML, and CSS concepts, and this project was one of the practical activities carried out during the course.