当第一个img位置将等于另一个img位置做某事

时间:2017-01-29 00:51:23

标签: javascript jquery html css

主要问题是我不知道如何显示这两个img位置,以确定它们是否相同。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="game.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>Game</title>
  </head>
  <body onload="docReady()" onkeydown="" onkeyup="">
    <div class="cont">
      <img id="img" src="untitled.png" width="30px" style="position:absolute;left:0px;top:0px">
      <img id="img1" src="untitled.png" width="30px">
    </div>
    <button><a href="game.php">ae</a></button>
    <script type="text/javascript">
      $(document).ready(function(){
        var pus=$('.cont #img,#img1').draggable({containment: ".cont", axis:"y"});
      });
    </script>
    <script type="text/javascript">
      var player1=document.getElementById('img1');
      var player = document.getElementById('img');
      var pos1=player.style.position;
      var pos2=player1.style.position;
      player.style.position = 'relative';

     function compare(){
        if(pos1==pos2){
          console.log('You win');
        }
     }
     function anim(e){
       if(e.keyCode==32){
         myMove();
         compare();
       }
     }
     function docReady(){
       window.addEventListener('keydown', anim);
     }
     function myMove() {
       var elem = document.getElementById("img");   
       var pos = 0;
       var id = setInterval(frame,1);

       function frame() {
         if (pos == 43) {
           clearInterval(id);
         } else {
           pos++; 
           elem.style.left = pos +'6px'; 
         }
       }
     }
    </script>
  </body>
 </html>

0 个答案:

没有答案
相关问题