<img>を矢印キーを使用してからに移動するにはどうすればよいですか？

私は10x10のテーブルを持ち、そのセルの1つに画像があります。ここにコードがあります。<img>を矢印キーを使用してからに移動するにはどうすればよいですか？

$(document).ready(function(){ 
      var allTds = $("td") 
      for(i in allTds){ 
       if(Math.random() < 0.4){ 
        allTds.eq(i).addClass("block") 
       } 
      } 
      var allOpen = $("td:not(.block)") 
      var selectLoc1 = Math.floor(Math.random()*allOpen.length) 
      var selectLoc2 = Math.floor(Math.random()*allOpen.length) 
      var image = $("<img>") 
      image.attr("src", "pawn.png") 
      allOpen.eq(selectLoc1).append(image) 
      allOpen.eq(selectLoc2).addClass("goal") 
})

ユーザーが矢印キーを押すと、どの矢印キーが押されたかによって、画像がtdからtdに移動する必要があります。これをコードに実装するにはどうしたらいいですか？ありがとう。

出典

2017-05-23 Carlos Montemayor

どのような研究は、あなたが行っている、あなたは何を試してみましたか？ Stackoverflowは無料コード作成サービスでも、* "how to" *チュートリアルサービスでもありません。ここでの目的は、他の人があなたのコード**を修正するのを助けることです**期待通りに機能しないときは...新しい機能を書かないでください – charlietfl

TL; DR：keyupにevenlistenerを追加して、どの矢印キーが（私が知っているように、キーコードは37-40の矢印キーです）。 – Werner

@charlietfl私は本当にこのサイトが新しい誰かのためにどのように非友好的に見えるか心配です – Kos

キーダウンイベントを検出し、押されたキーに基づいてイメージを対応するセルに移動する必要があります。

たとえば、imageCellRow, imageCellColumnが画像の現在の場所であるとします。その後、次のロジックを使用してイメージを新しい場所に移動します。

switch(arrowKey) { 
    case leftArrow: 
     console.log("left"); 
     imageCellColumn--; 
     break; 
    case rightArrow: 
     console.log("right"); 
     imageCellColumn++; 
     break; 
    case upArrow: 
     console.log("up"); 
     imageCellRow--; 
     break; 
    case downArrow: 
     console.log("down"); 
     imageCellRow++; 
     break; 
} 

imageCellRow = (imageCellRow + height) % height; 
imageCellColumn = (imageCellColumn + width) % width;

ここで画像の新しい場所があります。古い画像を削除して新しい場所に追加するだけです。ここで

は私が考える ...唯一の背景を変更するための一例厥（生成されたテーブルをクリックし、矢印キーを押します）

$(function() { 
 
\t //console.log("started"); 
 
\t var tableWidth = 5; 
 
\t var tableHeight = 5; 
 
\t var imageUrl = "https://cdn.pixabay.com/photo/2013/07/12/15/02/penguin-149275_960_720.png"; 
 
\t var image = $("<img src='" + imageUrl + "'>"); 
 
\t 
 
\t generateTable(tableWidth, tableHeight); 
 
\t addImageToCell($("table"), image, 0, 0); 
 
\t 
 
\t /* <Image movement logic> */ 
 
\t (function() { 
 
\t \t var table = $("table"); 
 
\t \t var width = table.find("tr:first td").length; 
 
\t \t var height = table.find("tr").length; 
 
\t \t //console.log("table dim: " + width + "," + height); 
 

 
\t \t //Initial image cell 
 
\t \t var imageCellRow = 0; 
 
\t \t var imageCellColumn = 0; 
 
\t \t \t 
 
\t \t var leftArrow = 37; 
 
\t \t var upArrow = 38; 
 
\t \t var rightArrow = 39; 
 
\t \t var downArrow = 40; 
 
\t \t 
 
\t \t $(document).keydown(function (e) { 
 
\t \t \t //Remove image from current Cell 
 
\t \t \t table.find("tr:eq(" + imageCellRow + ") td:eq(" + imageCellColumn +") img").remove(); 
 
\t \t \t 
 
\t \t \t switch(e.which) { 
 
\t \t \t \t case leftArrow: 
 
\t \t \t \t \t //console.log("left"); 
 
\t \t \t \t \t imageCellColumn--; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case rightArrow: 
 
\t \t \t \t \t //console.log("right"); 
 
\t \t \t \t \t imageCellColumn++; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case upArrow: 
 
\t \t \t \t \t //console.log("up"); 
 
\t \t \t \t \t imageCellRow--; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case downArrow: 
 
\t \t \t \t \t //console.log("down"); 
 
\t \t \t \t \t imageCellRow++; 
 
\t \t \t \t \t break; 
 
\t \t \t } 
 
\t \t \t imageCellRow = (imageCellRow + height) % height; 
 
\t \t \t imageCellColumn = (imageCellColumn + width) % width; 
 
\t \t \t 
 
\t \t \t addImageToCell(table, image, imageCellRow, imageCellColumn); 
 
\t \t }); 
 
\t })(); 
 
\t /* <Image movement logic /> */ 
 
\t 
 
\t //Generates table with given dimensions 
 
\t function generateTable(width, height) { 
 
\t \t var table = "<table>"; 
 
\t \t 
 
\t \t for(var j = 0; j < height; j++) { 
 
\t \t \t table += "<tr>"; 
 
\t \t \t for(var i = 0; i < width; i++) { 
 
\t \t \t \t table += "<td/>"; 
 
\t \t \t } 
 
\t \t \t table += "</tr>"; 
 
\t \t } 
 
\t \t 
 
\t \t table += "</table>"; 
 
\t \t 
 
\t \t $("body").append(table); 
 
\t } 
 
\t 
 
\t function addImageToCell(table, image, cellRow, cellColumn) { 
 
\t \t table.find("tr:eq(" + cellRow + ") td:eq(" + cellColumn +")").append(image); 
 
\t } 
 
});

