Created
March 23, 2021 15:59
-
-
Save Meruzhan123/1b59aaae7f53cad5c7343ff24fffcee4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #00cc44; | |
| } | |
| .main-container { | |
| display: flex; | |
| width: 100%; | |
| } | |
| .turn-display { | |
| max-width: 10%; | |
| max-height: 50px; | |
| display: flex; | |
| position: absolute; | |
| top: 300px; | |
| } | |
| .pointOfFocus { | |
| margin-left: 200px; | |
| width: 100%; | |
| } | |
| .start-button, .restart-button { | |
| margin-left: 40%; | |
| background-color: blue; | |
| color: white; | |
| height: 50px; | |
| width: 200px; | |
| } | |
| /*Players*/ | |
| .top-player { | |
| text-align: center; | |
| } | |
| .top-hand { | |
| margin-left: -150px; | |
| } | |
| .bottom-player { | |
| text-align: center; | |
| } | |
| .bottom-hand { | |
| margin-left: -30px; | |
| padding-left: 10px; | |
| } | |
| .bottom-player > img:hover { | |
| margin-bottom: 50px; | |
| padding-right: 10px; | |
| } | |
| #bot-turn { | |
| background-color: red; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 10px; | |
| } | |
| #num-bot-cards { | |
| display: none; | |
| color: white; | |
| background-color: orange; | |
| position: absolute; | |
| left: 50%; | |
| width: 100px; | |
| text-align: center; | |
| padding: 5px; | |
| } | |
| #player-turn { | |
| background-color: blue; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 10px; | |
| } | |
| /*Gameplay*/ | |
| .middle-section { | |
| display: flex; | |
| margin: auto; | |
| } | |
| .play-space { | |
| padding: 10% 10% 10% 10%; | |
| margin: auto; | |
| display: flex; | |
| } | |
| #play-pile { | |
| margin-right: 70px; | |
| } | |
| #color-picker { | |
| display: flex; | |
| grid-template-columns: auto auto auto; | |
| border: 10px solid black; | |
| } | |
| #uno-button { | |
| width: 200px; | |
| height: 100px; | |
| border-radius: 25%; | |
| background-color: red; | |
| border: 10px solid black; | |
| transform: rotate(-25deg); | |
| text-align: center; | |
| color: orange; | |
| font-size: 75px; | |
| padding-top: 20px; | |
| display: none; | |
| cursor: pointer; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Uno Game</title> | |
| <link rel="stylesheet" href="unoGame.css"> | |
| <script type="text/javascript" src="unoGame.js" defer></script> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <div class="turn-display"> | |
| <div><button onclick="restartGame()" id="restart-button">Start New Game?</button></div> | |
| </div> | |
| <div class="pointOfFocus"> | |
| <div class="top-player"></div> | |
| <div id="num-bot-cards"></div> | |
| <div class="middle-section"> | |
| <div class="play-space"> | |
| <div class="middle-section"> | |
| <img name="current-card" src="" id="play-pile"> | |
| <img name="draw-pile" src="uno_assets/PNGs/small/card_back.png" onclick="draw()"> | |
| </div> | |
| </div> | |
| <div class="right-player"> | |
| </div> | |
| </div> | |
| <div id="uno-button">UNO</div> | |
| <div><button onclick="startGame()" class="start-button">Start New Game?</button></div> | |
| <div id="bottom-player"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict" | |
| const DECKSIZE = 104; | |
| //here I use the src of the image that is on top of the draw pile but I want to get the object info of the current card, | |
| //how would I do this? | |
| let currentCard = document.getElementById("play-pile").src; | |
| let array = [ | |
| new Card(red,0), new Card(red,1), new Card(red,2), new Card(red,3), new Card(red,4), new Card(red,5), new Card(red,6), | |
| new Card(red,7), new Card(red,8), new Card(red,9), new Card(red,skip), new Card(red,draw2), new Card(red,0), new Card(red,1), | |
| new Card(red,2), new Card(red,3), new Card(red,4), new Card(red,5), new Card(red,6), new Card(red,7), new Card(red,8), new Card(red,9), | |
| new Card(red,skip), new Card(red,draw2), | |
| new Card(blue,0), new Card(blue,1), new Card(blue,2), new Card(blue,3), new Card(blue,4), new Card(blue,5), new Card(blue,6), | |
| new Card(blue,7), new Card(blue,8), new Card(blue,9), new Card(blue,skip), new Card(blue,draw2), new Card(blue,0), new Card(blue,1), | |
| new Card(blue,2), new Card(blue,3), new Card(blue,4), new Card(blue,5), new Card(blue,6), new Card(blue,7), new Card(blue,8), new Card(blue,9), | |
| new Card(blue,skip), new Card(blue,draw2), | |
| new Card(green,0), new Card(green,1), new Card(green,2), new Card(green,3), new Card(green,4), new Card(green,5), new Card(green,6), | |
| new Card(green,7), new Card(green,8), new Card(green,9), new Card(green,skip), new Card(green,draw2), new Card(green,0), new Card(green,1), | |
| new Card(green,2), new Card(green,3), new Card(green,4), new Card(green,5), new Card(green,6), new Card(green,7), new Card(green,8), new Card(green,9), | |
| new Card(green,skip), new Card(green,draw2), | |
| new Card(yellow,0), new Card(yellow,1), new Card(yellow,2), new Card(yellow,3), new Card(yellow,4), new Card(yellow,5), new Card(yellow,6), | |
| new Card(yellow,7), new Card(yellow,8), new Card(yellow,9), new Card(yellow,skip), new Card(yellow,draw2), new Card(yellow,0), new Card(yellow,1), | |
| new Card(yellow,2), new Card(yellow,3), new Card(yellow,4), new Card(yellow,5), new Card(yellow,6), new Card(yellow,7), new Card(yellow,8), new Card(yellow,9), | |
| new Card(yellow,skip), new Card(yellow,draw2), | |
| new Card(Black,13), new Card(Black,14) | |
| ] | |
| class Card{ | |
| constructor(colour, number) { | |
| this.num = number; | |
| this.colour = colour; | |
| this.codeName = "" + colour + "_" + number; | |
| } | |
| } | |
| class Deck{ | |
| constructor() { | |
| for(let card of array) { | |
| let newPos = Math.floor(Math.random() * (array.length-1)); | |
| let oldValue = array[newPos]; | |
| array[newPos] = card; | |
| card = oldValue; | |
| } | |
| } | |
| static draw() { | |
| let random = Math.floor(Math.random() * (array.length-1)); | |
| let card = array[random]; | |
| return card.codeName; | |
| } | |
| } | |
| class Player{ | |
| playerDraw(){ | |
| let random = draw(); | |
| let image = document.createElement(img); | |
| image.src = "uno_assets/PNGs/small/" + random.codeName + ".png"; | |
| let position = document.getElementById("bottom-player"); | |
| position.appendChild(); | |
| } | |
| play(selectNum, selectCol) { | |
| if(currentCard.contains(selectNum) || curretnCard.contains(selectCol)) { | |
| currentCard = | |
| } | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment