キャンバスのマルチプレイヤーゲームでは、4つ以上のボタンを押すことはできません。

キャンバスとキャンバスのゲーム、そして現在は多かれ少なかれキャンバスゲームのW3Schools tutorialに従っています。キャンバスのマルチプレイヤーゲームでは、4つ以上のボタンを押すことはできません。

チュートリアルのある時点で、私は2人のプレイヤーを作る考えがありました。どちらも同じキーボード（NOTオンラインマルチプレイヤー）でコントロールする必要があります。

私はチュートリアルで与えられたロジックに従って、WASDと矢印の両方のキーコードを見つけました。

私は自分のコードの95％を理解しています。つまり、理解しないですべてをコピーしていないことを意味します。（私はすぐにこれに復帰する）

私のコードの問題は、私が他のプレーヤーをシステムに追加すると、一度に1人のプレイヤーしかコントロールできないときに自由に動かすことができるということです。同時に、彼らは自由に移動することはできませんし、私は一度に合計4つのボタンを押すことができます。

スニペットを試してみて、WASDと矢印のあるキューブを使って遊んで、何を話しているのか見てみましょう。

私はこのエラーの場所かもしれない100％を理解していない部分があると言いましたか？とにかくコードスニペットでそれをマークしました。

私の質問は次のとおりです。なぜ両方のプレイヤーを同時に自由に移動できないのですか？

全体のコードは以下の通りであると私は理解していない部分にマーク：ない最高の経験のために

を、フルスクリーン機能を使用し

{ 
 
    
 
    function startGame() { 
 
     myGameArea.start(); 
 
     myStick = new component(100, 100, 200, 200, "red"); 
 
     myStick2 = new component(100, 100, 600, 200, "green"); 
 
    } 
 
     
 
    var myGameArea = { 
 
     canvas : document.createElement("canvas"), 
 

 
     start : function() { 
 
      var bodyID = document.getElementById("body"); 
 

 
      this.canvas.width = bodyID.offsetWidth; 
 
      this.canvas.height = (bodyID.offsetHeight); 
 
      this.context = this.canvas.getContext("2d"); 
 
      document.body.insertBefore(this.canvas, document.body.childNodes[2]); 
 
      this.interval = setInterval(updateGameArea, (1000/60)); 
 
      
 
      //The part i do not understand 
 
      window.addEventListener('keydown', function (e) { 
 
       myGameArea.keys = (myGameArea.keys || []); 
 
       myGameArea.keys[e.keyCode] = true; 
 
      }); 
 
      window.addEventListener('keyup', function (e) { 
 
       myGameArea.keys[e.keyCode] = false; 
 
      }); 
 
      //End 
 
     }, 
 
      
 
     clear : function(){ 
 
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
     } 
 
    }; 
 
    
 
    
 
    function component(width, height, x, y, color, mLeft, mRight, mUpLeft, mUpRigth){ 
 
     this.width = width; 
 
     this.height = height; 
 
     this.x = x; 
 
     this.y = y; 
 
     this.speedX = 0; 
 
     this.speedY = 0; 
 
     
 
     this.update = function(){ 
 
      ctx = myGameArea.context; 
 
      ctx.fillStyle = color; 
 
      ctx.fillRect(this.x, this.y, this.width, this.height); 
 
     }; 
 
     
 
     this.newPos = function(){ 
 
      this.x += this.speedX; 
 
      this.y += this.speedY; 
 
     }; 
 
     
 
     this.player1 = function(){ 
 
      this.speedX = 0; 
 
      this.speedY = 0; 
 
      if (myGameArea.keys && myGameArea.keys[65]) {this.speedX = -2; } // Left 
 
      if (myGameArea.keys && myGameArea.keys[68]) {this.speedX = 2; } // Right 
 
      if (myGameArea.keys && myGameArea.keys[87]) {this.speedY = -2; } // Up 
 
      if (myGameArea.keys && myGameArea.keys[83]) {this.speedY = 2; } // Down 
 
     }; 
 
     
 
     this.player2 = function(){ 
 
      this.speedX = 0; 
 
      this.speedY = 0; 
 
      if (myGameArea.keys && myGameArea.keys[37]) {this.speedX = -2; } // Left 
 
      if (myGameArea.keys && myGameArea.keys[39]) {this.speedX = 2; } // Right 
 
      if (myGameArea.keys && myGameArea.keys[38]) {this.speedY = -2; } // Up 
 
      if (myGameArea.keys && myGameArea.keys[40]) {this.speedY = 2; } // Down 
 
     }; 
 
     
 
     
 
    } 
 
    
 
    function updateGameArea(){ 
 
     myGameArea.clear(); 
 
     myStick.player1(); 
 
     myStick.newPos(); 
 
     
 
     myStick2.player2(); 
 
     myStick2.newPos(); 
 
     
 
     
 
     myStick.update(); 
 
     myStick2.update(); 
 
    } 
 
    
 
    
 
    
 
}

