141 lines
4.6 KiB
HTML
141 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>/user????</title>
|
|
<style>
|
|
body {
|
|
text-align: center;
|
|
background-image: url('assets/bg.webp'); /* 设置背景图片 */
|
|
background-size: cover; /* 背景图片覆盖整个页面 */
|
|
}
|
|
canvas {
|
|
border: 1px solid #000;
|
|
background-color: rgba(135,206,250, 0.6);
|
|
}
|
|
#message {
|
|
font-size: 24px;
|
|
margin-top: 20px;
|
|
}
|
|
#restart {
|
|
display: none;
|
|
font-size: 18px;
|
|
margin-top: 20px;
|
|
padding: 10px 20px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Snake Game, please use your keyboard to control the snake!!!</h1>
|
|
<canvas id="gameCanvas" width="400" height="400"></canvas>
|
|
<div id="message">Score: 0</div>
|
|
<button id="restart" onclick="restartGame()">Restart</button>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('gameCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.globalAlpha = 0.6;
|
|
const box = 20;
|
|
let snake = [{ x: 9 * box, y: 10 * box }];
|
|
let food = {
|
|
x: Math.floor(Math.random() * 19 + 1) * box,
|
|
y: Math.floor(Math.random() * 19 + 1) * box
|
|
};
|
|
let score = 0;
|
|
let d;
|
|
|
|
document.addEventListener('keydown', direction);
|
|
|
|
function direction(event) {
|
|
if (event.keyCode == 37 && d != 'RIGHT') {
|
|
d = 'LEFT';
|
|
} else if (event.keyCode == 38 && d != 'DOWN') {
|
|
d = 'UP';
|
|
} else if (event.keyCode == 39 && d != 'LEFT') {
|
|
d = 'RIGHT';
|
|
} else if (event.keyCode == 40 && d != 'UP') {
|
|
d = 'DOWN';
|
|
}
|
|
}
|
|
|
|
function collision(head, array) {
|
|
for (let i = 0; i < array.length; i++) {
|
|
if (head.x == array[i].x && head.y == array[i].y) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
for (let i = 0; i < snake.length; i++) {
|
|
ctx.fillStyle = (i == 0) ? 'green' : 'white';
|
|
ctx.fillRect(snake[i].x, snake[i].y, box, box);
|
|
|
|
ctx.strokeStyle = 'red';
|
|
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
|
|
}
|
|
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillRect(food.x, food.y, box, box);
|
|
|
|
let snakeX = snake[0].x;
|
|
let snakeY = snake[0].y;
|
|
|
|
if (d == 'LEFT') snakeX -= box;
|
|
if (d == 'UP') snakeY -= box;
|
|
if (d == 'RIGHT') snakeX += box;
|
|
if (d == 'DOWN') snakeY += box;
|
|
|
|
if (snakeX == food.x && snakeY == food.y) {
|
|
score++;
|
|
document.getElementById('message').innerText = `Score: ${score}`; // 更新分数显示
|
|
food = {
|
|
x: Math.floor(Math.random() * 19 + 1) * box,
|
|
y: Math.floor(Math.random() * 19 + 1) * box
|
|
};
|
|
} else {
|
|
snake.pop();
|
|
}
|
|
|
|
let newHead = {
|
|
x: snakeX,
|
|
y: snakeY
|
|
};
|
|
|
|
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
|
|
clearInterval(game);
|
|
document.getElementById('message').innerText = `Game Over! Score: ${score}`;
|
|
document.getElementById('restart').style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
snake.unshift(newHead);
|
|
|
|
ctx.fillStyle = 'white';
|
|
ctx.font = '45px Changa one';
|
|
ctx.fillText(score, 2 * box, 1.5 * box);
|
|
|
|
if (score >= 10) {
|
|
clearInterval(game);
|
|
document.getElementById('message').innerText = `nb!!!! Your session Secret Key: 'jiangsir' ,Score: ${score}`;
|
|
document.getElementById('restart').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function restartGame() {
|
|
location.reload(); // 重新加载页面以重置游戏
|
|
}
|
|
|
|
let game = setInterval(draw, 100);
|
|
</script>
|
|
</body>
|
|
</html>
|