[MiniWeb Project]ワードドラゴンゲーム

24444 ワード
Mini Web Project ドラゴンを引き継ぐ テキストリンク

¥2,000要求

  • ゲームが始まる前にどれだけの人が参加して、
    • を選びます
  • 最初の参加者は単語
    • の入力を開始する.
  • 入力提示語が正しいか否かを判断する
    • .
  • が正しい場合は、次の参加者に移動し、間違った単語を入力すると、単語エラーの警告ウィンドウがポップアップされます.


    • 🖊 ゲーム開始前

  • プロンプトを使用してウィンドウを開き、参加者を入力します.
  • 確認関数には、質問、確認、キャンセルボタン付きのウィンドウが表示されます.テンプレートライブラリを使用して変数パリティを受信し、問題を含むウィンドウを表示します.
    • const participant = parseInt(prompt('몇 명이 참가하나요?'));
const yesOrNo = confirm(`${participant}명 맞나요?`);

    🖊 並べ替え&ヒント単語


    シーケンス数が
  • の参加者の数より小さい場合は、変数order(シーケンスビット)1を加え、ドアがループしている場合は入力1の論理でソートします.
    const order = parseInt(orderNumber.textContent);

    if (order + 1 > participant) {
      orderNumber.textContent = 1;
    } else {
      orderNumber.textContent = order + 1;
    }
  }
  • wordとnewWordをletと宣言した後、ヒント語が空であれば、入力した単語を書き出してヒント語の論理になります.プロンプト語がコミットされ、inputウィンドウのテキストが空の文字列に変わります.
  • 単語が空でない場合は、単語の最後の文字がnewWordの最初の位置と一致しているかどうかを確認します.
  • が発行されると、ページが初期化されないようにevent.preventDefault()が提供される.
    • event.preventDefault();

if (!word || word[word.length - 1] === newWord[0]) {
    word = newWord;
    submitWord.textContent = word;
}
  • エラーの答えを入力するとalertを使用して警告情報を含むウィンドウを開きます.
    • else {
    alert('올바르지 않은 단어입니다!');
  }

    🖊 フォントの色を0.5秒単位で変更します(突然試してみたいのですが...)

  • 色の配列を作ります.
  • Math.random関数を使用して、アレイ長に適したランダム数字
    • を抽出します.
  • setIntaval関数に関数名と時間を設定し、関数を0.5秒単位で実行します.
    • const coloringFont = document.querySelector('#coloring');
let colorList = ['teal', 'rgb(184, 130, 235)', 'cornflowerblue', 'tomato'];
let count = 0;

function randomColor() {
  const randomNumber = Math.floor(Math.random() * colorList.length);
  coloringFont.style.color = colorList[randomNumber];
}

randomColor();
setInterval(randomColor, 500);

    💡 完全なコード


    ¥HTML(bodyから)

    <body>
  <div class='container'>
  <div class='participant-box' id='coloring'>
    <span class='order-number'>1</span>번째 참가자
  </div>
  <div class="word-box">제시어: <span class='submit-word'></span></div>
  <form class='input-box'>
    <input type='text'>
    <button type='button'>Click Me!</button>
  </form>
  </div>
<script src='index.js'></script>
<script
		src="https://kit.fontawesome.com/6478f529f2.js"
		crossorigin="anonymous"
	></script>
</body>
</html>

    ⭕️ JavaScript

    const participant = parseInt(prompt('몇 명이 참가하나요?'));
const yesOrNo = confirm(`${participant}명 맞나요?`);

const orderNumber = document.querySelector('.order-number');
const submitWord = document.querySelector('.submit-word');
const form = document.querySelector('form');
const input = document.querySelector('input');
const button = document.querySelector('button');

let word; 
let newWord; 

function handleClickButton(event) {
  event.preventDefault();
  
  if (!word || word[word.length - 1] === newWord[0]) {
    word = newWord;
    submitWord.textContent = word;
    const order = parseInt(orderNumber.textContent);

    if (order + 1 > participant) {
      orderNumber.textContent = 1;
    } else {
      orderNumber.textContent = order + 1;
    }
  } else {
    alert('올바르지 않은 단어입니다!');
  }
  input.value = '';
  input.focus();
}

function handleSubmitText(event) {
  newWord = event.target.value;
}

form.addEventListener('submit', handleClickButton);
input.addEventListener('input', handleSubmitText);

const coloringFont = document.querySelector('#coloring');
let colorList = ['teal', 'rgb(184, 130, 235)', 'cornflowerblue', 'tomato'];
let count = 0;

function randomColor() {
  const randomNumber = Math.floor(Math.random() * colorList.length);
  coloringFont.style.color = colorList[randomNumber];
}

randomColor();
setInterval(randomColor, 500);
    参照と質問のソース:ZerochoTV ES 2021 JavaScriptチュートリアル
    C#の50掃雷
    システムのデフォルト言語とシステムがサポートする言語のリスト