<<shijunyu>> • 12小时前
<div class="game-info">
分数: <span id="score">0</span>
</div>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<div class="game-controls">
<button id="jumpBtn">跳跃 (空格/点击)</button>
<button id="restartBtn">重新开始</button>
</div>
<script>
// 获取画布和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const jumpBtn = document.getElementById('jumpBtn');
const restartBtn = document.getElementById('restartBtn');
// 游戏参数
let score = 0;
let gameOver = false;
let gameSpeed = 5; // 游戏速度
// 熊大角色
const bear = {
x: 100, // 横坐标
y: canvas.height - 100, // 纵坐标
width: 80, // 宽度
height: 80, // 高度
velocityY: 0, // 垂直速度
gravity: 0.6, // 重力
jumpPower: -15, // 跳跃力度
isJumping: false // 是否在跳跃
};
// 障碍物数组
let obstacles = [];
let obstacleSpawnTimer = 0;
const obstacleSpawnRate = 120; // 生成障碍物的间隔
// 绘制熊大
function drawBear() {
ctx.fillStyle = '#8B4513'; // 熊大的棕色
// 绘制熊大的身体
ctx.fillRect(bear.x, bear.y, bear.width, bear.height);
// 绘制熊大的脸
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(bear.x + 20, bear.y + 20, 15, 10); // 左眼
ctx.fillRect(bear.x + 45, bear.y + 20, 15, 10); // 右眼
ctx.fillStyle = '#000000';
ctx.fillRect(bear.x + 25, bear.y + 22, 5, 5); // 左眼球
ctx.fillRect(bear.x + 50, bear.y + 22, 5, 5); // 右眼球
// 绘制鼻子
ctx.fillStyle = '#FF6347';
ctx.fillRect(bear.x + 35, bear.y + 40, 10, 8);
}
// 绘制障碍物(石头)
function drawObstacles() {
obstacles.forEach(obstacle => {
ctx.fillStyle = '#696969'; // 石头灰色
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
// 更新熊大状态
function updateBear() {
// 应用重力
bear.velocityY += bear.gravity;
bear.y += bear.velocityY;
// 防止熊大掉出画布底部
if (bear.y > canvas.height - bear.height) {
bear.y = canvas.height - bear.height;
bear.velocityY = 0;
bear.isJumping = false;
}
}
// 更新障碍物
function updateObstacles() {
// 移动障碍物
obstacles.forEach((obstacle, index) => {
obstacle.x -= gameSpeed;
// 移除超出画布的障碍物
if (obstacle.x + obstacle.width < 0) {
obstacles.splice(index, 1);
// 每躲过一个障碍物加分
score += 10;
scoreElement.textContent = score;
// 随着分数增加提高游戏速度
if (score % 50 === 0) {
gameSpeed += 0.5;
}
}
});
// 生成新的障碍物
obstacleSpawnTimer++;
if (obstacleSpawnTimer >= obstacleSpawnRate && !gameOver) {
obstacles.push({
x: canvas.width,
y: canvas.height - 80,
width: 50 + Math.random() * 30, // 随机宽度 50-80
height: 50 + Math.random() * 30 // 随机高度 50-80
});
obstacleSpawnTimer = 0;
// 随机调整生成间隔,增加游戏难度
obstacleSpawnRate = 100 + Math.random() * 50;
}
}
// 碰撞检测
function checkCollision() {
for (let obstacle of obstacles) {
if (
bear.x < obstacle.x + obstacle.width &&
bear.x + bear.width > obstacle.x &&
bear.y < obstacle.y + obstacle.height &&
bear.y + bear.height > obstacle.y
) {
gameOver = true;
alert(`游戏结束!你的分数是: ${score}`);
}
}
}
// 跳跃函数
function jump() {
if (!bear.isJumping && !gameOver) {
bear.velocityY = bear.jumpPower;
bear.isJumping = true;
}
}
// 重置游戏
function restartGame() {
score = 0;
gameOver = false;
gameSpeed = 5;
scoreElement.textContent = score;
obstacles = [];
obstacleSpawnTimer = 0;
bear.y = canvas.height - bear.height;
bear.velocityY = 0;
bear.isJumping = false;
}
// 游戏主循环
function gameLoop() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!gameOver) {
updateBear();
updateObstacles();
checkCollision();
}
drawBear();
drawObstacles();
requestAnimationFrame(gameLoop);
}
// 事件监听
jumpBtn.addEventListener('click', jump);
restartBtn.addEventListener('click', restartGame);
// 空格键跳跃
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
jump();
}
});
// 点击画布跳跃
canvas.addEventListener('click', jump);
// 启动游戏
gameLoop();
</script>
评论:
请先登录,才能进行评论