JavaScript-灯泡小游戏

最新推荐文章于 2022-12-12 20:04:44 发布

Felece

最新推荐文章于 2022-12-12 20:04:44 发布

阅读量441

点赞数 1

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_51651340/article/details/124825295

版权

本文介绍如何利用JavaScript、CSS和HTML创建一个简单的灯泡开关小游戏。通过JavaScript控制灯泡的亮灭状态，结合CSS实现灯泡的样式，HTML构建游戏页面结构，让用户通过点击按钮来操作灯泡。通过这个小游戏，可以深入理解JavaScript的事件处理和DOM操作。

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

 <title>关灯小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .wrap {
            width: 500px;
            height: 500px;
            box-shadow: 0 0 3px #333;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }

        .wrap div {
            width: 90px;
            height: 90px;
            margin: 2px;
            background-image: url(dpm.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .wrap .open {
            background-image: url(dpl.png);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>