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に切り替える左、上、右、下が唯一絶対位置で動作するので)