JavaScriptを使ったゲームアイテム

内容:純JavaScriptアクションdom要素を使用して作成されたアイテム

プロジェクトの内容

ゲームボタンを押してカウントダウンを開始し、時間内に虫やニンジンを捕まえるゲーム.

機能実装

再生ボタンを押すと
虫食いニンジン
開始数
虫ニンジン数
「再起動」ボタン

プロジェクトで初めて使用する関数

QuerySelector(.cssclass)-classを検索して選択します.
element.getBoodingClientRect()-上のコレクタで定義された範囲のウィンドウサイズ情報を読み込みます.
createElement(「htmltag」)-htmlタグ要素の作成
setAttribute(「class」,className)-生成されたエンティティの他の要素exを作成します.
radomNumber-組み込み関数random()を使用したランダム関数
setInterval-指定した関数を設定した1時間以内に繰り返し実行します.
element.innerText-htmltag間にテキストを挿入
element.style.type-スタイルタイプと値を挿入
element.appendChild()-要素サブアイテムを貼り付けて生成されたサブ値

function radomNumber(min, max){
    return Math.random() * (max - min) + min;
}

オブジェクト座標の実装

function initGame() {
    console.log(fieldRect)
    addItem('carrot', 5, 'img/carrot.png')
    addItem('bug', 5, 'img/bug.png')


}
function addItem(className, count, imgPath){
    const x1 = 0;
    const y1 = 0;
    const x2 = fieldRect.width - CARROT_SIZE;
    const y2 = fieldRect.height- CARROT_SIZE;
    for(let i = 0; i < count; i++){
        const item = document.createElement('img')
        item.setAttribute('class', className);
        item.setAttribute('src', imgPath);
        item.style.position = 'absolute';
        const x = radomNumber(x1, x2);
        const y = radomNumber(y1, y2);
        item.style.left = `${x}px`;
        item.style.top = `${y}px`;
        field.appendChild(item);
    }
}

関数クラス名、オブジェクト数、イメージパスをパラメータ値に割り当てることで、上で指定した数に基づいてhtml値とstyle値を生成する関数を作成します.ランダム関数を使用してxy値を各オブジェクトに割り当て、虫とニンジンをウィンドウ内で任意の座標で出力します.

タイマ実装

const GAME_DURATION_SEC = 5;

function startGameTimer(){
    let remainingTimeSec = GAME_DURATION_SEC;
    upadteTimerText(remainingTimeSec);
    timer = setInterval(()=>{
        if(remainingTimeSec <= 0){
            clearInterval(timer);
            return;
        }
        upadteTimerText(--remainingTimeSec);
    }, 1000)
}

function upadteTimerText(time){
    const minutes = Math.floor(time / 60);
    const seconds = time % 60
    gameTimer.innerText = `${minutes}:${seconds}`
}

コードの内容.
setIntervalを使用してremainingTimeSecに割り当てられた5秒を繰り返して減らし、upadteTimerText()関数の実行カウントが0の場合、呼び出しタイマはAPIを終了し、clearInterval(timer)returnを使用して条件文から終了する

gameStop

function stopGame(){
    stopGameTimer();
    hideGameButton();
    showPopupWithText('REPLAY');
}

function stopGameTimer(){
    clearInterval(timer);
}
function hideGameButton(){
    gameBtn.style.visibility = 'hidden';
}
function showPopupWithText(text){
    popUpText.innerHTML = text;
    popUp.classList.remove('pop-up--hide')
}

タイマーを停止するには、設定タイマーで作成したclearInterval APIを再呼び出します.
ゲームボタンを隠すために指定したcssの可視性値に変更
上のテキスト値を受信してタグに表示し、デフォルトhideのclass指定値を削除します(削除時にcss指定のdisplay:noneを削除します).

click field

field.addEventListener('click', (event) =>onFieldClick(event))

function onFieldClick(event){
    if(!started){
        return;
    }const target = event.target;
    if(target.matches('.carrot')){
        target.remove();
        score++;
        updateScoreBoard()}
        if(score === CARROT_COUNT){
            finishGame(true)
        }
        else if (target.matches('.bug')){
            stopGameTimer();
            finishGame(false)
        }
    };
    function updateScoreBoard(){
    gameScore.innerText = CARROT_COUNT - score;
}

function finishGame(win) {
    started = false;
    hideGameButton();
    showPopupWithText(win ? 'WIN💯' : 'LOSE🖕')
}
function hideGameButton(){
    gameBtn.style.visibility = 'hidden';
}