私は左にサンタのgifを移動しようとしています。これまでのところ、私は左矢印のコードを入れただけですが、動かすことはできません。私はdivに30のZ-index（ページ上の他のものよりも高い）に設定された矢印アイコンを持っているので、そうであってはいけません。どんな助けでも大歓迎です!!!!JavaScriptのゲームの矢印キーが機能しない

Hereはこれまでのゲームのようなものです。hereは私の外部スタイルシートです。

あなたは次のようにのように、 keyイベントを追加する必要が

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Santa Game</title> 
    <link rel="stylesheet" href="index.css"> 
    <script> 
     var top = 350 
     var left = 1250 
     function move(rightorleft) 
     { 
      if(rightorleft == 'left') 
      { 
       document.getElementById("santa").style.position="absolute" 
       left = left - 10 
       document.getElementById("santa").style.left=left+"px" 
      } 
      else if(rightorleft == 'right') 
      { 
       document.getElementById("santa").style.position="absolute" 
       left = left + 10 
       document.getElementById("santa").style.left=left+"px" 
      } 
     } 
    </script> 
</head> 
<body> 
    <table> 
     <tr id="top"> 
      <td> 
       <p id="p1">Help Santa avoid storms and the eyes of curious children to deliver all the presents on time!</h1> 
       <p id="p2">Santa score: 0</p> 
      </td> 
     </tr> 
     <tr> 
      <td id="middle"> 
       <img class="clouds1" id="cloud1" src="cloud.png" width="200px"> 
       <img class="clouds1" id="cloud2" src="cloud.png" width="200px"> 
       <img class="clouds1" id="cloud3" src="cloud.png" width="200px"> 
       <img class="clouds1" id="cloud4" src="cloud.png" width="200px"> 
       <img class="clouds1" id="cloud5" src="cloud.png" width="200px"> 
       <img class="storms" id="storm1" src="storm.png" width="150px"> 
       <img class="storms" id="storm2" src="storm.png" width="150px"> 
       <img class="storms" id="storm3" src="storm.png" width="150px"> 
       <img class="storms" id="storm4" src="storm.png" width="150px"> 
       <img class="clouds2" id="cloud7" src="cloud.png" width="150px"> 
       <img class="clouds2" id="cloud8" src="cloud.png" width="150px"> 
       <img class="clouds2" id="cloud9" src="cloud.png" width="150px"> 
       <img class="clouds2" id="cloud10" src="cloud.png" width="150px"> 
       <img class="clouds2" id="cloud11" src="cloud.png" width="150px"> 
       <img class="clouds2" id="cloud12" src="cloud.png" width="150px"> 
       <img class="clouds2" id="cloud6" src="cloud.png" width="150px"> 
       <img id="santa" src="santa.gif" width="250px"> 
       <img id="hill" src="hill.png" width="785px" height="100px"> 
       <div id="kids"><img class="kids" id="kid1" src="kid1.png" width="100px"> 
       <img class="kids" id="kid2" src="kid2.png" width="100px"> 
       <img class="kids" id="kid3" src="kid3.png" width="100px"> 
       <img class="kids" id="kid4" src="kid4.png" width="100px"> 
       <img class="kids" id="kid5" src="kid5.png" width="100px"></div> 
       <div id="houses"><img class="houses" id="house1" src="house.gif" width="150px"> 
       <img class="houses" id="house2" src="house.gif" width="150px"> 
       <img class="houses" id="house3" src="house.gif" width="150px"> 
       <img class="houses" id="house4" src="house.gif" width="150px"> 
       <img class="houses" id="house5" src="house.gif" width="150px"></div> 
      </td> 
     </tr> 
     <tr> 
      <td id="bottom"> 
       <div id="arrows"> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="up.png" width="30px"><br> 
        <img src="left.png" width="30px" onClick="move('left')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <img src="right.png" width="30px"><br> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="down.png" width="30px"> 
       </div> 
       <div> 
        <button type="button">Start (Easy)</button> 
        <button type="button">Start (Hard)</button> 
       </div> 
      </td> 
     </tr>   
</body>

出典

2016-12-12 Sarah Marie

