[ミニプロジェクト]Number Baseball

30601 ワード
スモールプロジェクト JavaScript テキストリンク
GitHub

要求


作成
  • ゲーム開始ボタン
  • ゲーム開始ボタンをクリックすると、ランダムに3桁(ユーザーに表示されない)が生成されます.
  • 数字入力欄
    • を作成する.
  • ユーザがEnterpriseキーをクリックすると、入力値がビット数でない場合、警告ウィンドウ
    • が表示される.
  • ユーザがEnterpriseキーをクリックすると、ステップ2で生成する数字がユーザ入力値と比較される:
    • .
  • の位置で比較し、同じ位置に同じ数字が何個あるかを判断します.(ストライク数)
  • の位置で比較し、他の位置に同じ数字が何個あるかを判断します.
  • 画面には、ストライクとボールの数が表示されます.
  • ユーザーが10回試行することを制限します.
  • ゲーム再開ボタンを作成し、再開できます.

    • 実行画面


  • リンク:https://changyun-go.github.io/Mini-Project/3.%20Number%20Baseball/2

    • Code


    HTML

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="script.js" type="text/javascript" defer></script>
		<title>Number Baseball</title>
	</head>
	<body>
		<div id="title">⚾Number Baseball</div><br>
		<div class="container">
			<div class="item-1">
				<button id="start-btn" onclick="NumMaker()">START</button><br>
				<input id="num_input" type="number" onkeypress="enter()">
			</div>
			<div class="item-2">
				<div id="score-board"></div>
			</div>
		</div>
		</body>
</html>

    CSS

    @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');

body{
	margin: 0;
}
#title{
	background-color: red;
	font-family: 'Josefin Sans', sans-serif;
	text-align: center;
	font-size: 70px;
	height: 100px;
	border-bottom: 10px solid black;
}
#start-btn{
  appearance: none;
	font-family: 'Josefin Sans', sans-serif;
	display: block;
	width: 300px;
	height: 300px;
	margin: 70px auto 100px;
	font-size: 60px;
	border-radius: 150px;
	background-color: lightgray;
	box-shadow: 3px 3px 3px black;
	transition-duration: 0.3s;
}
#start-btn:active{
  box-shadow: none;
	margin-left: auto + 5px;
	margin-top: 75px;
}
#num_input{
	visibility: hidden;
	font-family: 'Josefin Sans', sans-serif;
	display: block;
	margin: 0px auto 50px;
	width: 300px;
	font-size: 110px;
	border: 10px solid black;
	border-radius: 20px;
}
#score-board{
	font-family: 'Nanum Brush Script', cursive;
	font-size: 55px;
	color: white;
	margin: 0px 0px 0px 50px;
	padding-top: 25px;
}
.container{
	display: flex;
	flex-direction: row;
}
.item-1{
	flex-basis: 50%;
}
.item-2{
	flex-basis: 50%;
	background-color: green;
	border: 20px solid #8B4513;
	margin-right: 50px;
}

    JavaScript

    let Number = 0;
let MyNum = 0;
let NumInput = document.querySelector("#num_input");
let ball = 0;
let strike = 0;
let count = 1;
let NewNum = 0;
let i = 0;
let j = 0;

function NumMaker(){
	Number = 0;
	count = 1;
	ball = 0;
	strike = 0;
	document.querySelector("#score-board").textContent = null;
	Number = Math.floor(Math.random() * 10).toString();
	for(i = 0; i < 2; i++){
		NewNum = Math.floor(Math.random() * 10).toString()
		if(Number[i] !== NewNum && Number[i-1] !== NewNum){
			Number += NewNum;
		}
		else{
			i--;
		}
	}
	document.querySelector("#num_input").style.visibility = "visible";
	document.querySelector("#start-btn").textContent = "RESTART";
	NumInput.value = null;
}

function enter(){
	ball = 0;
	strike = 0;
	if(event.keyCode == 13){
		MyNum = NumInput.value;
		if(MyNum.length !== 3){
			alert("세자리 숫자를 입력해주세요!");
		}
		else{
			for(j = 0; j < 3; j++){
				if(Number[j] === MyNum[j]){
					strike++;
				}
				else if(Number.includes(MyNum[j])){
					ball++;
				}
			}
			NumInput.value = null;
			if(strike === 3){
				confirm("WIN🎉\n다시 도전하시겠습니까?");
				NumMaker();
			}
			else if(ball === 0 && strike === 0){
				document.querySelector("#score-board").innerHTML += "<b>"+count+"회</b> &nbsp;&nbsp;"+"OUT &nbsp;&nbsp;"+MyNum+"<br>";
			}
			else{
				document.querySelector("#score-board").innerHTML += "<b>"+count+"회</b> &nbsp;"+ball+"B   &nbsp;"+strike+"S &nbsp;"+MyNum+"<br>";
			}
			count++;
			if(count === 11){
				confirm("LOSE😭\n다시 도전하시겠습니까?");
				NumMaker();
			}
		}
	}
}

    P.S.


    javascriptを正しく使うのは初めての課題で、他の参考なしに実現できて嬉しいです.😊 まだ始まったばかりですが、こんな小さな成果を感じながら、進みましょう.😇

    Reference

  • Number Baseballbyバニラコード学習ガイド
    • Server
    Linuxクラスタ管理ツールClustershell,pssh