网页游戏《春哥采菊》源码

admin

创建一个简单的HTML网页游戏“春哥采菊”需要一些基本的HTML、CSS和JavaScript。以下是一个简化的示例，展示了一个基本的游戏框架，其中包括一个玩家（春哥）和几朵可以采集的菊花。

创建HTML文件（index.html）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>春哥采菊</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>春哥采菊</h1> <div id="game-container"> <div id="player" class="character">春哥</div> <div class="flower" data-collected="false">菊花</div> <div class="flower" data-collected="false">菊花</div> <div class="flower" data-collected="false">菊花</div> <div class="score">已采集的菊花: 0</div> </div> <script src="script.js"></script> </body> </html>

创建CSS文件（styles.css）

`body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f0f8ff;
}

#game-container {
position: relative;
width: 80%;
margin: auto;
top: 50px;
}

.character {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: yellow;
padding: 10px;
border-radius: 50%;
cursor: pointer;
}

.flower {
position: absolute;
width: 100px;
height: 100px;
background-color: orange;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
}

.flower:nth-child(2) {
top: 150px;
left: 30%;
}

.flower:nth-child(3) {
top: 150px;
right: 30%;
}

.flower.collected {
background-color: grey;
pointer-events: none;
}

.score {
margin-top: 50px;
font-size: 24px;
}`

创建JavaScript文件（script.js）

`const player = document.getElementById('player');
const flowers = document.querySelectorAll('.flower');
const scoreBoard = document.querySelector('.score');
let score = 0;

const movePlayer = (event) => {
const bounds = player.getBoundingClientRect();
const containerBounds = document.getElementById('game-container').getBoundingClientRect();
let newLeft = bounds.left + event.movementX;
let newTop = bounds.top + event.movementY;

// 限制玩家在容器内移动  
if (newLeft < 0) newLeft = 0;  
if (newLeft > containerBounds.width - bounds.width) newLeft = containerBounds.width - bounds.width;  
if (newTop < 0) newTop = 0;  
if (newTop > containerBounds.height - bounds.height) newTop = containerBounds.height - bounds.height;  
  
player.style.left = `${newLeft}px`;  
player.style.top = `${newTop}px`;

};

// 使玩家可拖动
let isDragging = false;
player.addEventListener('mousedown', (event) => {
isDragging = true;
document.addEventListener('mousemove', movePlayer);
document.addEventListener('mouseup', () => {
isDragging = false;
document.removeEventListener('mousemove', movePlayer);
});
});

// 采集菊花
flowers.forEach(flower => {
flower.addEventListener('click', () => {
const boundsPlayer = player.getBoundingClientRect();
const boundsFlower = flower.getBoundingClientRect();
const containerBounds = document.getElementById('game-container').getBoundingClientRect();

    // 简单的碰撞检测  
    if (  
        boundsPlayer.left < boundsFlower.left + boundsFlower.width &&  
        boundsPlayer.left + boundsPlayer.width > boundsFlower.left &&  
        boundsPlayer.top < boundsFlower.top + boundsFlower.height &&  
        boundsPlayer.top + boundsPlayer.height > boundsFlower.top  
    ) {  
        collectFlower(flower);  
    }  
});

});`

注意事项

碰撞检测：此示例中的碰撞检测非常基础，仅检查玩家和菊花的边界框是否重叠。对于更复杂的游戏，您可能需要更高级的碰撞检测算法。
响应性：此示例在较小的屏幕上可能不完全响应。可以添加媒体查询来优化CSS，以适应不同屏幕尺寸。
游戏逻辑：此示例仅展示了基本的游戏逻辑。您可以添加更多功能和复杂性，如计时器、关卡、分数限制等。

将这三个文件保存在同一目录中，然后在浏览器中打开index.html即可运行游戏。