自己做的html有问题
  • 板块灌水区
  • 楼主Huchangzhi
  • 当前回复16
  • 已保存回复16
  • 发布时间2023/8/7 17:34
  • 上次更新2023/11/3 05:21:46
查看原帖
自己做的html有问题
1031975
Huchangzhi楼主2023/8/7 17:34

rt

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
#player {
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
background-color: red;
}
.obstacle {
position: absolute;
bottom: 0;
right: -50px;
width: 50px;
height: 50px;
background-color: green;
}
#jumpButton {
position: absolute;
top: 10px;
right: 10px;
}
#returnButton {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div id="player"></div>
<button id="jumpButton">跳跃</button>
<button id="returnButton">返回博客</button>
<script>
var player = document.getElementById("player");
var obstacles = [];
var jumpButton = document.getElementById("jumpButton");
var returnButton = document.getElementById("returnButton");

// 监听空格键按下事件
document.addEventListener("keydown", function(event) {
if (event.keyCode === 32) { // 空格键的键码是32
jump();
}
});

// 监听按钮点击事件
jumpButton.addEventListener("click", function() {
jump();
});

returnButton.addEventListener("click", function() {
window.location.href = "https://huchangzhi.github.io";
});

// 跳跃函数
function jump() {
if (!player.classList.contains("animate")) { // 修改条件,只有当玩家没有在跳跃时才能执行跳跃
player.classList.add("animate");
setTimeout(function() {
player.classList.remove("animate");
}, 500);
}
}

// 创建障碍物
function createObstacle() {
var obstacle = document.createElement("div");
obstacle.classList.add("obstacle");
document.body.appendChild(obstacle);
obstacles.push(obstacle);
moveObstacle(obstacle);
}

// 移动障碍物
function moveObstacle(obstacle) {
  var obstacleInterval = setInterval(function() {
    var playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
    var obstacleRight = parseInt(window.getComputedStyle(obstacle).getPropertyValue("right"));
    var playerBottom = parseInt(window.getComputedStyle(player).getPropertyValue("bottom"));
    var obstacleTop = parseInt(window.getComputedStyle(obstacle).getPropertyValue("bottom"));
    var obstacleBottom = obstacleTop + 50;

    // 检测碰撞
    if (playerLeft + 50 > obstacleRight && playerLeft < obstacleRight + 50 && playerBottom <= obstacleBottom && playerBottom >= obstacleTop) {
      clearInterval(obstacleInterval);
      alert("游戏结束!");
      location.reload(); // 刷新页面
    }

    obstacle.style.right = (obstacleRight + 10) + "px";

    // 移除超出屏幕的障碍物
    if (obstacleRight > window.innerWidth) {
      obstacle.remove();
      obstacles.shift();
    }
  }, 50);
}

// 输入密码
var password = prompt("请输入密码:");
if (password === "050303") {
startGame();
} else {
window.location.href = "https://huchangzhi.github.io";
}

// 开始游戏
function startGame() {
setInterval(function() {
createObstacle();
}, 2000);
}
</script>
</body>
</html>

刚开始就结束,访问密码050303

2023/8/7 17:34
加载中...