demo练习

最新推荐文章于 2024-08-22 15:17:20 发布

jiepp

最新推荐文章于 2024-08-22 15:17:20 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

文章标签： JS游戏

本文链接：https://blog.youkuaiyun.com/jiepp/article/details/101152608

本文分享了一个使用HTML5、CSS和JavaScript开发的小型游戏演示，展示了动态网页元素的创建、事件监听、定时器等功能，实现了一个简单的方块下落游戏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo练习

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {font-size: 100px}
        body {overflow: hidden;font-size: 16px}
        .d {transition: all 5s;width: 1rem;height: 1rem;box-sizing: border-box;font-size: 0.5rem;text-align: center;color: white;position: absolute;line-height: 0.8rem}
        #bt {cursor: pointer;transition: all 0.5s;font-size: 0.3rem;color: white;position: absolute;bottom: 0.05rem;left: 67%;outline: 0;width: 3rem;height: 0.5rem;background-color: deeppink;border-radius: 0.5rem}
        #bt:hover {background-color: yellow;color: red;transform: scale(1.2)}
        #i {border: 0;position: absolute;left: 35%;width: 4rem;bottom: 0.05rem;height: 0.5rem;font-size: 0.5rem;text-align: center;outline: 0.05rem solid blue;color: white;background-color: deepskyblue}
        #d {transition: all 0.5s;width: 4rem;height: 0.5rem;background-color: saddlebrown;position: absolute;left: 35%;bottom: 0.7rem}
        #d1 {display: none;width: 0.2rem;background-color: gold;bottom: 0px;position: absolute}
    </style>
</head>
<body>
<input type="text" id="i">
<button id="bt">重新开始</button>
<div id="d"></div>
<script>
    var str;
    var num = 0;
    var timer;
    var obt = document.querySelector("#bt");
    var oi = document.querySelector("#i");
    var od1 = document.querySelector("#d");
    oi.addEventListener("input", runn1);
    // 对输入的内容进行判断/优化
    function runn1() {
        var ov = oi.value;
        if (oi.value.trim() != "") {
            setTimeout(() => {
                oi.value = ""
            }, 100);
        }
        var odd = document.querySelectorAll(".d");
        // 跳板接收方块
        for (var i = 0; i < odd.length; i++) {
            if (odd[i].innerText == ov.toUpperCase()) {
                od1.style.left = odd[i].offsetLeft - (od1.offsetWidth - odd[i].offsetWidth) / 2 + "px";
                odd[i].remove();
            }
        }
        num--;
    }
    obt.addEventListener("click", run);
    // 实现消除方块
    function run() {
        num = 0;
        runing();
        var odd = document.querySelectorAll(".d");
        for (var i = 0; i < odd.length; i++) {
            odd[i].remove();
        }
    }
    runing();
    function runing() {
        timer = setInterval(crdiv, 1000);
    }
    // 游戏逻辑实现
    function crdiv() {
        num++;
        var od = document.createElement("div");
        document.body.appendChild(od);
        od.className = "d";
        crcolor();
        var str = str;
        od.style.backgroundColor = str;
        crcolor();
        var str1 = str;
        od.style.border = "5px solid " + str1;
        od.innerText = String.fromCharCode(parseInt(Math.random() * 25) + 65)
        var ovx = parseInt(Math.random() * (document.documentElement.clientWidth - od.offsetWidth)) / 100;
        var ovy = -parseInt(Math.random() * document.documentElement.clientHeight / 8) / 100;
        od.style.left = ovx + "rem";
        od.style.top = ovy + "rem";
        function crcolor() {
            var r = Math.random() * 256;
            var g = Math.random() * 256;
            var b = Math.random() * 256;
            str = "rgba(" + parseInt(r) + "," + parseInt(g) + "," + parseInt(b) + ",1)";
            return str;
        }
        if (num > 20) {
            clearInterval(timer);
        }
        runn(od);
        if (num > 10) {
            alert("你输了！！！");
            clearInterval(timer);
            var odd = document.querySelectorAll(".d");
            for (var i = 0; i < odd.length; i++) {
                odd[i].remove();
            }
        }
    }
    function runn(obj) {
        obj.style.top = (document.documentElement.clientHeight) / 100 + "rem";
    }
    screen();
     // 实现响应式
    function screen() {
        window.addEventListener("resize", run);
        function run() {
            var scale = document.documentElement.clientWidth / 1366;
            document.documentElement.style.fontSize = 100 * scale + "px";
        }
    }
</script>
</body>
</html>

整理笔记时发现自己做的小demo,传上来了，么么哒！