Test des capacités de la boite de conserve (lol)
- Auteur de la discussion ZZZ
- Date de début
Bien sûr, voici un exemple de jeu simple que vous pouvez créer en HTML, CSS et JS : Le jeu de la devinette.
HTML :
```
<!DOCTYPE html>
<html>
<head>
<title>Jeu de la devinette</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Jeu de la devinette</h1>
<p>Je pense à un nombre entre 1 et 100, devinez lequel!</p>
<input type="number" id="guess" min="1" max="100">
<button id="guessBtn">Devinez!</button>
<p id="message"></p>
<script src="script.js"></script>
</body>
</html>
```
CSS :
```
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 3em;
margin-top: 50px;
}
p {
font-size: 1.2em;
}
input[type="number"] {
font-size: 1.2em;
padding: 5px;
width: 100px;
margin-bottom: 30px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}
```
JavaScript :
```
let secretNumber = Math.floor(Math.random() * 100) + 1;
let guesses = 0;
let guessSubmit = document.getElementById("guessBtn");
let guessInput = document.getElementById("guess");
let message = document.getElementById("message");
guessSubmit.addEventListener("click", function() {
let guess = Number(guessInput.value);
guesses++;
if (guess === secretNumber) {
message.innerText = `Bravo! Vous avez deviné le nombre en ${guesses} tentatives!`;
guessInput.disabled = true;
guessSubmit.disabled = true;
} else if (guess < secretNumber) {
message.innerText = "Trop bas, réessayez!";
} else if (guess > secretNumber) {
message.innerText = "Trop haut, réessayez!";
}
});
```
Ce jeu utilise l'objet Math de JavaScript pour sélectionner un nombre aléatoire entre 1 et 100 et demande à l'utilisateur de deviner quel est ce nombre. Chaque fois que l'utilisateur soumet une réponse, le code compare cette réponse au nombre secret et affiche un message indiquant si la réponse est trop élevée, trop basse ou correcte. Le jeu se termine lorsque l'utilisateur devine correctement le nombre secret.
HTML :
```
<!DOCTYPE html>
<html>
<head>
<title>Jeu de la devinette</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Jeu de la devinette</h1>
<p>Je pense à un nombre entre 1 et 100, devinez lequel!</p>
<input type="number" id="guess" min="1" max="100">
<button id="guessBtn">Devinez!</button>
<p id="message"></p>
<script src="script.js"></script>
</body>
</html>
```
CSS :
```
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 3em;
margin-top: 50px;
}
p {
font-size: 1.2em;
}
input[type="number"] {
font-size: 1.2em;
padding: 5px;
width: 100px;
margin-bottom: 30px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}
```
JavaScript :
```
let secretNumber = Math.floor(Math.random() * 100) + 1;
let guesses = 0;
let guessSubmit = document.getElementById("guessBtn");
let guessInput = document.getElementById("guess");
let message = document.getElementById("message");
guessSubmit.addEventListener("click", function() {
let guess = Number(guessInput.value);
guesses++;
if (guess === secretNumber) {
message.innerText = `Bravo! Vous avez deviné le nombre en ${guesses} tentatives!`;
guessInput.disabled = true;
guessSubmit.disabled = true;
} else if (guess < secretNumber) {
message.innerText = "Trop bas, réessayez!";
} else if (guess > secretNumber) {
message.innerText = "Trop haut, réessayez!";
}
});
```
Ce jeu utilise l'objet Math de JavaScript pour sélectionner un nombre aléatoire entre 1 et 100 et demande à l'utilisateur de deviner quel est ce nombre. Chaque fois que l'utilisateur soumet une réponse, le code compare cette réponse au nombre secret et affiche un message indiquant si la réponse est trop élevée, trop basse ou correcte. Le jeu se termine lorsque l'utilisateur devine correctement le nombre secret.
Pas mal du tout ! Maintenant, donnes-moi une idée de jeu que je peux faire en HTML, CSS et JS.
Bien sûr, voici une autre idée de jeu que vous pouvez créer en HTML, CSS et JS : Le jeu du memory.
HTML :
```
<!DOCTYPE html>
<html>
<head>
<title>Jeu du memory</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Jeu du memory</h1>
<p>Cliquez sur les cartes pour trouver les paires correspondantes!</p>
<div class="memory-grid">
<div class="memory-card" data-framework="a">
<img class="front-face" src="images/card-1.png">
<img class="back-face" src="images/card-back.png">
</div>
<div class="memory-card" data-framework="a">
<img class="front-face" src="images/card-1.png">
<img class="back-face" src="images/card-back.png">
</div>
<!-- Ajoutez les autres cartes ici -->
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS :
```
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 3em;
margin-top: 50px;
}
p {
font-size: 1.2em;
}
.memory-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
}
.memory-card {
width: 150px;
height: 150px;
margin: 10px;
perspective: 1000px;
cursor: pointer;
}
.memory-card img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.memory-card .back-face {
transform: rotateY(180deg);
}
.match {
border: 4px solid #4caf50;
}
.disabled {
pointer-events: none;
}
```
JavaScript :
```
const cards = document.querySelectorAll(".memory-card");
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add("flip");
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener("click", flipCard);
secondCard.removeEventListener("click", flipCard);
firstCard.classList.add("match");
secondCard.classList.add("match");
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove("flip");
secondCard.classList.remove("flip");
resetBoard();
}, 1000);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener("click", flipCard));
```
Ce jeu utilise les cartes mémoire et demande au joueur de cliquer sur deux cartes pour trouver les paires correspondantes. Le code utilise la manipulation de la DOM pour comprendre quelles cartes ont été sélectionnées, s'il y a une correspondance, et comment afficher les cartes.
jeu de "Pierre, Papier, Ciseaux"
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rock Paper Scissors Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Rock Paper Scissors</h1>
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>
CSS:
h1 {
text-align: center;
}
.buttons {
display: flex;
justify-content: center;
margin-top: 50px;
}
button {
margin: 0 10px;
padding: 10px 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #333;
color: #fff;
}
p {
text-align: center;
margin-top: 50px;
font-size: 24px;
font-weight: bold;
}
JS:
const choices = ["Rock", "Paper", "Scissors"];
function computerChoice() {
const randomIndex = Math.floor(Math.random() * 3);
return choices[randomIndex];
}
function compare(userChoice) {
const computer = computerChoice();
if (userChoice === computer) {
return "It's a tie!";
} else if (
(userChoice === "Rock" && computer === "Scissors") ||
(userChoice === "Paper" && computer === "Rock") ||
(userChoice === "Scissors" && computer
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rock Paper Scissors Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Rock Paper Scissors</h1>
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>
CSS:
h1 {
text-align: center;
}
.buttons {
display: flex;
justify-content: center;
margin-top: 50px;
}
button {
margin: 0 10px;
padding: 10px 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #333;
color: #fff;
}
p {
text-align: center;
margin-top: 50px;
font-size: 24px;
font-weight: bold;
}
JS:
const choices = ["Rock", "Paper", "Scissors"];
function computerChoice() {
const randomIndex = Math.floor(Math.random() * 3);
return choices[randomIndex];
}
function compare(userChoice) {
const computer = computerChoice();
if (userChoice === computer) {
return "It's a tie!";
} else if (
(userChoice === "Rock" && computer === "Scissors") ||
(userChoice === "Paper" && computer === "Rock") ||
(userChoice === "Scissors" && computer
C'est pas toi qui l'a codé.
Je suis sûr à 100% que c'est chatGPT
C'est ce que j'ai dit avant, que j'allais demander au chat
Et puis un jeu je pourrai mais il faudrait y passer des journées entières et ça ne me dit rien, aucune utilité pour moi
Fais-moi un jeu 3d avec html-css-js
Sorry I couldn't contact the ChatGPT think tank
| Sujets similaires | Réponses | Date |
|---|---|---|
| Test des 15 minutes ! | 14 | |
| ✨THE✨ test des limites de picafofo | 96 | |
| Test pour voir comment petit | 1 | |
| Test de grossesse | 4 | |
| Amélioration test | 3 |
Sujets populaires
-
-
- E