挑战！零基础，不写一行代码，一小时完成小恐龙跳一跳的网页小游戏！

最新推荐文章于 2024-06-27 10:47:20 发布

unicorn0927

最新推荐文章于 2024-06-27 10:47:20 发布

阅读量881

点赞数 4

文章标签：人工智能 chatgpt html

本文链接：https://blog.csdn.net/weixin_72770304/article/details/136204759

版权

本文讲述了作者从零基础开始，通过GPT指导学习HTML、CSS和JavaScript，一步步实现小恐龙跳跃和障碍物移动的网页小游戏过程，包括代码编写、问题解决和优化过程。

摘要由CSDN通过智能技术生成

不写一行代码，一小时完成小恐龙跳一跳的网页小游戏！

这三种语言之前完全没有接触过，零基础小白

先给出最后的效果图

开始的时候非常顺利（因为我也不知道它说的对不对哈哈）

GPT一下给出了三段所需的代码

步骤 1: 创建基础的HTML结构

首先，我们需要创建一个HTML文件，这将是游戏的基础结构。你可以使用任何文本编辑器来创建这个文件，然后保存为index.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小恐龙游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="gameContainer">
        <div id="dino"></div>
        <div id="obstacle"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

步骤 2: 添加样式

接下来，我们需要创建一个CSS文件来添加样式，使游戏看起来更加吸引人。保存此文件为style.css。

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #f4f4f4;
}

#gameContainer {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #e5e5e5;
    overflow: hidden;
}

#dino {
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: #000;
}

#obstacle {
    position: absolute;
    bottom: 0;
    right: 100%;
    width: 20px;
    height: 50px;
    background-color: red;
    animation: moveObstacle 2s infinite linear;
}

@keyframes moveObstacle {
    from { right: -20px; }
    to { right: 100%; }
}

步骤 3: 添加JavaScript逻辑

最后，我们需要创建JavaScript文件script.js，来添加游戏逻辑，比如跳跃和障碍物移动。

const dino = document.getElementById('dino');
const obstacle = document.getElementById('obstacle');

document.addEventListener('keydown', function(event) {
    if (event.key === " ") {
        jump();
    }
});

function jump() {
    if (dino.classList != "jump") {
        dino.classList.add("jump");

        setTimeout(function() {
            dino.classList.remove("jump");
        }, 300);
    }
}

let isAlive = setInterval(function() {
    let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("bottom"));
    let obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("right"));

    if(obstacleLeft < 50 && obstacleLeft > 0 && dinoTop <= 50) {
        alert("Game Over!");
    }
}, 10);

保存，运行

结果当然没有预想中的小恐龙出现，可爱的小恐龙变成了一个黑色的方块，障碍物变成了一个红色的方块，这个配色也是很奇怪的。

更严重的问题是，这只假的小恐龙跳不起来！毫无游戏体验感

我接着问GPT小恐龙为什么跳不起来

它给了我5条可能的原因，然后我发现是CSS文件中没有定义'.jump'类

于是我又让GPT重新生成了一遍CSS文件的代码，这回它也发现了，帮我加上了

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #f4f4f4;
}

#gameContainer {
    position: relative;
    width: 600px; /* 可以调整游戏区域的宽度 */
    height: 200px;
    margin: 0 auto; /* 水平居中显示 */
    background-color: #e5e5e5;
    overflow: hidden;
}

#dino {
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: #000;
}

#obstacle {
    position: absolute;
    bottom: 0;
    right: 100%;
    width: 20px;
    height: 50px;
    background-color: red;
    animation: moveObstacle 2s infinite linear;
}

@keyframes moveObstacle {
    from { right: -20px; }
    to { right: 100%; }
}

/* 添加跳跃动画 */
#dino.jump {
    animation: jump 0.5s;
}

@keyframes jump {
    0% { bottom: 0; }
    50% { bottom: 100px; } /* 调整这个值以改变跳跃高度 */
    100% { bottom: 0; }
}

小恐龙终于可以跳了！emm但为啥每次跳都给我Game Over！

然后我发现，原代码中的碰撞检测太严苛了，我让GPT给我解释，但似乎好像它也说不太清楚

还想着让它生成图片，让我好理解一点

但是。。。

好像更加抽象了

经过一番小小的努力

我最后把跳跃高度加大到130px，障碍物宽度、高度都减小到30px，将检查障碍物右边缘改成了检查其左边缘。并且调整了Game Over的条件。如下：

let checkCollision = setInterval(function() {
    let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("bottom"));
    let obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("left"));

    // 检测碰撞
    if(obstacleLeft > 0 && obstacleLeft < 20 && dinoTop < 30) {
        alert("Game Over!");
    }
}, 10);

终于不会次次都Game Over 了

最后还要解决一下小恐龙的问题，黑色的方块确实有点太丑了

本来想着让GPT生成小恐龙的图，但是它好像不太会生成我想要的背景颜色的小恐龙

试了好几次，也没有让我很满意的小恐龙

最后我还是去网上拉了图，网上拉的图背景基本是白色的

为了不那么突兀，我把背景板的颜色也改成白色了

文末，给出最终的代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小恐龙游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="gameContainer">
        <div id="dino"></div>
        <div id="obstacle"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #f4f4f4;
}

#gameContainer {
    position: relative;
    width: 600px; /* 可以调整游戏区域的宽度 */
    height: 200px;
    margin: 0 auto; /* 水平居中显示 */
    background-color: #f9f9f9;
    overflow: hidden;
}

#dino {
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 50px;
    background-image: url('小恐龙.png'); 
    background-size: cover; /* 确保图片覆盖整个障碍物区域 */
}

/* 设置障碍物的样式 */
#obstacle {
    position: absolute;
    bottom: 0; /* 障碍物位于游戏区域的底部 */
    right: 100%; /* 初始位置在游戏区域的右侧之外 */
    width: 30px; /* 根据图片尺寸调整 */
    height: 30px; /* 根据图片尺寸调整 */
    background-image: url('树桩.png'); /* 使用石头图片 */
    background-size: cover; /* 确保图片覆盖整个障碍物区域 */
    animation: moveObstacle 2s infinite linear; /* 障碍物的移动动画 */
}


@keyframes moveObstacle {
    from { right: -20px; }
    to { right: 100%; }
}

/* 添加跳跃动画 */
#dino.jump {
    animation: jump 0.5s;
}

@keyframes jump {
    0% { bottom: 0; }
    50% { bottom: 100px; } /* 调整这个值以改变跳跃高度 */
    100% { bottom: 0; }
}

Javascript

const dino = document.getElementById('dino');
const obstacle = document.getElementById('obstacle');

document.addEventListener('keydown', function(event) {
    if (event.key === " " || event.keyCode === 32) { // 检测空格键
        if (!dino.classList.contains('jump')) { // 防止在空中多次跳跃
            dino.classList.add('jump');
            setTimeout(() => {
                dino.classList.remove('jump');
            }, 500); // 跳跃时间与CSS动画持续时间相同
        }
    }
});

let checkCollision = setInterval(function() {
    let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("bottom"));
    let obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("left"));

    // 检测碰撞
    if(obstacleLeft > 0 && obstacleLeft < 20 && dinoTop < 30) {
        alert("Game Over!");
    }
}, 10);