あなたの 'key'イベントリスナーはどこですか？ – nmnsud

'' 'onclick'では何も起こりません.' onclick（）'イベントを設定します。 –

：

~~body.addEventListener('keydown', function() { var key = event.keyCode; if (key == 39) { //If pressed key is left move('left'); } if (key == 37) { //If pressed key is right move('right'); } });~~

更新

それはあなたのJSには問題ではない、実際にそれが問題ですあなたのCSSで、あなたのCSS #houses & #kidsボタンがオーバーレイされているため、機能しなくなります。こんにちは

#middle{ background-image: url("background.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 
table{ margin: auto; 
    border-collapse: collapse; 
    margin-top: -8px; 
} 
#p1{ font-size: 105%; 
    font-family: Helvetica; 
    color: white; 
    letter-spacing: 0.2px; 
    margin-left: 22px; 
} 
#p2{ font-family: Helvetica; 
    color: white; 
    margin-left: 22px; 
} 
td{ width: 770px; 
    border: 2px solid #003399; 
} 
#bottom{ font-size: 150%; 
    color: white; 
    background-color: #80aaff; 
    padding: 5px; 
} 
#top{ background-color: #80aaff; 
    line-height: 85%; 
} 
.clouds1{ position: absolute; 
    z-index: 0; 
    float: left; 
} 
#cloud2{ position: relative; 
    left: 137.5px; 
} 
#cloud3{ position: relative; 
    left: 82.5px; 
} 
#cloud4{ position: relative; 
    left: 37.5px; 
} 
#cloud5{ position: relative; 
    float: right; 
    top: -131px; 
} 
.storms{ padding: 20px; 
    z-index: 10; 
    position: relative; 
    bottom: 170px; 
} 
#storm4{ position: relative; 
    left: 130px; 
    bottom: 362px; 
} 
.clouds2{ position: absolute; 
    z-index: 20; 
    float: left; 
    bottom: 325.5px; 
} 
#cloud6{ position: relative; 
    bottom: 519.5px; 
    left: 180px; 
} 
#cloud7{ position: relative; 
} 
#cloud8{ position: relative; 
    right: 40px; 
} 
#cloud9{ position: relative; 
    right: 90px; 
} 
#cloud10{ position: relative; 
    bottom: 519.5px; 
    left: 320px; 
} 
#cloud11{ position: relative; 
    bottom: 519.5px; 
    left: 270px; 
} 
#cloud12{ position: relative; 
    bottom: 519.5px; 
    left: 220px; 
} 
#hill{ position: relative; 
    z-index: 0; 
    bottom: -5px; 
} 
#kids{ 
    z-index: 10; 
    padding: 20px; 
    bottom: 49px; 
    position: absolute; 
} 
.kids{ 
    padding: 22px; 
    position: relative; 
    bottom: 50px; 
} 
#houses{ 
    z-index: 20; 
    bottom: 68px; 
    position: absolute; 
} 
.houses{ 
    position: relative; 
} 
#arrows{ float: left; 
    padding-right: 30px; 
    z-index: 30; 
} 
button{ font-family: Helvetica; 
    font-size: 80%; 
    background-color: white; 
    color: #003399; 
    border: 2px solid #003399; 
} 
#santa{ position: absolute; 
    left: 1250px; 
    top: 350px; 
    z-index: 30; 
}

出典

2016-12-12 06:11:12 nmnsud

これがどのように問題を解決するのか見ていますが、それでも私にとってはうまくいきません。私はfirefox、chrome、safariで試しました –

私が解決されるコード内のいくつかのCSSの問題があった：

は、以下のCSSを使用します。

以下のリンクにチェックを入れることができます。

"https://jsfiddle.net/spankajd/tbjxba99/"

出典

2016-12-12 06:19:31 spankajd

これはどのようにしてこの問題を解決すればいいのでしょうか？私はChrome、Firefox、Safariで試しました –

@SarahMarieあなたの側に何のエラーが来ますか？ – spankajd

まだ同じですが、矢印はスローを動かしていません –

JavaScriptのゲームの矢印キーが機能しない

答えて

更新

関連する問題