-
Notifications
You must be signed in to change notification settings - Fork 232
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #626 from linga66/main
Added Guess the Color game
- Loading branch information
Showing
9 changed files
with
393 additions
and
81 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from 'react'; | ||
import ColorGame from './src/ColorGame'; | ||
|
||
function App() { | ||
return ( | ||
<div className="App"> | ||
<ColorGame /> | ||
</div> | ||
); | ||
} | ||
|
||
export default App; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<title>React App</title> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="root"></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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,134 @@ | ||
import React from 'react'; | ||
import { useEffect } from 'react'; | ||
import './guess.css'; | ||
|
||
function ColorGame() { | ||
useEffect(() => { | ||
function changecolors(color) { | ||
for (let i = 0; i < colors.length; i++) { | ||
squares[i].style.background = color; | ||
} | ||
} | ||
|
||
function pickcolor() { | ||
const ran = Math.floor(Math.random() * colors.length); | ||
return colors[ran]; | ||
} | ||
|
||
function generatecolors(num) { | ||
const arr = []; | ||
for (let i = 0; i < num; i++) { | ||
arr.push(randomcolor()); | ||
} | ||
return arr; | ||
} | ||
|
||
function randomcolor() { | ||
const r = Math.floor(Math.random() * 256); | ||
const g = Math.floor(Math.random() * 256); | ||
const b = Math.floor(Math.random() * 256); | ||
return `rgb(${r}, ${g}, ${b})`; | ||
} | ||
|
||
// Get references to DOM elements | ||
const squares = document.querySelectorAll('.square'); | ||
const colorDisplay = document.getElementById('colordisplay'); | ||
const msgDisplay = document.querySelector('#msg'); | ||
const resetBtn = document.querySelector('#reset'); | ||
const easyBtn = document.querySelector('#easybtn'); | ||
const hardBtn = document.querySelector('#hardbtn'); | ||
const h1 = document.querySelector('h1'); | ||
|
||
let num = 6; | ||
let colors = generatecolors(num); | ||
let picked = pickcolor(); | ||
|
||
colorDisplay.textContent = picked; | ||
|
||
easyBtn.addEventListener('click', function () { | ||
easyBtn.classList.add('selected'); | ||
hardBtn.classList.remove('selected'); | ||
num = 3; | ||
colors = generatecolors(num); | ||
picked = pickcolor(); | ||
colorDisplay.textContent = picked; | ||
msgDisplay.textContent = ''; | ||
h1.style.background = 'steelblue'; | ||
for (let i = 0; i < 3; i++) { | ||
squares[i].style.background = colors[i]; | ||
} | ||
for (let i = 3; i < squares.length; i++) { | ||
squares[i].style.background = 'none'; | ||
} | ||
}); | ||
|
||
hardBtn.addEventListener('click', function () { | ||
hardBtn.classList.add('selected'); | ||
easyBtn.classList.remove('selected'); | ||
num = 6; | ||
colors = generatecolors(num); | ||
picked = pickcolor(); | ||
colorDisplay.textContent = picked; | ||
msgDisplay.textContent = ''; | ||
h1.style.background = 'steelblue'; | ||
for (let i = 0; i < squares.length; i++) { | ||
squares[i].style.background = colors[i]; | ||
squares[i].style.display = 'block'; | ||
} | ||
}); | ||
|
||
for (let i = 0; i < squares.length; i++) { | ||
squares[i].style.background = colors[i]; | ||
squares[i].addEventListener('click', function () { | ||
const clicked = this.style.background; | ||
if (clicked === picked) { | ||
msgDisplay.textContent = 'Correct'; | ||
h1.style.background = clicked; | ||
changecolors(clicked); | ||
resetBtn.textContent = 'Play Again?'; | ||
} else { | ||
this.style.background = '#232323'; | ||
msgDisplay.textContent = 'Try Again'; | ||
} | ||
}); | ||
} | ||
|
||
resetBtn.addEventListener('click', function () { | ||
colors = generatecolors(num); | ||
picked = pickcolor(); | ||
colorDisplay.textContent = picked; | ||
for (let i = 0; i < squares.length; i++) { | ||
squares[i].style.background = colors[i]; | ||
} | ||
h1.style.background = 'steelblue'; | ||
msgDisplay.textContent = ''; | ||
resetBtn.textContent = 'New Colors'; | ||
}); | ||
}, []); | ||
|
||
return ( | ||
<div> | ||
<h1>Guess The Color<br /> | ||
<span id="colordisplay">RGB</span><br /> | ||
Color Game | ||
</h1> | ||
<div id="stripe"> | ||
<button id="reset">New Colors</button> | ||
<span id="msg"></span> | ||
<button id="easybtn">Easy</button> | ||
<button className="selected" id="hardbtn">Hard</button> | ||
</div> | ||
<div id="container"> | ||
<div className="square"></div> | ||
<div className="square"></div> | ||
<div className="square"></div> | ||
<div className="square"></div> | ||
<div className="square"></div> | ||
<div className="square"></div> | ||
</div> | ||
{/* The JavaScript functionality will be added later */} | ||
</div> | ||
); | ||
} | ||
|
||
export default ColorGame; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
body{ | ||
background-color:#232323; | ||
margin:0; | ||
font-family:"Montserrat","Avenir"; | ||
} | ||
.square{ | ||
width:30%; | ||
background:purple; | ||
padding-bottom:30%; | ||
float:left; | ||
margin:1.66%; | ||
border-radius:15%; | ||
transition: background 0.4s; | ||
} | ||
|
||
#container{ | ||
margin: 20px auto; | ||
max-width:600px; | ||
} | ||
|
||
h1{ | ||
color:white; | ||
padding:20px 0; | ||
text-align:center; | ||
background: steelblue; | ||
margin:0; | ||
font-weight:normal; | ||
text-transform:uppercase; | ||
} | ||
|
||
#colordisplay{ | ||
font-size:200%; | ||
} | ||
|
||
#stripe{ | ||
background:white; | ||
height:25px; | ||
text-align:center; | ||
color:black; | ||
} | ||
|
||
.selected{ | ||
color:white; | ||
background:steelblue; | ||
} | ||
|
||
#msg{ | ||
display:inline-block; | ||
width:20%; | ||
} | ||
|
||
|
||
button{ | ||
border:none; | ||
background:none; | ||
text-transform:uppercase; | ||
height:100%; | ||
font-weight:700; | ||
color:steelblue; | ||
letter-spacing:1px; | ||
font-size:inherit; | ||
transition: all 0.4s; | ||
outline:none; | ||
} | ||
|
||
button:hover{ | ||
color:white; | ||
background:steelblue; | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import ColorGame from './ColorGame'; | ||
|
||
ReactDOM.render( | ||
<React.StrictMode> | ||
<ColorGame /> | ||
</React.StrictMode>, | ||
document.getElementById('root') | ||
); |
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
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
Oops, something went wrong.