Sobre a Aula
Project 4: Guessing Game
Description: This project is a simple guessing game where the user tries to guess a random number.
Requirements:
- The project should generate a random number between 1 and 100.
- The project should allow the user to enter a guess.
- The project should inform the user if the guess is correct, high, or low.
Steps:
- Create a directory for the project:
mkdir guessing-game
- Install dependencies:
npm install vue
- Create initial files:
touch index.html touch main.js touch style.css
- Implement the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
</head>
<body>
<div id="app">
<h1>Guessing Game</h1>
<p>Try to guess a number between 1 and 100.</p>
<input type="number" v-model="guess">
<button @click="guessNumber">Guess</button>
<p v-if="correct">
Congratulations! You guessed it!
</p>
<p v-else-if="guess < number">
Your guess is too low.
</p>
<p v-else>
Your guess is too high.
</p>
</div>
</body>
</html>
JavaScript
import Vue from 'vue';
export default {
name: 'App',
data() {
return {
number: Math.floor(Math.random() * 100) + 1,
guess: '',
correct: false,
};
},
mounted() {
},
methods: {
guessNumber() {
this.correct = this.number === this.guess;
},
},
};
CSS
body {
font-family: sans-serif;
}
- Run the project:
npm run serve
This project will display the following screen:
Guessing Game Try to guess a number between 1 and 100. -
Challenges:
- Add functionality to allow the user to play again after guessing the number correctly.
- Add functionality to allow the user to see the number the computer chose.
Conclusion:
This project is a good way to practice the concepts learned in the course, such as:
- Using
v-modelattributes to bind component data to the user interface. - Component methods to perform actions.
- Random functions.
Evaluation:
To evaluate this project, you can consider the following criteria:
- Does the project meet the specified requirements?
- Is the code well-written and organized?
- Is the project functional and intuitive?
Suggestions:
If you want to make this project more challenging, you can add the following features:
- Allow the user to select the range of numbers to guess.
- Allow the user to play against a friend.
- Allow the user to save their score history.
Entrar na conversa