<html> 
 
<head> 
 
\t <script 
 
\t src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
\t integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
\t crossorigin="anonymous"></script> 
 
\t <script src="app.js"></script> 
 
\t 
 
\t <style> 
 
\t \t td { 
 
\t \t \t width: 50px; 
 
\t \t \t height: 50px; 
 
\t \t \t border: 1px solid black; 
 
\t \t } 
 
\t \t td img { 
 
\t \t \t width: 45px; 
 
\t \t \t height: 45px; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 

 
</body> 
 
</html>

出典

2017-05-23 12:38:46 11thdimension

私はあなたがそのjQueryを本当に自己説明する方法を好きです！ –

を例に作業して、テーブルを歩いています残りは簡単です....

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Table key´s</title> 
 
    <style> 
 
     td{width:20px;height:20px;background:#ddd;} 
 
     tr:nth-child(5) td:nth-child(5){background:#f00;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="tableContainer"> 
 
    </div> 
 
    <script>  
 
     var row=col=5,max=10; 
 
     tableContainer.innerHTML = '<table>'+('<tr>'+'<td>'.repeat(max)).repeat(max)+'</table>'; 
 
     window.addEventListener("keyup", function(e){ 
 
     var colDiff, rowDiff; 
 
     var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]); 
 
     if (keyMap.has(e.keyCode)){ 
 
      document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#ddd'; 
 
      [colDiff,rowDiff]=keyMap.get(e.keyCode); 
 
      row+=rowDiff; 
 
      col+=colDiff; 
 
      row = (row>max) ? max : (row < 1) ? 1 : row; 
 
      col = (col>max) ? max : (col < 1) ? 1 : col; 
 
      document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#f00'; 
 
     } 
 
     }) 
 
    </script> 
 
    </body> 
 
    </html>

あなたはまた、テーブルオブジェクトを使用することができます...

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Table key´s</title> 
 
    <style> 
 
    td{width:20px;height:20px;background:#ddd;} 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="tableContainer"> 
 
    </div> 
 
    <script>  
 
    var aktRow=aktCol=4,max=9; 
 
    tableContainer.innerHTML = '<table id="mt">'+('<tr>'+'<td></td>'.repeat(max+1)+'</tr>').repeat(max+1)+'</table>'; 
 
    mt.rows[aktRow].cells[aktCol].style.background='#f00'; 
 
    window.addEventListener("keyup", function(e){ 
 
     var colDiff, rowDiff; 
 
     var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]); 
 
     if (keyMap.has(e.keyCode)){ 
 
     mt.rows[aktRow].cells[aktCol].style.background='#ddd'; 
 
     [colDiff,rowDiff]=keyMap.get(e.keyCode); 
 
     aktRow+=rowDiff; 
 
     aktCol+=colDiff; 
 
     aktRow = (aktRow>max) ? max : (aktRow < 0) ? 0 : aktRow; 
 
     aktCol = (aktCol>max) ? max : (aktCol < 0) ? 0 : aktCol; 
 
     mt.rows[aktRow].cells[aktCol].style.background='#f00'; 
 
     } 
 
    }) 
 
    </script> 
 
</body> 
 
</html>

出典

2017-05-23 13:07:41

素敵なプレーンJSで – 11thdimension

あなたの答えにも投票します。 jQueryは必要ありません;-) –

<img>を矢印キーを使用して​​から​​に移動するにはどうすればよいですか？

答えて

関連する問題

<img>を矢印キーを使用してからに移動するにはどうすればよいですか？