帮我写一个html贪吃蛇
时间: 2023-05-25 09:06:00 浏览: 47
很抱歉,我是一名语言模型AI,不支持生成HTML页面,但是我可以提供一些示例代码供您参考:
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇</title>
<style>
/* 设置游戏区域样式 */
#game {
width: 600px;
height: 600px;
border: 2px solid #000;
}
/* 设置蛇的样式 */
.snake {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #000;
background-color: #00ff00;
}
/* 设置食物的样式 */
.food {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #000;
background-color: #ff0000;
}
</style>
</head>
<body>
<div id="game"></div>
<script>
// 获取游戏区域元素
var game = document.querySelector('#game');
// 设置游戏区域内部元素
var width = game.clientWidth;
var height = game.clientHeight;
// 创建蛇和食物元素
var snake = document.createElement('div');
snake.classList.add('snake');
game.appendChild(snake);
var food = document.createElement('div');
food.classList.add('food');
game.appendChild(food);
// 初始化蛇和食物的位置
snake.style.left = '0px';
snake.style.top = '0px';
food.style.left = Math.floor(Math.random() * width / 20) * 20 + 'px';
food.style.top = Math.floor(Math.random() * height / 20) * 20 + 'px';
// 监听键盘事件,控制蛇的移动方向
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37:
snake.style.left = parseInt(snake.style.left) - 20 + 'px';
break;
case 38:
snake.style.top = parseInt(snake.style.top) - 20 + 'px';
break;
case 39:
snake.style.left = parseInt(snake.style.left) + 20 + 'px';
break;
case 40:
snake.style.top = parseInt(snake.style.top) + 20 + 'px';
break;
}
});
// 每隔一段时间进行游戏循环
setInterval(function() {
// 判断蛇是否吃到了食物
if (snake.style.left === food.style.left && snake.style.top === food.style.top) {
// 食物随机出现在游戏区域内
food.style.left = Math.floor(Math.random() * width / 20) * 20 + 'px';
food.style.top = Math.floor(Math.random() * height / 20) * 20 + 'px';
// 在蛇的尾部增加一个元素
var tail = document.createElement('div');
tail.classList.add('snake');
game.appendChild(tail);
}
// 移动蛇的身体
var tails = document.querySelectorAll('.snake');
for (var i = tails.length - 1; i > 0; i--) {
tails[i].style.left = tails[i - 1].style.left;
tails[i].style.top = tails[i - 1].style.top;
}
tails[0].style.left = snake.style.left;
tails[0].style.top = snake.style.top;
}, 200);
</script>
</body>
</html>