.nm{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
canvas{ 
 
    display: block; 
 
    background-color: lightgray; 
 
}

<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Canvas stick game!</title> 
 
     <link rel="stylesheet" href="css/standard.css"> 
 
    </head> 
 
    <body id="body" onload="startGame()" class="nm" style="height: 100vh"> 
 
     
 
    </body> 
 
</html> 
 

 
<script src="js/canvas.js"></script>

出典

2016-08-06 user1509104

を**私は**同時に両方のプレイヤーを移動することができます。あなたが直面している問題は何ですか？ –

はい、両方のプレイヤーを同時に動かすことはできますが、自由に動かすことはできません。例ではUPと右矢印を同時に押してから、WまたはDを押します。 :)（フルスクリーンに行くことを忘れないでください） – user1509104

申し訳ありません。私はあなたの問題を再現できません。どのブラウザを使用していますか？ –

私は（あなたの質問以下のコメントを読み、誰もがこれを理解します）これは冗長ですけど、ちょうどそれが答えとしてここにある、あなたの問題は、キーボードのバグです。

（一部の）非デジタルキーボードが機能するため、特定のキーボードの組み合わせが正しく機能しません。（つまり、特定のキーはお互いにキャンセルされます）

（これは、カスタマイズ可能なゲームコントロール、カスタマイズ可能なプログラムショートカットなどを提供するもう1つの理由です。もう1つの理由は、DVORAKキーボードを持つ人がQWERTY 。最適化されたゲームは）面倒なことする制御

その他：

PS：私はあなたの問題を再現することができない、とあなたは別のコンピュータ上でそれをしようとした場合、あなたがどちらかそれを再現することができなかったと思われます。

PPS：詳細については、以下の記事をチェックアウト：Keyboards are evil.

出典

2016-08-06 19:15:23

バグが何であったかは確かにわかりましたが、いくつかの問題がありました。悲しいことに、W3Schoolsは私がuptodateと考えているものではありませんが、私は代替手段を提供することはできません。

私は、全体のことを改善するための変更を行っていますが、まだキーが失われます、私は、標準キーの紛失については何も述べていない理由としてわからない（それはすべてのキーが報告されなければならないと言う）

4を打つときかより多くのキーが同時に（1/60秒以内に）いずれも報告されません。 2人の人が遊んでいるときはこれはほとんど起こりませんが、一方の人が両方の方向パッドをテストしていると頻繁に起こります。私は解決策を知らない。

キーイベントkeyCodeは価値が下がりました。event.keyは文字列ですが、event.keyは部分的にしかサポートされていません。

