小恐龍無敵代碼的詳細闡述

一、代碼綜述

function gameStart() {
    let container = document.createElement('div');
    container.className = 'container';

    let character = document.createElement('div');
    character.className = 'character';

    let ground = document.createElement('div');
    ground.className = 'ground';

    container.appendChild(character);
    container.appendChild(ground);
    document.body.appendChild(container);

    let gravity = 0.2;
    let velocity = 0;
    let jumpStrength = -5;

    let keys = {};

    document.addEventListener('keydown', function(event) {
        keys[event.keyCode] = true;
    });
    document.addEventListener('keyup', function(event) {
        keys[event.keyCode] = false;
    });

    function loop() {
        if (keys['32'] || keys['38']) {
            if (character.classList != 'character jump') {
                character.classList.add('jump');
                velocity = jumpStrength;
            }
        }

        velocity += gravity;
        character.style.top = character.offsetTop + velocity + 'px';

        if (character.offsetTop + character.offsetHeight > ground.offsetTop) {
            character.style.top = ground.offsetTop - character.offsetHeight + 'px';
            velocity = 0;
            character.classList.remove('jump');
        }

        window.requestAnimationFrame(loop);
    }

    loop();
}
gameStart();

小恐龍無敵代碼是一段Javascript程序，它實現了一個簡單的小恐龍跳躍遊戲。代碼包含一個名為gameStart()的函數，在頁面加載時自動調用該函數創建遊戲的主要元素。函數主體內部定義了一些變量和函數，以及通過addEventListener()函數來響應玩家的按鍵操作，實現小恐龍的跳躍。

二、小標題1 – 遊戲元素

小恐龍無敵代碼中主要涉及到三個遊戲元素，分別是容器（container）、角色（character）和地面（ground）。

容器是一個元素，包含了角色和地面兩個子元素。角色和地面都是元素，其中角色是小恐龍的形象，地面是遊戲的基礎。這三個元素都具有自己的CSS類名，可以通過CSS樣式對其進行樣式控制。

.container{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background-color:#f7f7f7;
}

.character{
    position:absolute;
    left:calc(50vw - 25px);
    bottom:0;
    width:50px;
    height:50px;
    background-color:#555;
}

.ground{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:10px;
    background-color:#333;
}

三、小標題2 – 跳躍動作

小恐龍無敵代碼中通過監聽玩家的按鍵操作，響應空格鍵或者上箭頭鍵來使小恐龍跳躍。跳躍動作的具體實現是通過character元素的CSS類名來控制的，如果沒有跳躍動作，character元素的類名是’character’，如果正在跳躍，character元素的類名則為’character jump’。

document.addEventListener('keydown', function(event) {
    keys[event.keyCode] = true;
});
document.addEventListener('keyup', function(event) {
    keys[event.keyCode] = false;
});

if (keys['32'] || keys['38']) {
    if (character.classList != 'character jump') {
        character.classList.add('jump');
        velocity = jumpStrength;
    }
}

if (character.offsetTop + character.offsetHeight > ground.offsetTop) {
    character.style.top = ground.offsetTop - character.offsetHeight + 'px';
    velocity = 0;
    character.classList.remove('jump');
}

四、小標題3 – 主循環

小恐龍無敵代碼的主要邏輯是通過一個主循環來實現的。主循環使用了requestAnimationFrame()函數每幀更新小恐龍的位置，並且根據小恐龍當前位置和跳躍狀態來計算velocity變量的值，以實現小恐龍的跳躍和落地動作。

let gravity = 0.2;
let velocity = 0;
let jumpStrength = -5;

function loop() {
    if (keys['32'] || keys['38']) {
        if (character.classList != 'character jump') {
            character.classList.add('jump');
            velocity = jumpStrength;
        }
    }

    velocity += gravity;
    character.style.top = character.offsetTop + velocity + 'px';

    if (character.offsetTop + character.offsetHeight > ground.offsetTop) {
        character.style.top = ground.offsetTop - character.offsetHeight + 'px';
        velocity = 0;
        character.classList.remove('jump');
    }

    window.requestAnimationFrame(loop);
}

loop();