我正在尝试阻止角色穿越带有蓝色边框的物体。我已经包含了一些调试注释，因此我可以跟踪代码的执行方式，并且逻辑上似乎很好。但是，他们试图阻止运动的方式不起作用。我想知道为什么。这是我的代码：
//我的HTML代码
<div id="title">
<link rel="stylesheet" type="text/css" href="PM-style.css" media="screen" />
<script src="Pac-Man.js">
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="Pac-Man.js">
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="Grid.js">
</script>
<title> Pac-Man Game </title>
</div>
<body>
<div class="mazeboard">
<hl> WELCOME!!!</hl>
</div>
<p id="buttons">
<script src="Pac-Man.js">
</script>
<button onclick="myMove()" id="beginButton"> Begin Game </button>
<button onclick="increment()" id="pause">   Pause   </button>
<button onclick="reset()" id="reset">   Start Over   </button>
<button onclick="nextStage1()">   Next   </button>
</p>
<div class='status-window'>
<h2> SCORE:                       <span> TIME: </span> <span id="output"> </span> </h2>
<script>
</script>
</div>
</div>
<div class="realm">
<canvas width="800" height="450" style="border: 2px solid blue; background-color: black; border-radius: 20px; margin: 0 auto; position: relative; align-content: center;" id="myCanvas"> </canvas>
<!-- Comment This is where the walls go! -->
<div id='game-window'>
<div id="outerwall" class="game-window" data-index="1"> </div>
<div id="left-wall" class="game-window" data-index="2"></div>
<div id="left-wallTop" class="game-window" data-index="3"></div>
<div id="left-wallMiddle" class="game-window" data-index="4"></div>
<div id="left-wallBottom1" class="game-window" data-index="5"></div>
<div id="left-wallBottom2" class="game-window" data-index="6"></div>
<div id="top-wall" class="game-window" data-index="7"></div>
<div id="middle-wall1" class="game-window" data-index="8"></div>
<div id="middle-wall2" class="game-window" data-index="9"></div>
<div id="right-wall" class="game-window" data-index="10"></div>
<div id="center-block" class="game-window" data-index="11"> </div>
<div id="bottom-block1" class="game-window" data-index="12"></div>
<div id="bottom-block2" class="game-window" data-index="13"></div>
<div id="bottom-block3" class="game-window" data-index="14"></div>
<div id="bottom-block4" class="game-window" data-index="15"></div>
<div id="right-bottom1" class="game-window" data-index="16"></div>
<div id="right-bottom2" class="game-window" data-index="17"></div>
<div id="right-bottom" class="game-window" data-index="18"></div>
<div id="center2" class="game-window" data-index="19"></div>
<div id="opencenter" class="game-window" data-index="20"></div>
<div id="center3" class="game-window" data-index="21"></div>
<div id="hole1" class="game-window" data-index="22"></div>
<div id="hole2" class="game-window" data-index="23"></div>
<div id="hole3" class="game-window" data-index="24"></div>
<div id="hole4" class="game-window" data-index="25"></div>
<div></div>
</div>
<script type="text/javascript" src="Pac-man.js"></script>
<script type="text/javascript" src="Ghost.js"></script>
<script type="text/javascript" src="Grid.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
}
</script>
<div id='pacman' class='realm'> <img src="https://cdn.pixabay.com/photo/2012/04/14/17/12/pacman-34643_960_720.png" id="pacman"> </div>
<div id='ghost' class='realm'> <img src="https://cdn.pixabay.com/photo/2013/07/12/12/31/pacman-145852_960_720.png" id="ghost"> </div>
</div>
</body>
<footer>
</footer>
</html>
//移动吃豆子角色（JAVASCRIPT）
$(document).ready(function() {
console.log('jQuery has loaded!');
console.log("Ready!");
$pacman = $(document.getElementById('pacman'));
pacman = $pacman;
STEP_SIZE = 15;
var keys = {};
document.getElementById("beginButton").onclick = function() {
gameStart()
};
function gameStart() {
start();
pacManPositions = {
'left': parseInt(pacman.css('left')),
'right': parseInt(pacman.css('left')) + pacman.width(),
'top': parseInt(pacman.css('top')),
'bottom': parseInt(pacman.css('top')) + pacman.height()
};
//Setting up conditions to determine movement or not
collision2 = false;
collisions = true;
function collision() {
$(".game-window").each(function() {
var walls = document.getElementsByTagName("div");
walls = $(this);
for (var i = 0; i < walls.length; i++) {
var name = walls[i].getAttribute('id');
var border = $(this).css('border-color');
var position = $(this).position();
if (border == 'rgb(0, 0, 255)') {
wallPositions = {
'left': position.left,
'right': position.left + $(this).width(),
'top': position.top,
'bottom': position.top + pacman.height()
};
pacManPositions = {
'left': parseInt(pacman.css('left')),
'right': parseInt(pacman.css('left')) +
pacman.width(),
'top': parseInt(pacman.css('top')),
'bottom': parseInt(pacman.css('top')) +
pacman.height()
};
if ((pacManPositions.left <= wallPositions.left && pacManPositions.right >= wallPositions.left) ||
(pacManPositions.left <= wallPositions.right && pacManPositions.right >= wallPositions.right) ||
(pacManPositions.left <= wallPositions.right && pacManPositions.right >= wallPositions.left)) {
if ((pacManPositions.top >= wallPositions.top && pacManPositions.top <= wallPositions.bottom) ||
(pacManPositions.top <= wallPositions.top && pacManPositions.top >= wallPositions.bottom - 33) ||
(pacManPositions.top >= wallPositions.top && pacManPositions.bottom <= wallPositions.bottom)) {
collisions = false;
return true;
collision2 = true;
}
}
}
}
});
}
//Moving Pac Man w/ Keys
$(document).on('keydown', movePacman);
function movePacman(event) {
console.log(event.which);
switch (event.which) {
//moving right
case 39:
console.log('right');
// pacman.css("left", (pacman.position().left + 10) + "px");
// var leftVal = pacman.css("left", (pacman.position().left + 10) + "px");
var leftVal = parseInt(pacman.css('left')) + STEP_SIZE;
if (leftVal > ($('#outerwall').width() - pacman.width())) {
leftVal = ($('#outerwall').width() - pacman.width()) - 0;
}
collision();
if (collision() == true) {
var leftVal = 0;
$('#pacman').css('left', leftVal);
} else {
$('#pacman').css('left', leftVal);
break;
}
break;
//moving down
case 40:
console.log('down');
var downVal = parseInt(pacman.css('top')) + STEP_SIZE;
if (downVal > ($('#outerwall').height() + pacman.height()) - 70) {
downVal = ($('#outerwall').height()) - pacman.height() + 1;
}
collision();
if (collision() == true) {
} else {
$('#pacman').css('top', downVal);
break;
}
break;
//moving left
case 37:
console.log('left');
var leftVal = parseInt(pacman.css('left')) - STEP_SIZE;
if (leftVal < 0) {
leftVal = ($('#outerwall').width()) - 780;
//parseInt(pacman.css('left'));
}
collision();
if (collision() == true) {
} else {
$('#pacman').css('left', leftVal);
break;
}
// break;
//moving up
case 38:
console.log('up');
var topVal = parseInt(pacman.css('top')) - STEP_SIZE;
if (topVal < 0) {
topVal = ($('#outerwall').height()) - 430;
}
collision();
if (collision() == true) {
} else {
$('#pacman').css('top', topVal);
break;
}
break;
// break;
//breaking
case 32:
console.log('break');
break;
}
}
}
}）