饥荒游戏主题网页源码 (大作业html)

于 2025-05-12 12:05:03 发布
阅读量317 收藏 1
点赞数 7
CC 4.0 BY-SA版权
分类专栏： 前端demo 前端 文章标签： 游戏 课程设计 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Pan_peter/article/details/147893660

「饥荒游戏主题」大作业分享 大作业分享 大作业分享 大作业分享
链接：https://pan.quark.cn/s/590d7231e7c6

链接：https://pan.quark.cn/s/590d7231e7c6

链接：https://pan.quark.cn/s/590d7231e7c6

 

之前代做的大作业（doge），全部放出来，放着也是吃灰~

纯搬砖，技术力很差，天天耕地，在代码的田野里，干就完了！

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        body {
            background-color: #2c2c2c; /* 深色背景，类似饥荒Wiki的暗调 */
            color: #e0e0e0; /* 浅色文字 */
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 更现代的字体 */
            overflow-x: hidden; /* 防止水平滚动条 */
        }

        /* 导航栏样式 */
        .navbar-custom {
            background-color: #1a1a1a !important; /* 更深的导航栏背景 */
            border-bottom: 3px solid #c88500; /* 饥荒主题橙色边框 */
            padding-top: 0.8rem;
            padding-bottom: 0.8rem;
        }

        .navbar-custom .navbar-brand {
            color: #e0e0e0;
            font-weight: bold;
            font-size: 1.8rem;
        }
        .navbar-custom .navbar-brand:hover {
            color: #ffc107; /* 鼠标悬停时品牌颜色 */
        }

        .navbar-custom .nav-link {
            color: #b0b0b0;
            font-size: 1.1rem;
            margin-left: 15px;
            margin-right: 15px;
            transition: color 0.3s ease;
        }

        .navbar-custom .nav-link:hover,
        .navbar-custom .nav-link.active {
            color: #ffc107; /* 鼠标悬停和激活状态的链接颜色 */
        }

        .navbar-toggler {
            border-color: rgba(255, 193, 7, 0.5); /* 切换按钮边框颜色 */
        }
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 193, 7, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }


        /* 英雄区域 */
        .hero-section {
            background: url('img/bg.png') no-repeat center center; /* 替换为你的游戏背景图 */
            background-size: cover;
            color: #fff;
            padding: 100px 0;
            text-align: center;
            position: relative;
            min-height: 70vh; /* 最小高度 */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hero-section::before { /* 遮罩层，让文字更清晰 */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
        }
        .hero-content {
            position: relative; /* 确保内容在遮罩层之上 */
            z-index: 1;
            animation: fadeInDown 1s ease-out; /* jQuery/CSS 动画 */
        }
        .hero-section h1 {
            font-size: 3.5rem;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
        }
        .hero-section p {
            font-size: 1.5rem;
            margin-bottom: 30px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        }
        .btn-custom-primary {
            background-color: #c88500;
            border-color: #c88500;
            color: #1a1a1a;
            padding: 12px 30px;
            font-size: 1.2rem;
            font-weight: bold;
            transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
        }
        .btn-custom-primary:hover {
            background-color: #e09d2b;
            border-color: #e09d2b;
            color: #000;
            transform: translateY(-3px);
        }

        /* 内容区域通用样式 */
        .content-section {
            padding: 60px 0;
            background-color: #222; /* 区域背景色 */
            border-top: 1px solid #444;
            opacity: 0; /* 初始隐藏，用于jQuery淡入 */
            transform: translateY(20px); /* 初始偏移，用于jQuery淡入 */
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .content-section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .section-title {
            text-align: center;
            font-size: 2.8rem;
            color: #ffc107; /* 标题颜色 */
            margin-bottom: 50px;
            font-weight: bold;
            text-transform: uppercase; /* 标题大写 */
            letter-spacing: 1px; /* 字符间距 */
        }
        .section-title::after { /* 标题下划线装饰 */
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background-color: #c88500;
            margin: 15px auto 0;
        }

        /* 卡片样式 */
        .card-custom {
            background-color: #383838; /* 卡片背景 */
            border: 1px solid #555;
            color: #e0e0e0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%; /* 确保卡片等高 */
            display: flex;
            flex-direction: column;
        }
        .card-custom:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.4);
        }
        .card-img-container {
            width: 100%;
            height: 220px; /* 固定图片容器高度 */
            overflow: hidden; /* 裁剪超出部分 */
            border-top-left-radius: var(--bs-card-inner-border-radius);
            border-top-right-radius: var(--bs-card-inner-border-radius);
        }
        .card-custom .card-img-top {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 确保图片填满容器并保持比例，中间部分显示 */
            transition: transform 0.4s ease;
        }
        .card-custom:hover .card-img-top {
            transform: scale(1.1); /* 鼠标悬停时图片放大 */
        }
        .card-custom .card-body {
            padding: 1.5rem;
            flex-grow: 1; /* 让 card-body 占据剩余空间 */
            display: flex;
            flex-direction: column;
        }
        .card-custom .card-title {
            color: #ffc107;
            font-size: 1.5rem;
            margin-bottom: 0.75rem;
        }
        .card-custom .card-text {
            font-size: 0.95rem;
            line-height: 1.6;
            flex-grow: 1; /* 文本内容占据可用空间 */
        }
        .card-custom .btn-card {
            background-color: #8a5c00;
            border-color: #8a5c00;
            color: #fff;
            margin-top: auto; /* 按钮置于卡片底部 */
        }
        .card-custom .btn-card:hover {
            background-color: #c88500;
            border-color: #c88500;
        }

        /* "关于游戏"区域特定样式 */
        .about-game-text {
            font-size: 1.1rem;
            line-height: 1.8;
            text-align: justify; /* 两端对齐 */
        }
        .about-game-img-container {
            height: 410px; /* 固定图片容器高度 */
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        .about-game-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


        /* 页脚 */
        .footer-custom {
            background-color: #1a1a1a;
            color: #888;
            padding: 30px 0;
            text-align: center;
            border-top: 3px solid #c88500;
        }
        .footer-custom p {
            margin-bottom: 0;
        }
        .footer-custom a {
            color: #c88500;
            text-decoration: none;
        }
        .footer-custom a:hover {
            color: #ffc107;
            text-decoration: underline;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .hero-section h1 {
                font-size: 2.8rem;
            }
            .hero-section p {
                font-size: 1.2rem;
            }
            .section-title {
                font-size: 2.2rem;
            }
            .navbar-custom .nav-link {
                margin-left: 5px;
                margin-right: 5px;
                font-size: 1rem;
            }
            .card-img-container {
                height: 180px;
            }
        }
        @media (max-width: 768px) {
            .hero-section {
                padding: 80px 0;
                min-height: 60vh;
            }
            .hero-section h1 {
                font-size: 2.2rem;
            }
            .hero-section p {
                font-size: 1.1rem;
            }
             .navbar-custom .navbar-brand {
                font-size: 1.5rem;
            }
            .content-section {
                padding: 40px 0;
            }
            .section-title {
                font-size: 1.8rem;
                margin-bottom: 30px;
            }
            .about-game-img-container {
                height: 230px;
                margin-bottom: 20px;
            }
        }

        /* 简单的淡入动画类 */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom sticky-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <img src="img/logo.webp" alt="饥荒Logo" style="height: 40px; margin-right: 10px; vertical-align: middle;">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="characters.html">角色</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="monsters.html">怪物</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="food.html">食物</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="story.html">背景故事</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section class="hero-section">
        <div class="hero-content container">
            <h1>欢迎来到《饥荒》的世界</h1>
            <p class="lead">一个充满科学与魔法的无情荒野，你能活多久？</p>
            <a href="#about-game-section" class="btn btn-custom-primary btn-lg">了解更多</a>
        </div>
    </section>

    <section id="features-section" class="content-section">
        <div class="container">
            <h2 class="section-title">最新动态 & 游戏特色</h2>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4">
                    <div class="card card-custom">
                        <div class="card-img-container">
                            <img src="img/00013.png" class="card-img-top" alt="最新DLC">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">全新DLC"遗忘的知识"发布！</h5>
                            <p class="card-text">探索未知的领域，解锁古老的秘密，面对全新的挑战与生物。新的配方、新的角色等你来体验！</p>
                            <a href="#" class="btn btn-card">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="card card-custom">
                         <div class="card-img-container">
                            <img src="img/00001.png" class="card-img-top" alt="生存技巧">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">顶级生存者指南</h5>
                            <p class="card-text">从搭建第一个营火到击败远古守护者，我们为你整理了最全面的生存技巧和策略，助你度过每一个季节。</p>
                            <a href="#" class="btn btn-card">学习技巧</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-4"> <div class="card card-custom">
                        <div class="card-img-container">
                            <img src="img/00004.png" class="card-img-top" alt="社区活动">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">饥荒社区创作大赛</h5>
                            <p class="card-text">分享你的游戏截图、艺术创作或Mod设计，赢取丰厚奖品！立即参与，展现你的才华与创意。</p>
                            <a href="#" class="btn btn-card">参与活动</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="about-game-section" class="content-section bg-dark"> <div class="container">
            <h2 class="section-title">关于《饥荒》</h2>
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="about-game-img-container">
                        <img src="img/00017.png" class="about-game-img" alt="关于饥荒游戏">
                    </div>
                </div>
                <div class="col-lg-6">
                    <p class="about-game-text">《饥荒》(Don't Starve) 是一款充满挑战的生存游戏，由 Klei Entertainment 开发。玩家被传送到一个陌生而危险的世界，必须利用环境资源、科学知识和一点点魔法来对抗饥饿、寒冷、黑暗以及各种潜伏的怪物。</p>
                    <p class="about-game-text">游戏以其独特的哥特式艺术风格、硬核的生存机制和丰富的可探索内容而闻名。每一个新的世界都是随机生成的，充满了秘密和惊喜。你需要收集资源、制作工具、建造基地，并努力活得更久。你能否揭开这个世界的神秘面纱，并找到回家的路？</p>
                    <a href="https://store.steampowered.com/app/219740/Dont_Starve/" class="btn btn-custom-primary mt-3" target="_blank">前往Steam商店</a>
                </div>
            </div>
        </div>
    </section>

    <section id="explore-section" class="content-section">
        <div class="container">
            <h2 class="section-title">探索更多内容</h2>
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card card-custom text-center">
                        <div class="card-img-container">
                            <img src="img/00026.png" class="card-img-top" alt="角色">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">游戏角色</h5>
                            <p class="card-text">了解每个角色的独特能力、背景故事和生存策略。</p>
                            <a href="characters.html" class="btn btn-card">查看角色</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card card-custom text-center">
                        <div class="card-img-container">
                            <img src="img/00002.png" class="card-img-top" alt="怪物">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">危险怪物</h5>
                            <p class="card-text">认识潜伏在暗影中的各种生物，学习如何应对它们。</p>
                            <a href="monsters.html" class="btn btn-card">了解怪物</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card card-custom text-center">
                        <div class="card-img-container">
                           <img src="img/00016.png" class="card-img-top" alt="食物">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">生存食物</h5>
                            <p class="card-text">探索各种食材和烹饪配方，告别饥饿的威胁。</p>
                            <a href="food.html" class="btn btn-card">探索食物</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card card-custom text-center">
                         <div class="card-img-container">
                            <img src="img/00023.png" class="card-img-top" alt="背景故事">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">背景故事</h5>
                            <p class="card-text">深入了解饥荒世界的起源、秘密和主要人物的传说。</p>
                            <a href="story.html" class="btn btn-card">阅读故事</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer-custom">
        <div class="container">
            <p>&copy; 2025 饥荒游戏世界. 灵感来源于 <a href="https://dontstarve.huijiwiki.com/wiki/%CA%D7%D2%B3" target="_blank">饥荒维基</a>. 保留所有权利.</p>
            <p>本网站仅为学习和展示目的创建，所有游戏相关内容版权归 Klei Entertainment 所有。</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            // 导航栏活动状态切换 (简单示例，实际应根据页面URL判断)
            $('.navbar-nav .nav-link').on('click', function(){
                $('.navbar-nav .nav-link.active').removeClass('active');
                $(this).addClass('active');
            });

            // 滚动时区段淡入效果
            $(window).on('scroll', function() {
                $('.content-section').each(function() {
                    var elementTop = $(this).offset().top;
                    var windowHeight = $(window).height();
                    var scrollTop = $(window).scrollTop();

                    if (scrollTop + windowHeight > elementTop + 50) { // 提前50px触发
                        $(this).addClass('visible');
                    }
                });
            });
            // 初始加载时也检查一次，确保视口内的元素可见
            $(window).trigger('scroll');


            // 平滑滚动到锚点
            $('a[href*="#"]:not([href="#"]):not([href="#0"])').click(function(event) {
                if (
                    location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
                    location.hostname == this.hostname
                ) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        event.preventDefault();
                        $('html, body').animate({
                            scrollTop: target.offset().top - 70 // 减去导航栏高度，使定位更准确
                        }, 1000, 'swing'); // swing 或 linear
                        return false;
                    }
                }
            });

            // 卡片悬停时的额外交互 (如果需要更复杂的，可以在这里添加)
            $('.card-custom').hover(
                function() { // 鼠标进入
                    // $(this).find('.card-title').css('color', '#fff'); // 示例：标题变白
                },
                function() { // 鼠标离开
                    // $(this).find('.card-title').css('color', '#ffc107'); // 恢复原色
                }
            );
        });
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

peter123123123123

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值