Huchangzhi.github.io/4.html at main · Huchangzhi/Huchangzhi.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
            background-image: url('4_1.jpeg');
            background-size: cover;
        }

        #player {
            position: absolute;
            bottom: 40px;
            left: 50px;
            width: 50px;
            height: 50px;
            background-color: red;
        }

        .obstacle {
            position: absolute;
            bottom: 30px;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <input type="password" id="password" placeholder="请输入密码">
    <button onclick="checkPassword()">确定</button>

    <div id="player"></div>
    <div class="obstacle"></div>

    <button onclick="jump()">跳跃</button>
    <button onclick="goBack()">返回博客</button>

    <script>
        var passwordInput = document.getElementById("password");
        var isJumping = false;

        function checkPassword() {
            var password = passwordInput.value;
            if (password === "050303") {
                startGame();
            } else {
                window.location.href = "https://huchangzhi.github.io";
            }
        }

        function startGame() {
            document.addEventListener("keyup", function (event) {
                if (event.keyCode === 32) {
                    jump();
                }
            });

            setInterval(moveObstacle, 5);
        }

        function jump() {
            if (!isJumping) {
                isJumping = true;
                var player = document.getElementById("player");
                player.style.bottom = "120px";
                setTimeout(function () {
                    player.style.bottom = "30px";
                    isJumping = false;
                }, 650);
            }
        }

        function moveObstacle() {
            var obstacle = document.querySelector(".obstacle");
            var obstacleRight = parseInt(window.getComputedStyle(obstacle).getPropertyValue("right"));
            if (obstacleRight < window.innerWidth) {
                obstacle.style.right = (obstacleRight + 1) + 'px';
            } else {
                obstacle.style.right = '0px';
            }

            checkCollision();
        }

        function checkCollision() {
            var player = document.getElementById("player");
            var obstacle = document.querySelector(".obstacle");
            var playerRect = player.getBoundingClientRect();
            var obstacleRect = obstacle.getBoundingClientRect();

            if (!isJumping && playerRect.left < obstacleRect.right && playerRect.right > obstacleRect.left &&
                playerRect.top < obstacleRect.bottom && playerRect.bottom > obstacleRect.top) {
                endGame();
            }
        }

        function endGame() {
            alert("游戏结束");
            window.location.href = "index2.html";
        }

        function goBack() {
            window.location.href = "index2.html";
        }
    </script>
</body>
</html>