0

問題の解決方法がわかりません。左+スペースを一緒に押し続けるとアニメーションは機能しますが、左を押し続けると（そのままに）、次にスペースを押すと（1回、左を押し続ける）、アニメーションはジャンプしますが、左に移動しません...他のキーを押してもアニメーションは停止します（リセットするには、すべてを残す必要があります）。誰かが私になぜそうなのか説明して、私にいくつかの実用的な解決策を教えてもらえますか？どうもありがとうございます！これはコードです：

<style>
#map{
    position:relative;
    height:220px;
    width:800px;
}
#character{
    height:100px;
    width:100px;
    position:absolute;
    bottom: 10px;
    left: 0px;
    z-index:1;
}
</style>
<div id="map"><div id="character"><img src="images/bart.gif"></div></div>
<script>
enableJump = true;
jump = function(){
    if(enableJump){ enableJump = false;
        salta = function(){
            if(flagY){
                posY++;
                if(posY >= 90) flagY = false;
                jj = document.getElementById('character').style.bottom=posY;
            }
            else{
                posY--;
                jj = document.getElementById('character').style.bottom=posY;
                if(posY < 10){
                    flagY = true;
                    clearInterval(j);
                    enableJump = true;
                    up = false;
                }
            }
        }
        j = setInterval(salta,8);
    }
}
up = false; dx = false;
document.onkeydown = function(evt){
    code = evt.keyCode;
    if(code == 32) up=true;
    if(code == 39) dx=true;
    moveCharacter();
}
document.onkeyup = function(evt){
    code = evt.keyCode;
    if(code == 32) up=false;
    if(code == 39) dx=false;
}
posX = 10; posY = 10; flagY = true; var j;
moveCharacter = function(){
    if(dx == true && up == true){
        jump();
        posX+=10;
        x1 = document.getElementById('character').style.backgroundImage='url(images/character_left.gif)';
        temp = document.getElementById('character').style.left=posX;
    }
    else if(dx){
        posX+=10;
        x1 = document.getElementById('character').style.backgroundImage='url(images/character_left.gif)';
        temp = document.getElementById('character').style.left=posX;
    }
    else if(up){ jump(); }
}
</script>

コードがクリーンアップされました（ジャンプはありませんが、同じ問題があります。左を押したまま、別のキーを押すと停止し、リセットするにはそのままにしておく必要があります）

<script>
var dx = false;
var posX = 10;
var posY = 10;
document.onkeydown = function(evt){
    if(evt.keyCode == 39) dx=true;
    moveCharacter();
}
document.onkeyup = function(evt){
    if(evt.keyCode == 39) dx=false;
}
moveCharacter = function(){
    if(dx){
        posX+=10;
        document.getElementById('character').style.left=posX;
    }
}
</script>
4

3 に答える 3

0

JavaScript はkeydown、最後に押されたキーでのみイベントを繰り返します。keydownとイベントの両方をリッスンして、押されたキーの状態を保存する必要がありkeyupます。

于 2012-10-01T15:07:55.010 に答える
0

これはあなたの質問に答えないかもしれませんが、ゲームロジックをより適切に設計するのに役立ちます: http://jsfiddle.net/N2UYx/

于 2012-10-01T15:47:33.220 に答える
0

最後に、私は問題を解決しました: 関数 keydown、keyup、movecharacter が削除されました。追加した：

var keysDown = {};
try {
    if (window.addEventListener) {
        window.addEventListener("keydown", function (v) {keysDown[v.keyCode] = true;}, false);
        window.addEventListener("keyup", function (v) {delete keysDown[v.keyCode];}, false);
    } else if (document.attachEvent) {
        document.attachEvent("onkeydown", function (v) {keysDown[v.keyCode] = true;});
        document.attachEvent("onkeyup", function (v) {delete keysDown[v.keyCode];});
    } else if (window.attachEvent) {
        window.attachEvent("onkeydown", function (v) {keysDown[v.keyCode] = true;});
        window.attachEvent("onkeyup", function (v) {delete keysDown[v.keyCode];});
    } else {
        document.addEventListener("keydown", function (v) {keysDown[v.keyCode] = true;}, false);
        document.addEventListener("keyup", function (v) {delete keysDown[v.keyCode];}, false);
    }
} catch (e) {
    alert("Keys don't work!\nError: "+e);
}
...
var update = function () {
    if (38 in keysDown) { // Player holding up
        ..
    }
    if (40 in keysDown) { // Player holding down
        ..
    }
    if (37 in keysDown) { // Player holding left
        ..
    }
    if (39 in keysDown) { // Player holding right
        ..
    }
};
setInterval(update,10);

参考：http ://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/ http://stackoverflow.com/questions/9507200/why-keydown-listener-doesnt-work-つまり

Chrome、Firefox、IE7/8/Quirks モードで動作します (IE9 標準のドキュメント モードではありません)。

于 2012-10-02T18:43:07.773 に答える