javascript - 如何让我的 keyup 功能在我的游戏中工作

Question

这有点遥不可及，但我最近一直在开发一款游戏，我为此感到非常自豪。虽然它不是 Minecraft，但就我的专业水平而言，它看起来还不错。不过，它只有一个问题。我的角色到处旅行。我从来没能让他只移动一个街区。如果有人具有高水平的编码专业知识，请查看此代码。有很多代码，所以可能需要一段时间，但我很感激我能得到的所有帮助。如果你能发现问题，请通知我。谢谢你。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

setInterval(terrainJumpLoop, 100);
setInterval(playerLeftLoop, 100);
setInterval(playerRightLoop, 100);

canvas.width = 1500;
canvas.height = 500;

var highTerrain = [];
var middleTerrain = [];
var lowTerrain = [];
var oreTerrain = [];

var biome = "";
var biomeSelector = 0;
var playerBlock = 0;
var terrainLength = canvas.width/25;
var unevenTerrainLocator = 0;
var gravityVar = 0;
var gravityStrength = 0;
var touchingGround = false;
var canMove = true;
var gameOn = false;

window.onerror = function (msg, url, lineNo, columnNo, error) {
    document.getElementById("paragraph").innerHTML = "Game has Stopped Abruptly Due to Error in Code";
    document.getElementById("wrongCodeLine").innerHTML = msg;
    document.getElementById("errorLineNo").innerHTML = "Line Number: " + lineNo.toString();
    window.stop();
};

var Player = {
    x:0,
    y:0,
    width:25,
    height:25,
    color:"gold"
};

function paintGameTrees(x, y){
    alert(x);
    alert(y);
}

function paintGameTerrain(){
    var grassBlock = {
        width:25,
        height:25,
        color:"green"
    };

    var dirtBlock = {
        width:25,
        height:25,
        color:"brown"
    };

    var stoneBlock = {
        width:25,
        height:25,
        color:"gray"
    };

    var coalBlock = {
        width:25,
        height:25,
        color:"#383838"
    };

    var ironBlock = {
      width:25,
      height:25,
      color:"#C0C0C0"
    };

    var lava = {
        width:25,
        height:25,
        color:"red"
    };

    var snowBlock = {
        width:25,
        height:25,
        color:"white"
    };

    for(i = 0; i < terrainLength; i++){
        if(highTerrain[i] === 0){
            paintGameItems(i*25, canvas.height - 100, grassBlock.width, grassBlock.height, grassBlock.color);
        }
        else if(highTerrain[i] === 7){
            paintGameItems(i*25, canvas.height - 100, snowBlock.width, snowBlock.height, snowBlock.color);
        }
    }
    for(i = 0; i < terrainLength; i++){
        if(middleTerrain[i] === 0){
            paintGameItems(i*25, canvas.height - 75, grassBlock.width, grassBlock.height, grassBlock.color);
        }
        else if(middleTerrain[i] === 1){
            paintGameItems(i*25, canvas.height - 75, dirtBlock.width, dirtBlock.height, dirtBlock.color);
        }
        else if(middleTerrain[i] === 7){
            paintGameItems(i*25, canvas.height - 75, snowBlock.width, snowBlock.height, snowBlock.color);
        }
    }
    for(i = 0; i < terrainLength; i++){
        if(lowTerrain[i] === 0){
            paintGameItems(i*25, canvas.height - 50, grassBlock.width, grassBlock.height, grassBlock.color);
        }
        else if(lowTerrain[i] === 1){
            paintGameItems(i*25, canvas.height - 50, dirtBlock.width, dirtBlock.height, dirtBlock.color);
        }
        else if(lowTerrain[i] === 2){
            paintGameItems(i*25, canvas.height - 50, stoneBlock.width, stoneBlock.height, stoneBlock.color);
        }
        else if(lowTerrain[i] === 7){
            paintGameItems(i*25, canvas.height - 50, snowBlock.width, snowBlock.height, snowBlock.color);
        }
    }
    for(i = 0; i < terrainLength; i++){
        if(oreTerrain[i] === 2){
            paintGameItems(i*25, canvas.height - 25, stoneBlock.width, stoneBlock.height, stoneBlock.color);
        }

        else if(oreTerrain[i] === 4){
            paintGameItems(i*25, canvas.height - 25, coalBlock.width, coalBlock.height, coalBlock.color);
        }

        else if(oreTerrain[i] === 5){
            paintGameItems(i*25, canvas.height - 25, ironBlock.width, ironBlock.height, ironBlock.color);
        }
        else if(oreTerrain[i] === 6){
            paintGameItems(i*25, canvas.height - 25, lava.width, lava.height, lava.color)
        }
        else if(oreTerrain[i] === 7){
            paintGameItems(i*25, canvas.height - 25, lava.width, lava.height, lava.color)
        }
    }
}

function setItemAttributes(){
    console.log("ItemAttributes Successfully Set");
    paintGameItems(Player.x, Player.y, Player.width, Player.height, Player.color);
    console.log("paintGameItems Successfully Called");
}

function randomTerrain(){
    console.log("randomTerrain successfully called");

    /*
    If the number passed is 0, then the block will be grass
    If the number 1 is passed, then the block will be dirt
    If the number 2 is passed, then the block will be stone
    If the number 3 is passed, then the block will be nothing
    If the number 4 is passed, then the block will be coal
    If the number 5 is passed, then the block will be iron
    If the number 6 is passed, then the block will be lava
    If the number 7 is passed, then the block will be snow
    */

    var terrainVar = Math.random() * 10;
    var oreVar = Math.random() * 10;

    if(biome === "plains") {
        if (terrainVar > 0 && terrainVar < 6) {
            highTerrain.push(0);
            middleTerrain.push(1);
            lowTerrain.push(2)
        } else if (terrainVar > 6 && terrainVar < 9) {
            highTerrain.push(3);
            middleTerrain.push(0);
            lowTerrain.push(1);
        } else {
            highTerrain.push(3);
            middleTerrain.push(3);
            lowTerrain.push(0);
        }

        console.log("oreVar = " + oreVar);

        if (oreVar < 6) {
            oreTerrain.push(2);
        } else if (oreVar > 6 && oreVar < 8) {
            oreTerrain.push(4);
        } else if (oreVar > 8 && oreVar < 9) {
            oreTerrain.push(5);
        } else if (oreVar > 9) {
            oreTerrain.push(6)
        }
    }

    else if(biome === "taiga") {
        if (terrainVar > 0 && terrainVar < 6) {
            highTerrain.push(7);
            middleTerrain.push(7);
            lowTerrain.push(2)
        } else if (terrainVar > 6 && terrainVar < 9) {
            highTerrain.push(3);
            middleTerrain.push(7);
            lowTerrain.push(7);
        } else {
            highTerrain.push(3);
            middleTerrain.push(3);
            lowTerrain.push(7);
        }

        console.log("oreVar = " + oreVar);

        if (oreVar < 6) {
            oreTerrain.push(2);
        } else if (oreVar > 6 && oreVar < 8) {
            oreTerrain.push(4);
        } else if (oreVar > 8 && oreVar < 9) {
            oreTerrain.push(5);
        } else if (oreVar > 9) {
            oreTerrain.push(6)
        }
    }
}

function paintGameItems(itemX, itemY, itemWidth, itemHeight, itemColor){
    //console.log(itemX, itemY, itemWidth, itemHeight);
    ctx.beginPath();
    ctx.fillStyle = itemColor;
    ctx.fillRect(itemX, itemY, itemWidth, itemHeight);
    ctx.fill();
}

function selectBiome(){
    biomeSelector = Math.random() * 10;

    if(biomeSelector <= 7){
        biome = "plains";
    }

    else if(biomeSelector > 7){
        biome = "taiga";
    }
}

function playerLocationTracker(){
    console.log("Player.x = " + Player.x + ". canMove = " + canMove + ". playerBlock = " + playerBlock);
}

function playerJump(e){
    addEventListener("keydown", function(e) {
        if (e.keyCode === 32 || e.keyCode === 87 || e.keyCode === 38) {
            if (touchingGround) {
                for (i = 0; i < 1; i++) {
                    Player.y -= 1;
                }
            }
        }
    });
}

