{"id":23341864,"url":"https://github.com/shadyashraf174/pig-game","last_synced_at":"2026-05-05T11:34:03.174Z","repository":{"id":265862726,"uuid":"896750355","full_name":"shadyashraf174/Pig-Game","owner":"shadyashraf174","description":"An interactive, two-player dice game built using HTML, CSS, and JavaScript.","archived":false,"fork":false,"pushed_at":"2024-12-01T08:16:03.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T15:26:37.597Z","etag":null,"topics":["css","html","javascript","javascript-game","pig-game","two-player"],"latest_commit_sha":null,"homepage":"https://www.udemy.com/course/the-complete-javascript-course/","language":"CSS","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/shadyashraf174.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-01T07:47:36.000Z","updated_at":"2024-12-01T09:57:43.000Z","dependencies_parsed_at":"2024-12-02T01:15:21.367Z","dependency_job_id":null,"html_url":"https://github.com/shadyashraf174/Pig-Game","commit_stats":null,"previous_names":["shadyashraf174/pig-game"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shadyashraf174/Pig-Game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FPig-Game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FPig-Game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FPig-Game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FPig-Game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shadyashraf174","download_url":"https://codeload.github.com/shadyashraf174/Pig-Game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FPig-Game/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267370821,"owners_count":24076482,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","html","javascript","javascript-game","pig-game","two-player"],"created_at":"2024-12-21T05:12:28.736Z","updated_at":"2026-05-05T11:34:03.126Z","avatar_url":"https://github.com/shadyashraf174.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Pig Game**  \n#### Inspired by [Jonas Schmedtmann](https://github.com/jonasschmedtmann) || See it live at [CodePen](https://codepen.io/shady-ashraf/pen/dPboXYa)\n##### Classic Two-Player Dice Game Implementation  \n###### This project demonstrates an interactive, two-player dice game built using HTML, CSS, and JavaScript. The goal is to reach a score of 100 before your opponent, with strategic decisions on when to \"roll\" or \"hold\" the dice.  \n\n---\n\n## **Table of Contents**  \n- [Overview](#overview)  \n- [Game Rules](#game-rules)  \n- [Features](#features)  \n- [File Structure](#file-structure)  \n- [HTML Details](#html-details)  \n- [CSS Styling](#css-styling)  \n- [JavaScript Logic](#javascript-logic)  \n- [Deployment](#deployment)  \n- [Selectors Used in the Project](#selectors-used-in-the-project)  \n\n---\n\n## **Overview**  \nThe **Pig Game Project** is a fun and interactive game designed to enhance JavaScript programming skills by integrating DOM manipulation and event handling.\n\n**Technologies used:**  \n- HTML5  \n- CSS3  \n- JavaScript (ES6)  \n\n---\n\n## **Game Rules**  \n1. Players take turns to roll a dice.  \n2. Rolling a \"1\" switches turns, and the current score resets to 0.  \n3. Players can choose to \"hold\" their score, adding the current score to their total and switching turns.  \n4. The first player to reach 100 wins the game.  \n\n---\n\n## **Features**  \n- **Dynamic Gameplay**: Players can roll dice, accumulate scores, and switch turns seamlessly.  \n- **Winner Highlighting**: The winning player is visually indicated with a special style.  \n- **New Game Reset**: Players can reset the game at any point.  \n- **Responsive UI**: Adjusts for various screen sizes using modern CSS.  \n\n---\n\n## **File Structure**  \n```plaintext  \npig-game/  \n├── index.html  \n├── style.css  \n└── script.js  \n```  \n\n---\n\n## **HTML Details**  \nThe HTML file (`index.html`) structures the game layout with players' panels, buttons, and a dice image.\n\n### Key Sections:  \n1. **Player Panels**:  \n   Two player sections track each player's scores and active status.  \n   ```html  \n   \u003csection class=\"player player--0 player--active\"\u003e  \n     \u003ch2 class=\"name\" id=\"name--0\"\u003ePlayer 1\u003c/h2\u003e  \n     \u003cp class=\"score\" id=\"score--0\"\u003e43\u003c/p\u003e  \n     \u003cdiv class=\"current\"\u003e  \n       \u003cp class=\"current-label\"\u003eCurrent\u003c/p\u003e  \n       \u003cp class=\"current-score\" id=\"current--0\"\u003e0\u003c/p\u003e  \n     \u003c/div\u003e  \n   \u003c/section\u003e  \n   ```  \n\n2. **Dice Display**:  \n   Displays the dice roll result dynamically.  \n   ```html  \n   \u003cimg src=\"dice-5.png\" alt=\"Playing dice\" class=\"dice\" /\u003e  \n   ```  \n\n3. **Action Buttons**:  \n   Buttons for rolling dice, holding the score, and starting a new game.  \n   ```html  \n   \u003cbutton class=\"btn btn--new\"\u003e🔄 New game\u003c/button\u003e  \n   \u003cbutton class=\"btn btn--roll\"\u003e🎲 Roll dice\u003c/button\u003e  \n   \u003cbutton class=\"btn btn--hold\"\u003e📥 Hold\u003c/button\u003e  \n   ```  \n\n---\n\n## **CSS Styling**  \nThe CSS file (`style.css`) ensures a visually appealing and responsive design.  \n\n### Key Styles:  \n- **Player Panels**:  \n  - Active and winning players are visually distinguished using dynamic styles.  \n- **Dice and Buttons**:  \n  - Dice rolls are highlighted, and buttons are styled for clarity and interactivity.  \n\n### Snippet:  \n```css  \n.player--active {  \n  background-color: rgba(255, 255, 255, 0.4);  \n}  \n\n.player--winner {  \n  background-color: #2f2f2f;  \n}  \n\n.btn {  \n  background-color: white;  \n  padding: 0.7rem 2.5rem;  \n  border-radius: 50rem;  \n  cursor: pointer;  \n}  \n\n.dice {  \n  position: absolute;  \n  height: 10rem;  \n  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);  \n}  \n```  \n\n---\n\n## **JavaScript Logic**  \nThe JavaScript file (`script.js`) manages game dynamics with clear and concise logic.  \n\n### Key Functions:  \n1. **Initialization (`init`)**:  \n   Resets the game state and updates the UI.  \n   ```javascript  \n   const init = function () {  \n     scores = [0, 0];  \n     currentScore = 0;  \n     activePlayer = 0;  \n     playing = true;  \n\n     score0El.textContent = 0;  \n     score1El.textContent = 0;  \n     current0El.textContent = 0;  \n     current1El.textContent = 0;  \n     diceEl.classList.add(\"hidden\");  \n     player0El.classList.add(\"player--active\");  \n   };  \n   ```  \n\n2. **Rolling the Dice**:  \n   Generates a random dice roll and updates the current score unless a \"1\" is rolled.  \n   ```javascript  \n   btnRoll.addEventListener(\"click\", function () {  \n     if (playing) {  \n       const dice = Math.trunc(Math.random() * 6) + 1;  \n       diceEl.src = `dice-${dice}.png`;  \n       if (dice !== 1) {  \n         currentScore += dice;  \n         document.getElementById(`current--${activePlayer}`).textContent =  \n           currentScore;  \n       } else {  \n         switchPlayer();  \n       }  \n     }  \n   });  \n   ```  \n\n3. **Holding the Score**:  \n   Adds the current score to the total and checks for a winner.  \n   ```javascript  \n   btnHold.addEventListener(\"click\", function () {  \n     if (playing) {  \n       scores[activePlayer] += currentScore;  \n       if (scores[activePlayer] \u003e= 100) {  \n         document  \n           .querySelector(`.player--${activePlayer}`)  \n           .classList.add(\"player--winner\");  \n       } else {  \n         switchPlayer();  \n       }  \n     }  \n   });  \n   ```  \n\n---\n\n## **Deployment**  \n1. Clone the repository:  \n   ```bash  \n   git clone https://github.com/shadyashraf174/Pig-Game.git  \n   ```  \n2. Open `index.html` in a browser to start playing.  \n\n---\n\n## **Selectors Used in the Project**  \n\n### **HTML Selectors**  \n- **Element Selectors**:  \n  - `\u003csection\u003e`: Player panels.  \n  - `\u003cbutton\u003e`: Action buttons.  \n\n- **Class Selectors**:  \n  - `.player--active`: Highlights the active player.  \n  - `.player--winner`: Indicates the winning player.  \n\n### **CSS Selectors**  \n- **Pseudo-classes**:  \n  - `:active`: Button press effects.  \n- **Dynamic Styling**:  \n  - `hidden` class toggles the dice's visibility.  \n\n---  \n\n![Screenshot 2024-12-01 151155](https://github.com/user-attachments/assets/7e7fcb03-2380-4d2b-8710-1cf43dd66d56)\n![Screenshot 2024-12-01 151248](https://github.com/user-attachments/assets/47ff2955-f8f8-4edc-bc66-1b3e4f7b0704)\n![Screenshot 2024-12-01 151322](https://github.com/user-attachments/assets/b061917c-ba83-4a8b-b933-b06d90bc3bae)\n\nReady to play? Have fun strategizing your way to victory! 🎲\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadyashraf174%2Fpig-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshadyashraf174%2Fpig-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadyashraf174%2Fpig-game/lists"}