这是一段简单的贪吃蛇代码，可移动的时候为什么会晃动
0
悬赏园豆：20
[已关闭问题]
关闭于 2016-11-16 17:21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width: 100%;
height: 100%;
position: relative;
}
#head{
width: 30px;
height: 30px;
border: 1px black solid;
position: absolute;
line-height: 30px;
text-align: center;
position: absolute;
}
.body{
width: 30px;
height: 30px;
border: 1px black solid;
position: absolute;
left: 30px;
line-height: 30px;
text-align: center;
}
#tail{
width: 30px;
height: 30px;
border: 1px solid;
position: absolute;
line-height: 30px;
text-align: center;
left: 60px;
}
</style>
</head>
<body>
<div id="snake">
<div id="head">头</div>
<div class="body">身</div>
<div id="tail">尾</div>
</div>
<script>
var body = document.getElementsByClassName('body');
var speedX = 0;
var speedY = 30;
function snakeMove(){
var x = head.offsetLeft + speedX;
var y = head.offsetTop + speedY;
for(var i = snake.children.length-1;i>0;i--){
snake.children[i].style.left = snake.children[i-1].offsetLeft + "px";
snake.children[i].style.top = snake.children[i-1].offsetTop + "px";
}
head.style.left = x + "px";
head.style.top = y + "px";
}
var timer = setInterval(snakeMove,800);
document.addEventListener("keydown",function(event){
var event = event || window.event;//兼容
var keyCode = event.keyCode || event.which;//兼容
switch(event.keyCode){
case 37:
if(speedX == 0){
speedX = -30;
speedY = 0;
}
if(speedX == 30){
return false;
}
break;
case 38:
if(speedY == 0){
speedX = 0;
speedY = -30;
}
if(speedY == 30){
return false;
}
break;
case 39:
if(speedX == 00){
speedX = 30;
speedY = 0;
}
if(speedX == -30){
return false;
}
break;
case 40:
if(speedY == 00){
speedX = 0;
speedY = 30;
}
if(speedY == -30){
return false;
}
break;
default:
return;
break;
}
snakeMove();
},false);
</script>
</body>
</html>
按方向的时候，整个屏幕会晃动一下，找不出原因，请高手指教
所有回答(1)
0
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
width: 100vw;
height: 100vh;
position: relative;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
#block {
width: 20px;
height: 20px;
position: absolute;
background-color: #ff0000;
transition: top 0.5s, left 0.5s;
border: 1px solid #000000;
}
#modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#modal-content {
background-color: white;
width: 300px;
padding: 20px;
text-align: center;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#modal-buttons {
margin-top: 20px;
}
#modal-buttons button {
margin-right: 10px;
}
#crying-emoji {
font-size: 40px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="block"></div>
</div>
<div id="modal">
<div id="modal-content">
<p>游戏结束！选择一个选项：</p>
<div id="modal-buttons">
<button id="restart-button">重来</button>
<button id="exit-button">退出</button>
</div>
<p id="crying-emoji"style="
width:285px;
height:60px;">😭</p> <!-- Crying emoji -->
</div>
</div>
<script>
const container = document.getElementById('container');
const block = document.getElementById('block');
const modal = document.getElementById('modal');
const restartButton = document.getElementById('restart-button');
const exitButton = document.getElementById('exit-button');
let currentPosition = { top: container.offsetHeight / 2 - block.offsetHeight / 2, left: container.offsetWidth / 2 - block.offsetWidth / 2 };
let currentDirection = 'right';
let speed = 20; // 初始速度
let isAccelerating = false;
block.style.top = currentPosition.top + 'px';
block.style.left = currentPosition.left + 'px';
function move() {
switch (currentDirection) {
case 'up':
if (currentPosition.top > 0) {
currentPosition.top -= isAccelerating ? speed * 2 : speed;
block.style.top = Math.max(currentPosition.top, 0) + 'px';
} else {
showGameOverDialog();
}
break;
case 'left':
if (currentPosition.left > 0) {
currentPosition.left -= isAccelerating ? speed * 2 : speed;
block.style.left = Math.max(currentPosition.left, 0) + 'px';
} else {
showGameOverDialog();
}
break;
case 'right':
if (currentPosition.left < container.offsetWidth - block.offsetWidth) {
currentPosition.left += isAccelerating ? speed * 2 : speed;
block.style.left = Math.min(currentPosition.left, container.offsetWidth - block.offsetWidth) + 'px';
} else {
showGameOverDialog();
}
break;
case 'down':
if (currentPosition.top < container.offsetHeight - block.offsetHeight) {
currentPosition.top += isAccelerating ? speed * 2 : speed;
block.style.top = Math.min(currentPosition.top, container.offsetHeight - block.offsetHeight) + 'px';
} else {
showGameOverDialog();
}
break;
}
}
function handleKeyDown(event) {
switch (event.key) {
case 'ArrowUp':
currentDirection = 'up';
break;
case 'ArrowLeft':
currentDirection = 'left';
break;
case 'ArrowRight':
currentDirection = 'right';
break;
case 'ArrowDown':
currentDirection = 'down';
break;
case ' ':
isAccelerating = true; // 按下空格键，加速移动方块
break;
}
}
function handleKeyUp(event) {
if (event.key === ' ') {
isAccelerating = false
isAccelerating = false; // 释放空格键，停止加速移动方块
}
}
function showGameOverDialog() {
clearInterval(intervalId);
modal.style.display = 'block';
}
function restartGame() {
currentPosition = { top: container.offsetHeight / 3 - block.offsetHeight / 3, left: container.offsetWidth / 3 - block.offsetWidth / 3 };
currentDirection = 'right';
block.style.top = currentPosition.top + 'px';
block.style.left = currentPosition.left + 'px';
modal.style.display = 'none';
intervalId = setInterval(move, 500);
}
function exitGame() {
window.close();
}
restartButton.addEventListener('click', restartGame);
exitButton.addEventListener('click', exitGame);
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
let intervalId = setInterval(move, 500); // 每500毫秒自动移动一次
</script>
</body>
</html>
