JavaScript 方块跳跃游戏 - 避开障碍，精准降落

以下是使用JavaScript实现的一个可移动、跳跃和降落到方块上的正方形，同时满足不能从下面跳到方块上，只能从上面降落，也不能从左边或右边进入方块的要求。\n\nHTML部分：\nhtml\n<div id="gameArea">\n <div id="square"></div>\n <div id="block"></div>\n</div>\n\n\nCSS部分：\ncss\n#gameArea {\n position: relative;\n width: 400px;\n height: 400px;\n border: 1px solid black;\n}\n\n#square {\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 50px;\n background-color: blue;\n}\n\n#block {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 100px;\n height: 100px;\n background-color: red;\n}\n\n\nJavaScript部分：\njavascript\ndocument.addEventListener("DOMContentLoaded", function() {\n const square = document.getElementById("square");\n const block = document.getElementById("block");\n let isJumping = false;\n\n function jump() {\n if (!isJumping) {\n isJumping = true;\n let position = 0;\n let jumpInterval = setInterval(function() {\n if (position === 150) {\n clearInterval(jumpInterval);\n let fallInterval = setInterval(function() {\n if (position === 0) {\n clearInterval(fallInterval);\n isJumping = false;\n } else {\n position -= 5;\n square.style.top = position + "px";\n }\n }, 10);\n } else {\n position += 5;\n square.style.top = position + "px";\n }\n }, 10);\n }\n }\n\n function moveLeft() {\n let leftPosition = parseInt(window.getComputedStyle(square).getPropertyValue("left"));\n if (leftPosition > 0) {\n square.style.left = leftPosition - 10 + "px";\n }\n }\n\n function moveRight() {\n let leftPosition = parseInt(window.getComputedStyle(square).getPropertyValue("left"));\n if (leftPosition < 350) {\n square.style.left = leftPosition + 10 + "px";\n }\n }\n\n function checkCollision() {\n let squareTop = parseInt(window.getComputedStyle(square).getPropertyValue("top"));\n let squareLeft = parseInt(window.getComputedStyle(square).getPropertyValue("left"));\n let blockTop = parseInt(window.getComputedStyle(block).getPropertyValue("top"));\n let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));\n let blockRight = blockLeft + parseInt(window.getComputedStyle(block).getPropertyValue("width"));\n if (squareTop >= blockTop && squareLeft >= blockLeft && squareLeft <= blockRight) {\n return true;\n }\n return false;\n }\n\n document.addEventListener("keydown", function(event) {\n if (event.key === "ArrowUp" && !isJumping) {\n jump();\n } else if (event.key === "ArrowLeft") {\n moveLeft();\n } else if (event.key === "ArrowRight") {\n moveRight();\n }\n });\n\n setInterval(function() {\n if (checkCollision()) {\n alert("Game Over!");\n square.style.top = 0;\n square.style.left = 0;\n }\n }, 10);\n});\n\n\n这段代码中，我们首先在HTML中定义了一个游戏区域和一个方块，然后使用CSS对它们进行样式设置。\n\n在JavaScript中，我们首先获取到方块和方块的位置，并定义了一个变量isJumping来表示是否正在跳跃。jump函数用来实现方块的跳跃动作，首先判断方块是否正在跳跃，如果是，则不执行任何操作；如果不是，则通过setInterval定时器来控制方块的上升和下降过程。moveLeft和moveRight函数用来实现方块的左右移动，通过改变方块的left属性来改变其位置。checkCollision函数用来检测方块是否与方块发生了碰撞，通过比较方块和方块的位置来判断是否发生碰撞。\n\n最后，我们通过keydown事件监听用户的按键操作，当按下向上箭头键时，调用jump函数开始跳跃；当按下向左箭头键时，调用moveLeft函数向左移动；当按下向右箭头键时，调用moveRight函数向右移动。同时，使用setInterval定时器来持续检测碰撞，如果发生碰撞，则弹出游戏结束的提示，并将方块的位置重置为初始位置。