當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】猜数字小游戏
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】猜数字小游戏
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. HTML代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="style.css" /><title>Guess My Number!</title></head><body><header><h1>Guess My Number!</h1><p class="between">(Between 1 and 20)</p><button class="btn again">Again!</button><div class="number">?</div></header><main><section class="left"><input type="number" class="guess" /><button class="btn check">Check!</button></section><section class="right"><p class="message">Start guessing...</p><p class="label-score">💯 Score: <span class="score">20</span></p><p class="label-highscore">🥇 Highscore: <span class="highscore">0</span></p></section></main><script src="script.js"></script></body> </html>2. CSS代碼
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');* {margin: 0;padding: 0;box-sizing: inherit; }html {font-size: 62.5%;box-sizing: border-box; }body {font-family: 'Press Start 2P', sans-serif;color: #eee;background-color: #222;/* background-color: #60b347; */ }/* LAYOUT */ header {position: relative;height: 35vh;border-bottom: 7px solid #eee; }main {height: 65vh;color: #eee;display: flex;align-items: center;justify-content: space-around; }.left {width: 52rem;display: flex;flex-direction: column;align-items: center; }.right {width: 52rem;font-size: 2rem; }/* ELEMENTS STYLE */ h1 {font-size: 4rem;text-align: center;position: absolute;width: 100%;top: 52%;left: 50%;transform: translate(-50%, -50%); }.number {background: #eee;color: #333;font-size: 6rem;width: 15rem;padding: 3rem 0rem;text-align: center;position: absolute;bottom: 0;left: 50%;transform: translate(-50%, 50%); }.between {font-size: 1.4rem;position: absolute;top: 2rem;right: 2rem; }.again {position: absolute;top: 2rem;left: 2rem; }.guess {background: none;border: 4px solid #eee;font-family: inherit;color: inherit;font-size: 5rem;padding: 2.5rem;width: 25rem;text-align: center;display: block;margin-bottom: 3rem; }.btn {border: none;background-color: #eee;color: #222;font-size: 2rem;font-family: inherit;padding: 2rem 3rem;cursor: pointer; }.btn:hover {background-color: #ccc; }.message {margin-bottom: 8rem;height: 3rem; }.label-score {margin-bottom: 2rem; }3. .prettierrc
{"singleQuote": true,"arrowParens": "avoid" }大概樣式
4. 要求
5. JavaScript
'use strict'; //嚴(yán)格模式 //DOM是什么 //DOM代表文檔對象模型 DOM允許我們使用JavaScript訪問HTML元素和樣式來操縱他們 //更改文本、更改HTML屬性并更改CSS樣式/* //讀取文字 console.log(document.querySelector('.message').textContent);//更改文字 document.querySelector('.message').textContent = 'Correct Number!'; console.log(document.querySelector('.message').textContent);//score document.querySelector('.number').textContent = 13; document.querySelector('.score').textContent = 10;//input document.querySelector('.guess').value = 23; console.log(document.querySelector('.guess').value); *///事件監(jiān)聽器 addEventListener// Math.trunc 轉(zhuǎn)成整數(shù) //設(shè)定隨機(jī)號碼 let secretNumber = Math.trunc(Math.random() * 20) + 1;//設(shè)置分?jǐn)?shù) let score = 20; //設(shè)置最高分 let highscore = 0;//重構(gòu) const displayMessage = function (message) {document.querySelector('.message').textContent = message; };//控制臺(tái)獲得用戶輸入的字符 還有字符類型 document.querySelector('.check').addEventListener('click', function () {const guess = Number(document.querySelector('.guess').value);console.log(guess, typeof guess);//1.如果沒有猜數(shù)字if (!guess) {displayMessage('No Number!');} else if (guess === secretNumber) {//2.如果猜的數(shù)字與答案一樣 改變背景displayMessage('Correct Number');document.querySelector('.number').textContent = secretNumber;//修改背景document.querySelector('body').style.backgroundColor = '#60b347';document.querySelector('.number').style.width = '30rem';if (score > highscore) {//如果當(dāng)前分?jǐn)?shù)比用戶最好分?jǐn)?shù)高，改變用戶最好分?jǐn)?shù)highscore = score;document.querySelector('.highscore').textContent = highscore;}} else if (guess !== secretNumber) {//如果猜的數(shù)字不準(zhǔn)if (score > 1) {//猜的剩余次數(shù)比1大，繼續(xù)猜// document.querySelector('.message').textContent =// guess > secretNumber ? 'too high!' : 'too low';score--;//三元判斷 如果猜的數(shù)比答案大為真，就寫太高了，若為假，就寫太低了displayMessage(guess > secretNumber ? 'too high!' : 'too low');document.querySelector('.score').textContent = score;} else {//猜的次數(shù)耗盡 結(jié)束游戲displayMessage('you lost the game ');document.querySelector('.score').textContent = 0;}} });//重新開始游戲 document.querySelector('.again').addEventListener('click', function () { //可以當(dāng)作是游戲的初始化score = 20;secretNumber = Math.trunc(Math.random() * 20) + 1;displayMessage('String guessing....');// document.querySelector('.message').textContent = 'String guessing....';document.querySelector('.score').textContent = score;document.querySelector('.number').textContent = '?';document.querySelector('.guess').value = '';document.querySelector('body').style.backgroundColor = '#222';document.querySelector('.number').style.width = '15rem'; });總結(jié)
以上是生活随笔為你收集整理的【JavaScript】猜数字小游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Thinkphp 5.1和Thinkph
- 下一篇： 印象深刻的一篇中学文章：华罗庚《统筹方法