{ 
 
// key maps 
 
const KEY_UP = 38; 
 
const KEY_DOWN = 40; 
 
const KEY_LEFT = 37; 
 
const KEY_RIGHT = 39; 
 
const KEY_W = 87; 
 
const KEY_S = 83; 
 
const KEY_A = 65; 
 
const KEY_D = 68; 
 
const DIR_KEY_MAP2 = [KEY_W, KEY_S, KEY_A, KEY_D]; 
 
const DIR_KEY_MAP1 = [KEY_UP, KEY_DOWN, KEY_LEFT, KEY_RIGHT]; 
 
const BLOCK_DEFAULT_FOR = [KEY_W, KEY_S, KEY_A, KEY_D, KEY_UP, KEY_DOWN, KEY_LEFT, KEY_RIGHT]; 
 
const keyEvents = function(event){ // keyboard event listener sets the key array to true if keydown false if not 
 
    if(!event.repeat){ // ignore repeating key events 
 
     myGameArea.keys[event.keyCode] = event.type === "keydown"; 
 
    } 
 
    // block default action for keys in array BLOCK_DEFAULT_FOR 
 
    if(BLOCK_DEFAULT_FOR.indexOf(event.keyCode) > -1){ 
 
     event.preventDefault(); 
 
    } 
 
} 
 

 

 
function startGame() { 
 
    myGameArea.start(); 
 
    myStick = new Component(100, 100, 200, 200, "red", DIR_KEY_MAP2); 
 
    myStick2 = new Component(100, 100, 600, 200, "green", DIR_KEY_MAP1); 
 
} 
 
    
 
var myGameArea = { 
 
    canvas : document.createElement("canvas"), 
 
    keys : [], // create the key array 
 
    start : function() {    
 
     var bodyID = document.getElementById("body"); 
 
     this.canvas.width = bodyID.offsetWidth; 
 
     this.canvas.height = (bodyID.offsetHeight); 
 
     this.context = this.canvas.getContext("2d"); 
 
     document.body.insertBefore(this.canvas, document.body.childNodes[2]); 
 
     
 
     requestAnimationFrame(updateGameArea); // request the first animation frame don't use setInterval 
 
     window.addEventListener('resize', function() { // for stackoverflow 
 
      myGameArea.canvas.width = bodyID.offsetWidth; 
 
      myGameArea.canvas.height = bodyID.offsetHeight; 
 
     });    
 
     window.addEventListener('keydown', keyEvents); // this is called once for every key down 
 
     window.addEventListener('keyup', keyEvents); // this is called once for every key up. 
 
    }, 
 
    clear : function() { 
 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
    } 
 
}; 
 

 

 
function Component(width, height, x, y, color, keyMap){ // key map is the keys used to control 
 
               
 
    this.width = width; 
 
    this.height = height; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.speedX = 0; 
 
    this.speedY = 0; 
 
    // get reference to context 
 
    var ctx = myGameArea.context; 
 
    // clear the keys 
 
    var i = 3; 
 
    while(i >= 0){ myGameArea.keys[keyMap[i--]] = false; } 
 
    
 
    this.update = function(){ 
 
     this.userInput(); 
 
     this.x += this.speedX; 
 
     this.y += this.speedY; 
 
    } 
 
    this.display = function(){ 
 
     ctx.fillStyle = color; 
 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
 
    }; 
 
    
 
    
 
    this.userInput = function(){ // keyMap is accessed via closure 
 
     this.speedY = this.speedX = 0; 
 
     if (myGameArea.keys[keyMap[2]]) {this.speedX = -2; } // Left 
 
     if (myGameArea.keys[keyMap[3]]) {this.speedX = 2; } // Right 
 
     if (myGameArea.keys[keyMap[0]]) {this.speedY = -2; } // Up 
 
     if (myGameArea.keys[keyMap[1]]) {this.speedY = 2; } // Down 
 
    }; 
 
    
 

 
    
 
    
 
} 
 

 
function updateGameArea(){ 
 
    myGameArea.clear(); 
 
    myStick.update(); 
 
    myStick2.update(); 
 
    myStick.display(); 
 
    myStick2.display(); 
 
    requestAnimationFrame(updateGameArea); // request the next animation frame in 1/60th second 
 
} 
 

 

 

 
}

.nm{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
canvas{ 
 
    display: block; 
 
    background-color: lightgray; 
 
}

<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Canvas stick game!</title> 
 
     <link rel="stylesheet" href="css/standard.css"> 
 
    </head> 
 
    <body id="body" onload="startGame()" class="nm" style="height: 100vh"> 
 
     
 
    </body> 
 
</html> 
 

 
<script src="js/canvas.js"></script>

出典

2016-08-06 18:54:40 Blindman67

+1更新されたコードとコメントについては、これで問題は解決されませんでしたが、キーボードのバグに問題があったため、W + Dと同時にUP + RIGHTを押すことはできません – user1509104

なぜ「requestAnimationFrame」を使用し、ループ？あなたのバージョンと私のバージョンをテストしたので、あなたのキャンバス上の立方体がより速く動くので、 "updateGameArea"という関数が1/60秒よりも頻繁に実行されることを意味するはずです。 – user1509104

バージョンが1/60秒で実行されていますか？ 60fps以上でrequestAnimationFrameを実行する唯一の方法は、ブラウザ固有のフラグを使用して同期表示の更新をブロックすることです。 requestAnimationFrame http://stackoverflow.com/a/38709924/3877726 – Blindman67

キャンバスのマルチプレイヤーゲームでは、4つ以上のボタンを押すことはできません。

答えて

関連する問題