贪吃蛇javascript
0
悬赏园豆：20
[已解决问题]
解决于 2013-10-10 14:55
求最简单的贪吃蛇javascript代码。要有注释哦，本人写了好久都写不出来，不要用jquery之类高深的，网上好多代码都看了，传智播客那个也看了，看多了，可还是不会写，虚心求教了
最佳答案
0
我很久以前写过一个，那时候还不知道jquery,现在拿出来看看觉得拿不出手
收获园豆：20
有代码参考吗？？？网上代码也看了不少，自己却还是写不出来，你这个看着还不错，求教，有注释哦
@cnncuj: 你把邮箱或者联系方式告诉我，我发给你吧
@田林九村: hbycljm1989@163.com 要给注释哦，先谢啦！！！太难怕看不懂。。。
@cnncuj: 这个我在网上看到过这个代码，就是没看懂啊，蛇自动移动和转向问题
其他回答(4)
0
这类东西网上肯定有现成的，楼主搜搜便是
我记得看过一句话：那些能被javascript实现的，最终都要被javascript实现。
PS：楼主原话：“不要用jquery之类高深"
我特别遗憾：jQuery高深？ 不过把复杂的js封装好了 让大家傻瓜式的使用罢了。。。。
有代码参考吗？？？网上代码也看了不少，自己却还是写不出来，学了JS一个多月了，感觉没什么进展，求赐教，刚入门，建了个游戏地图不知怎么弄了，方块自动移动转弯之类的真是不知从何下手，没自己的思路，网上的代码都是原作者深究之后写出来的，前前后后都有联系，本人愚笨，求赐教了
0
特别赞赏jquery的方便，快捷，兼容性.......
0
百度
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>
