主要问题是我不知道如何显示这两个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>