请用js做一个贪吃蛇的游戏,功能有贪吃蛇,随机生成的不同样式的食物,蛇吃了不同的食物长度会有不同的变化,当蛇移动到盒子边缘的时候游戏结束alret显示吃到食物的分数点击关闭重新开始游戏
时间: 2024-03-15 22:44:33 浏览: 14
好的,我可以为您提供一个基本的实现,但需要注意的是,在这个文本框中无法直接实现游戏界面,您需要将代码复制到自己的本地环境中,使用浏览器打开HTML文件才能看到游戏效果。
以下是代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
#container{
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
.snake{
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
.food{
width: 20px;
height: 20px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<h1>贪吃蛇游戏</h1>
<div id="container"></div>
<script src="snake.js"></script>
</body>
</html>
```
JS:
```javascript
// 获取盒子和生成蛇和食物的函数
var container = document.getElementById('container');
var snake = null;
var food = null;
function createSnake(){
var snakeBody = [
{x: 3, y: 2},
{x: 2, y: 2},
{x: 1, y: 2},
{x: 0, y: 2}
];
for(var i = 0; i < snakeBody.length; i++){
var snakeNode = document.createElement('div');
snakeNode.className = 'snake';
snakeNode.style.left = snakeBody[i].x * 20 + 'px';
snakeNode.style.top = snakeBody[i].y * 20 + 'px';
container.appendChild(snakeNode);
}
return snakeBody;
}
function createFood(){
var foodX = Math.floor(Math.random() * 25);
var foodY = Math.floor(Math.random() * 25);
var foodType = Math.floor(Math.random() * 5);
var foodNode = document.createElement('div');
foodNode.className = 'food';
foodNode.style.left = foodX * 20 + 'px';
foodNode.style.top = foodY * 20 + 'px';
switch(foodType){
case 0:
foodNode.style.backgroundColor = 'blue';
foodNode.setAttribute('data-length', 1);
break;
case 1:
foodNode.style.backgroundColor = 'yellow';
foodNode.setAttribute('data-length', 2);
break;
case 2:
foodNode.style.backgroundColor = 'purple';
foodNode.setAttribute('data-length', 3);
break;
case 3:
foodNode.style.backgroundColor = 'orange';
foodNode.setAttribute('data-length', 4);
break;
case 4:
foodNode.style.backgroundColor = 'pink';
foodNode.setAttribute('data-length', 5);
break;
}
container.appendChild(foodNode);
return {x: foodX, y: foodY, length: foodNode.getAttribute('data-length')};
}
// 初始化游戏
function init(){
snake = createSnake();
food = createFood();
}
init();
// 移动蛇和吃食物的函数
var direction = 'right';
function move(){
var newHead = {
x: snake[0].x,
y: snake[0].y
};
switch(direction){
case 'up':
newHead.y -= 1;
break;
case 'right':
newHead.x += 1;
break;
case 'down':
newHead.y += 1;
break;
case 'left':
newHead.x -= 1;
break;
}
if(newHead.x < 0 || newHead.x > 24 || newHead.y < 0 || newHead.y > 24){
alert('游戏结束,您的得分为:' + (snake.length - 4) * 10 + '分!');
window.location.reload();
return;
}
for(var i = 1; i < snake.length; i++){
if(newHead.x == snake[i].x && newHead.y == snake[i].y){
alert('游戏结束,您的得分为:' + (snake.length - 4) * 10 + '分!');
window.location.reload();
return;
}
}
snake.unshift(newHead);
var snakeHead = document.createElement('div');
snakeHead.className = 'snake';
snakeHead.style.left = newHead.x * 20 + 'px';
snakeHead.style.top = newHead.y * 20 + 'px';
container.insertBefore(snakeHead, container.firstChild);
if(newHead.x == food.x && newHead.y == food.y){
var length = parseInt(food.length);
for(var i = 0; i < length; i++){
snake.push({x: snake[snake.length - 1].x, y: snake[snake.length - 1].y});
}
container.removeChild(food);
food = createFood();
}
else{
var snakeTail = snake.pop();
var snakeTailNode = document.getElementsByClassName('snake')[snake.length];
container.removeChild(snakeTailNode);
}
}
setInterval(move, 200);
// 控制蛇移动方向的事件监听
document.onkeydown = function(event){
switch(event.keyCode){
case 38:
if(direction != 'down'){
direction = 'up';
}
break;
case 39:
if(direction != 'left'){
direction = 'right';
}
break;
case 40:
if(direction != 'up'){
direction = 'down';
}
break;
case 37:
if(direction != 'right'){
direction = 'left';
}
break;
}
}
```
这是一个基本的贪吃蛇游戏实现,您可以根据自己的需求进行修改和扩展。
相关推荐
![text/plain](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)