Skip to content

代
代码片段（1）_376273

qq_34779721 / 代码片段（1）_376273
与 Fork 源项目一致

Fork自 inscode / HTML-CSS-JS

通知 1
Star 0
Fork 0
代
代码片段（1）_376273

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 2276e023 编写于 作者: qq_34779721's avatar qq_34779721
浏览文件
操作

生产代码片段

上级 ef53fd87
隐藏空白更改
内联 并排
Showing with 161 addition and 11 deletion
index.html
浏览文件 @ 2276e023
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8"> <title>贪吃蛇游戏</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> #game-board {
<link href="style.css" rel="stylesheet" type="text/css" /> width: 400px;
<title>InsCode</title> height: 400px;
background-color: lightgray;
position: relative;
}
.snake {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div id="game-board"></div>
<img src="src/assets/logo.svg" alt="InsCode">
<div>欢迎来到 InsCode</div> <script>
</div> var boardSize = 20; // 游戏面板大小
<script src="script.js"></script> var snakeSize = 3; // 初始蛇的长度
var gameBoard = document.getElementById("game-board");
var snake = [];
var food = {};
function createSnake() {
for (var i = 0; i < snakeSize; i++) {
var snakePart = document.createElement("div");
snakePart.className = "snake";
snakePart.style.left = (i * 20) + "px";
gameBoard.appendChild(snakePart);
snake.push(snakePart);
}
}
function createFood() {
var foodX = Math.floor(Math.random() * boardSize) * 20; var foodY = Math.floor(Math.random() * boardSize) * 20;
food = document.createElement("div");
food.className = "food";
food.style.left = foodX + "px";
food.style.top = foodY + "px";
gameBoard.appendChild(food);
}
function moveSnake() {
var snakeHead = snake[0];
var snakeX = parseInt(snakeHead.style.left);
var snakeY = parseInt(snakeHead.style.top);
// 根据方向移动蛇头
switch (direction) {
case "up":
snakeY -= 20;
break;
case "down":
snakeY += 20;
break;
case "left":
snakeX -= 20;
break;
case "right":
snakeX += 20;
break;
}
// 创建新的蛇头
var newHead = document.createElement("div"); newHead.className = "snake";
newHead.style.left = snakeX + "px";
newHead.style.top = snakeY + "px";
// 将新的蛇头插入到数组的最前面
snake.unshift(newHead);
// 移除蛇尾
var removedPart = snake.pop();
gameBoard.removeChild(removedPart);
}
function checkCollision() {
var snakeHead = snake[0];
var snakeX = parseInt(snakeHead.style.left);
var snakeY = parseInt(snakeHead.style.top);
// 检查蛇是否碰到墙壁
if (snakeX < 0 || snakeX >= boardSize * 20 || snakeY < 0 || snakeY >= boardSize * 20) {
gameOver();
return;
}
// 检查蛇是否碰到自己的身体
for (var i = 1; i < snake.length; i++) {
var snakePart = snake[i];
var partX = parseInt(snakePart.style.left);
var partY = parseInt(snakePart.style.top);
if (snakeX === partX && snakeY === partY) {
gameOver();
return;
}
}
// 检查蛇是否吃到食物
var foodX = parseInt(food.style.left);
var foodY = parseInt(food.style.top);
if (snakeX === foodX && snakeY === foodY) {
// 增加蛇的长度
var newPart = document.createElement("div");
newPart.className = "snake";
newPart.style.left = foodX + "px";
newPart.style.top = foodY + "px";
snake.push(newPart);
gameBoard.removeChild(food);
// 创建新的食物
createFood();
}
}
function gameOver() {
clearInterval(gameLoop);
alert("游戏结束");
}
var direction = "right"; // 初始方向
createSnake();
createFood();
var gameLoop = setInterval(function() {
moveSnake();
checkCollision();
}, 200);
document.addEventListener("keydown", function(event) {
switch (event.key) {
case "ArrowUp":
direction = "up";
break;
case "ArrowDown":
direction = "down";
break;
case "ArrowLeft":
direction = "left";
break;
case "ArrowRight":
direction = "right";
break;
}
});
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或