Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feedback #1

Open
wants to merge 3 commits into
base: feedback
Choose a base branch
from
Open

Feedback #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2cd7277
Setting up GitHub Classroom Feedback
github-classroom[bot] Dec 13, 2024
aeb7d52
add deadline
github-classroom[bot] Dec 13, 2024
c16c772
Kata
neel915 Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-22041afd0340ce965d47ae6ef1cefeee28c7c493a6346c4f15d667ab976d596c.svg)](https://classroom.github.com/a/1XPbwjV5)
26 changes: 26 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Master Mind</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body>
<h1>Mastermind</h1>
<div class="container">
<div class="blue"></div>
<div class="yellow"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>
<div class="purple"></div>
<div class="pink"></div>
<div class="cyan"></div>
</div>
<div class="button">
<button id="btn">Guess !</button>
</div>
</body>
</html>
55 changes: 55 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
"use strict";

const button = document.getElementById("btn");

const colors = ["red", "blue", "yellow", "green"];

const allRounds = 12;
const colorsLength = 4;
let secretColors = ["yellow", "blue", "green", "red"];
let currentResult = [];
let allTries = 0;

let color1;
let color2;
let color3;
let color4;

function startGame() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

L'idée d'avoir une fonction pour lancer le jeu est bonne. Tu pourrais factorise la recuperation des 4 couleurs avec une boucle

color1 = prompt(
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ca pourrait etre interessant de valider que le joueur a bien donné une des couleurs disponible

"Please choose the first colors from the listed colors : red, blue, yellow, green"
);

color2 = prompt(
"Please choose your second color from the listed colors: red, blue, yellow, green"
);
color3 = prompt(
"Please choose your third color from the listed colors: red, blue, yellow, green"
);
color4 = prompt(
"Please choose your fourth color from the listed colors: red, blue, yellow, green"
);
currentResult = color1 + ", " + color2 + ", " + color3 + ", " + color4;

console.log(currentResult);
validateGuess();
resetGame();
}

function validateGuess() {
if (secretColors.length == currentResult.length) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ici, tu verifie que la réponse a le même nombre de caractere que le resultat caché. Du coup, si le resultat caché etait : "toto" et que ta réponse était "tata", ca considererait que tu a gagné.
Tu peux essayer de verifier couleur apres couleur avec une boucle et des tableaux.

console.log("You Won ! 😃");
} else {
console.log("You lost the game! 😥");
}
}
validateGuess();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ici, tu n'execute validateGuess que deux fois.
Il faudrait faire en sorte de l'executer tant que la condition de fin de partie n'est pas resolue.


function resetGame() {
if (allRounds == allTries) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sauf erreur, allTries n'est pas utilisé, mais c'est une bonne idée pour definir la fin de la partie. Tu pourrai l'incrementer a chaque fois que tu execute validateGuess par exemple.

console.log("All rounds up!");
}
}
resetGame();

button.addEventListener("click", startGame);
89 changes: 89 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
body {
background-color: white;
}

h1 {
font-size: 50px;
font-weight: bold;
color: black;
font-style: italic;
text-align: center;
}

.container {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 80px;
}

.blue {
width: 70px;
height: 70px;
background-color: blue;
border: 2px solid black;
}

.yellow {
width: 70px;
height: 70px;
background-color: yellow;
border: 2px solid black;
}

.red {
width: 70px;
height: 70px;
background-color: red;
border: 2px solid black;
}

.green {
width: 70px;
height: 70px;
background-color: green;
border: 2px solid black;
}

.orange {
width: 70px;
height: 70px;
background-color: orange;
border: 2px solid black;
}

.purple {
width: 70px;
height: 70px;
background-color: purple;
border: 2px solid black;
}

.pink {
width: 70px;
height: 70px;
background-color: pink;
border: 2px solid black;
}

.cyan {
width: 70px;
height: 70px;
background-color: cyan;
border: 2px solid black;
}

#btn {
display: block;
background-color: darkcyan;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
font-weight: bolder;
margin-top: 150px;
margin-left: 750px;
font-size: 40px;
font-size: 20px;
padding: 15px 30px;
border-radius: 5px;
width: 200px;
height: 60px;
}