2017-01-03 10 views
0

私はJSを初めて使うので、簡単な答えがある場合は事前にお詫びします!私はスレッドとGoogleを1時間進めていますが、何も見つかりませんでした。(div内の矢印キーでjSで画像を移動する

私は文字を左右に動かすスーパーマリオスタイルのゲームをやろうとしています。私はこれを段階的にやってみました(矢印キーに基づいて移動する四角形を作成します)。xとyの位置を取ることができるので、四角形は簡単ですが、イメージを使用するように切り替えました。 。

それが左または右に移動します。これは私のhtmlファイルです:

<body> 
    <div id = "char"> 
     <canvas id="myCanvas" width="400" height="400"></canvas> 
     <script src="testing.js"></script> 
    </div> 
</body> 

そして、これは私がJSでやろうとしているものです。

var img = new Image(), 
    pic = document.getElementById("char"), 
    switchVar=true; 
pic.appendChild(img); 
img.src = "2.png"; 
function move(e) { 
    "use strict"; 
    var x = e.which || e.keycode; //gets the keycode that the user types 

    switch(x) { 
     case 39: 
      //What do I do here?? 
      //the following doesn't work: 
      //pic.style.left = parseInt(pic.style.left) + 100 + 'px'; 
      break; 
    } 
} 
document.onkeydown = move; 

私はswitchのすべてのケースを含んでいませんでしたが、私のコードはleft、down、upのケースを持っていました。さらに、私がJSで画像を追加しているのは、左から右に動いたときに画像を切り替えようとしているからです(右足を伸ばす人のimgから左脚を伸ばした人のimgに切り替える左、上、右、下が唯一絶対位置で動作するので)

答えて

0

あなたのイメージは

position: absolute; 

を持っている必要があります。

pic.appendChild(img); 
img.src = "2.png"; 
img.style.position = 'absolute'; 

そして、あなたはdiv要素の必須の位置を持っている#char DIVに関連した画像を移動したい場合。

#char{position:relative;} 
関連する問題