帮我写一个接苹果的手机版代码
以下是一个简单的接苹果游戏的手机版代码：
HTML:
<!DOCTYPE html>
<html>
<head>
<title>接苹果游戏</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
#game-board {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
}
.apple {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
margin: 10px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.apple:hover {
transform: scale(1.2);
}
.score {
position: fixed;
top: 10px;
right: 10px;
font-size: 24px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div id="game-board"></div>
<div class="score">Score: <span id="score">0</span></div>
<script src="game.js"></script>
</body>
</html>
JavaScript:
// 获取游戏面板和分数元素
const gameBoard = document.getElementById('game-board');
const scoreElement = document.getElementById('score');
// 初始化游戏参数
let score = 0;
let timer = null;
let isPlaying = false;
// 创建苹果元素
function createApple() {
const apple = document.createElement('div');
apple.classList.add('apple');
apple.style.left = Math.floor(Math.random() * (window.innerWidth - 60)) + 'px';
apple.style.top = Math.floor(Math.random() * (window.innerHeight - 60)) + 'px';
apple.addEventListener('click', () => {
if (isPlaying) {
score++;
scoreElement.textContent = score;
gameBoard.removeChild(apple);
createApple();
}
});
gameBoard.appendChild(apple);
}
// 开始游戏
function startGame() {
score = 0;
scoreElement.textContent = score;
isPlaying = true;
timer = setInterval(() => {
createApple();
}, 1000);
}
// 结束游戏
function endGame() {
clearInterval(timer);
isPlaying = false;
}
// 监听窗口大小改变事件
window.addEventListener('resize', () => {
if (isPlaying) {
endGame();
startGame();
}
});
// 监听开始按钮点击事件
document.getElementById('start-button').addEventListener('click', () => {
startGame();
});
// 监听结束按钮点击事件
document.getElementById('end-button').addEventListener('click', () => {
endGame();
});
这个代码实现了一个简单的接苹果游戏，玩家需要在规定时间内接住尽可能多的苹果，每接住一个苹果分数加一。玩家可以通过改变窗口大小来改变游戏难度，游戏会自动适应窗口大小。
原文地址: https://www.cveoy.top/t/topic/bX4R 著作权归作者所有。请勿转载和采集!