前端如何制作模拟手机游戏_html写手机游戏教程-CSDN博客

本文链接：https://blog.csdn.net/qq_65798038/article/details/140072940

成品：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>火影忍者</title>
    <link rel="stylesheet" href="./index.css" />
</head>
<body>
    <div class="container">
        <div class="box1">
            <!-- 一个绝对定位的视频元素，具有自动播放、静音和循环属性 -->
            <video class="mingreng" style="width: 154px;position: absolute;left: 72.4%;top: 48.4%;display: block;" autoplay muted loop src="./img/video_20240630_154329_edit.mp4"></video>
            <img src="./img/1.jpg" alt="" />
            <!-- 以下是各种信息和功能的占位 div 元素 -->
            <div class="setUp"></div>
            <div class="email"></div>
            <div class="name">莫笑</div>
            <div class="zhanli">156327</div>
            <div class="dengji">55</div>
            <div class="guizhu">V3</div>
            <div class="gold">1532</div>
        </div>
        <div class="box2">
            <img src="./img/libao.png" alt="" />
            <a href="./login.html" class="code"></a>
            <div class="tuichu1"></div>
        </div>
        <div class="box3">
            <img class="box3-img" src="./img/youjian.png" alt="" />
            <div class="tuichu2"></div>
            <div class="koukuan"></div>
            <img class="chengong" src="./img/领取.png" alt="">
            <img class="del" src="./img/删除.png" alt="">
        </div>
    </div>
</body>

<script>
    let box1 = document.querySelector(".box1");
    let box2 = document.querySelector(".box2");
    let box3 = document.querySelector(".box3");
    // 获取页面中的各种元素，以便后续对它们进行操作
    let setup = document.querySelector(".setUp");
    let email = document.querySelector(".email");
    let name = document.querySelector(".name");
    let zhanli = document.querySelector(".zhanli");
    let dengji = document.querySelector(".dengji");
    let guizhu = document.querySelector(".guizhu");
    let code = document.querySelector(".code");
    let tuichu1 = document.querySelector(".tuichu1");
    let tuichu2 = document.querySelector(".tuichu2");
    let gold= document.querySelector(".gold");
    let koukuan= document.querySelector(".koukuan");
    let chengong= document.querySelector(".chengong");
    let del= document.querySelector(".del");

    // 当点击'setUp'元素时，显示'box2'元素
    setup.addEventListener("click", function () {
        box2.style.display = "block";
    })
    // 当点击'email'元素时，显示'box3'元素
    email.addEventListener("click", function () {
        box3.style.display = "block";
    })
    // 当点击'tuichu1'元素时，隐藏'box2'元素
    tuichu1.addEventListener("click", function () {
        box2.style.display = "none";
    })
    // 当点击'tuichu2'元素时，隐藏'box3'元素
    tuichu2.addEventListener("click", function () {
        box3.style.display = "none";
    })

    // 从一个名字数组中随机选择一个名字，并将其设置到'name'元素中，同时存储到本地存储
    let arr = ["莫笑", "小强", "小王", "小张", "小李", "嘉熙", "睿泽", "梓萱", "诗涵", "雨昕", "皓宇", "俊辰", "紫悦", "羽婷"];
    let index = Math.floor(Math.random() * arr.length);
    let randomName = arr[index];
    name.innerHTML = randomName;
    localStorage.setItem("name", randomName);

    // 从一个战力值数组中随机选择一个值，并设置到'zhanli'元素中
    let arr1 = ["156327", "87755", "45456", "456234", "456786", "45645", "564222", "156329", "156330", "5464", "156332", "156328", "887564", "21354", "87155", "45678"];
    let index1 = Math.floor(Math.random() * arr1.length);
    zhanli.innerHTML = arr1[index1];

    // 从一个等级数组中随机选择一个值，并设置到'dengji'元素中
    let arr2 = ["30", "33", "38", "50", "12","17", "52", "59", "88", "90","33", "55", "21", "39", "18", "20"];
    let index2 = Math.floor(Math.random() * arr2.length);
    dengji.innerHTML = arr2[index2];

    // 从一个贵族等级数组中随机选择一个值，并设置到'guizhu'元素中
    let arr3 = ["V1","V2", "V3", "V4", "V5", "V6", "V7", "V8", "V9", "V10"];
    let index3 = Math.floor(Math.random() * arr3.length);
    guizhu.innerHTML = arr3[index3];

    // 从一个金币数量数组中随机选择一个值，并设置到'gold'元素中
    let arr4 = ["1532", "1678", "1900", "2000", "2100", "2200","2300", "2400", "2500", "2600"];
    let index4 = Math.floor(Math.random() * arr4.length);
    gold.innerHTML = arr4[index4];

    // 当点击'koukuan'元素时，将'gold'元素中的数值增加 6480，并显示'chengong'和'del'元素，1 秒后隐藏'chengong'元素
    koukuan.addEventListener("click", function () {
        gold.innerHTML = parseInt(gold.innerHTML) + 6480;
        chengong.style.display = "block";
        del.style.display = "block";
        setTimeout(function () {
            chengong.style.display = "none";
        }, 1000)
    })
</script>
</html>

这段代码主要实现了以下功能：

页面结构方面：通过<div>元素构建了三个主要的区域box1、box2和box3，每个区域包含不同的元素，如图片、视频、文本等。
交互逻辑方面：
- 为setUp、email、tuichu1和tuichu2元素添加了点击事件，实现了点击显示或隐藏相应区域的效果。
- 为koukuan元素添加点击事件，实现了点击增加gold元素数值并显示和隐藏特定元素的效果。
- 随机生成并设置了name、zhanli、dengji、guizhu和gold元素的显示内容。