Q&A
コードは```で括ってくださいね。編集画面開いてコードを選択状態にしたままコードのアイコンをポチで大丈夫です。
前提・実現したいこと
矢印キーを使用してdivを上下左右に動かす動作をjavascriptで実装したいと考えています。
発生している問題・エラーメッセージ
キーボードの取得はできているのですが、要素がまったく動かない状態です。
該当のソースコード
javascript,HTML,CSS
1ソースコード 2 3<script> 4 5 document.onkeydown = keydown ; // イベント検出 6 document.onkeyup = keyup ; // イベント検出 7 8 var x = 100 ; // 表示する座標 9 var y = 100 ; // 表示する座標 10 var pv = 10 ; // 1回の移動量 11 12// キーボードのフラグ （1 : 押されている / 0 : 離されている） 13 var left = 0 ; 14 var right = 0 ; 15 var down = 0 ; 16 var space = 0 ; 17 18 19/********** キーボードのイベント（押された） **********/ 20 21function keydown(event) // 押されたキーのフラグを １ にする 22{ 23 if(event.which == 37) //left key 24 { 25 left = 1; 26 } 27 if(event.which == 38) //up key 28 { 29 up = 1; 30 } 31 if(event.which == 39) //right key 32 { 33 right = 1; 34 } 35 if(event.which == 40) //down key 36 { 37 down = 1; 38 } 39 40 move(); 41} 42 43function move() // キーボード入力を反映して表示座標を更新 44{ 45 if(left==1) { 46 x = x - pv; 47 } 48 if(right==1) { 49 x = x + pv; 50 } 51 if(up==1) { 52 y = y - pv; 53 } 54 if(down==1) { 55 y = y + pv; 56 } 57 58 document.getElementById("box").style.left = x; 59 document.getElementById("box").style.top = y; 60} 61 62/********** キーボードのイベント（離された） **********/ 63 64function keyup(event) // 離されたキーのフラグを ０ にする 65{ 66 if(event.which == 37) //left key 67 { 68 left = 0; 69 } 70 if(event.which == 38) //up key 71 { 72 up = 0; 73 } 74 if(event.which == 39) //right key 75 { 76 right = 0; 77 } 78 if(event.which == 40) //down key 79 { 80 down = 0; 81 } 82} 83 84</script> 85<body> 86<div class="box" id="box"></div> 87</body> 88 89 90//↓css 91.box{ 92 top:100px; 93 left:100px; 94 z-index: 1; 95 position: absolute; 96 background-color: red; 97 height:100px; 98 width:100px; 99} 100
試したこと
しっかりキーボードの取得が認識されてるか、矢印キーを押したらboxの色を変えるなどをして調べたところ認識はされているようでした
回答3件
0
雑ですが流れ的には以下です。
（ちゃんとやるなら調整がいくつかはいります）
CSS
1#box{background-Color:aqua;width:50px; height:30px;text-align:center;position:absolute;} 2
javascript
1document.addEventListener('keydown',function(e){ 2 var d=document.querySelector('#box'); 3 var l=parseInt(d.style.left.replace('px',''))||0; 4 var t=parseInt(d.style.top.replace('px',''))||0; 5 switch(e.keyCode){ 6 case 37: 7 d.style.left=l-10; 8 break; 9 case 38: 10 d.style.top=t-10; 11 break; 12 case 39: 13 d.style.left=l+10; 14 break; 15 case 40: 16 d.style.top=t+10; 17 break; 18 } 19}); 20
HTML
1<div id="box">box</div>
投稿2018/02/27 10:10
総合スコア114829
0
ベストアンサー
1.upの宣言が抜けているため、エラーになっている
javascript
1var left = 0 ; 2var right = 0 ; 3var up = 0 ; 4var down = 0 ; 5var space = 0 ;
2.「px」単位をつける
javascript
1 document.getElementById("box").style.left = x+'px'; 2 document.getElementById("box").style.top = y+'px';
投稿2018/02/27 10:03
総合スコア3404
あー、最初に「↑」押さないと
upが宣言されないままupを参照しようとしてエラーの動きになりそうですね。
正常に動作しました。ありがとうございます。助かりました。
余談ですが、Firefoxでも動作させるなら、whichよりkeyCodeの方がいいみたいです。
http://www.shigemk2.com/entry/20120813/1344846407
0
JavaScript
1document.getElementById("box").style.left = x; 2document.getElementById("box").style.top = y;
moveメソッドの最後の行ですが数値ではなく文字列を代入してください。
例えば'123px'という感じの文字列にすれば動作するんじゃないでしょうか？
修正するならこんな感じですね。
JavaScript
1document.getElementById("box").style.left = x + "px"; 2document.getElementById("box").style.top = y + "px";
参考記事: element.style.left - 左位置
element.style.left = '200px';
投稿2018/02/27 09:56
総合スコア21158
ご回答ありがとうございます。ご指摘いただいた通りにコードを編集してみたのですが、依然動かない状態です。
もし動作を確認しているブラウザがFirefoxやChromeならば、
F12キーを押してコンソールを開いてみてください。
何かしらのエラーが発生したら赤背景で教えてくれますよ！
なるほど、ご丁寧にありがとうございます！chromeで作業しているので早速使用したいと思います。
あなたの回答
tips
プレビュー