function playerLeft(e){
    addEventListener("keydown", function(e) {
        if(canMove) {
            if (e.keyCode === 65 || e.keyCode === 37){
                console.log("Left");
                canMove = false;
                playerBlock -= 0.04;
                Player.x -= 0.4;
                canMove = true;
                e.keyCode = 0;
            }
        }
    });
}

function playerRight(e){
    addEventListener("keydown", function(e) {
        if (canMove){
            if (e.keyCode === 68 || e.keyCode === 39) {
                console.log("Right");
                canMove = false;
                playerBlock += 0.04;
                Player.x += 0.4;
                canMove = true;
                e.keyCode = 0;

            }
        }
    });
}

function playerGravity(){
    unevenTerrainLocator = Math.round(playerBlock);
    if(highTerrain[unevenTerrainLocator] === 0 || highTerrain[unevenTerrainLocator] === 7){
        gravityVar = canvas.height - 12;
    }
    else if(middleTerrain[unevenTerrainLocator] === 0 || middleTerrain[unevenTerrainLocator] === 7){
        gravityVar = canvas.height - 100;
    }
    else if(lowTerrain[unevenTerrainLocator] === 0 || lowTerrain[unevenTerrainLocator] === 7){
        gravityVar = canvas.height - 75
    }

    if(gravityVar <= Player.y){
        Player.y = gravityVar;
        gravityStrength = 0;
        touchingGround = true;
    }
    else if(gravityVar > Player.y){
        touchingGround = false;
        gravityStrength +=5;
        Player.y += gravityStrength;
    }
}

function terrainJumpLoop(){
    if(gameOn){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        playerGravity();
        playerJump();
        playerLocationTracker();
        paintGameItems(Player.x, Player.y, Player.width, Player.height, Player.color);
        paintGameTerrain();
    }
}

function playerLeftLoop(){
    playerLeft();
}

function playerRightLoop(){
    playerRight();
}

function initializeGame(){
    var treeX = (Math.round(Math.random()*(canvas.width/25)))*25;
    var treeY = 0;
    if(highTerrain[treeX/25] === 0){
        treeY = canvas.height - 100;
    }
    else if(middleTerrain[treeX/25] === 0){
        treeY = canvas.height - 75;
    }
    else if(lowTerrain[treeX/25]){
        treeY = canvas.height - 50;
    }

    paintGameTrees(treeX, treeY);

    if (biome === "plains") {
        document.getElementById('mediaOverworld').play();
    }
    else if(biome === "taiga"){
        document.getElementById('mediaGlaciers').play();
    }
}

function startGameFunction() {
    console.clear();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById('mediaOverworld').pause();
    document.getElementById('mediaOverworld').currentTime = 0;
    document.getElementById('mediaGlaciers').pause();
    document.getElementById('mediaGlaciers').currentTime = 0;
    highTerrain = [];
    middleTerrain = [];
    lowTerrain = [];
    oreTerrain = [];
    selectBiome();
    Player.x = 0;
    Player.y = 0;
    document.getElementById("paragraph").innerHTML = "Music and Game Has Successfully Started";
    console.log("Game Has Successfully Started");
    setItemAttributes();
    for(i = 0; i < terrainLength; i++){
        randomTerrain();
        console.log("Terrain Layer Successfully Generated")
    }
    console.log(highTerrain);
    console.log(middleTerrain);
    console.log(lowTerrain);
    console.log(oreTerrain);
    initializeGame();
    paintGameTerrain();
    document.getElementById("startBtn").innerHTML = "Reset the Game";
    gameOn = true;
}

body{
     background-color:black;
     color:white;
 }

canvas{
    background-color:aqua;
    margin:0 auto;
}

#ifError {
    color: red;
    font-family: "Arial Black";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple 2D JavaScript Platformer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas"></canvas>
<br>
<button onclick="startGameFunction()" id="startBtn">Start The Game</button>
<p id="paragraph"></p>
<div id="ifError">
    <p id="wrongCodeLine"></p>
    <p id="errorLineNo"></p>
</div>
<audio id="mediaOverworld">
    <source src="Audio/Overworld.mp3">
</audio>
<audio id="mediaGlaciers">
    <source src="Audio/Glaciers.mp3">
</audio>
<script src="game.js"></script>
</body>
</html>

这是很多要调试的代码，但如果你能做到，我会非常感谢你。

标签： javascripthtmlcss