HTML+CSS+JS实现一个无聊点方块游戏

最新推荐文章于 2023-05-09 16:07:22 发布

原创

最新推荐文章于 2023-05-09 16:07:22 发布 · 581 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #js #游戏

本文介绍了如何使用JavaScript、HTML和CSS实现一个简单的点击方块游戏。主要涉及添加元素、事件监听、CSS样式设置，包括默认样式和点击后的动画效果。虽然存在不同屏幕尺寸适配的问题，但作为一个练习JS的小项目，非常适合初学者。

来look look效果
在这里插入图片描述原作者是油管上的Online Tutorials，做了些改变。

现在就来实现它

1、准备知识
主要是js，添加元素节点、类名、样式，事件监听，css的配合使用。

2、HTML结构
只需要一个标签，来装方块，和展示图片，自己随意用section，div都可以

3、CSS样式
这里的主要工作是展示默认时（打开页面）的样子，span就是方块，它将铺满整个容器，盖住背景图。shusah

body {
   
   
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow: hidden;

    }
    /* 容器的样式 */
    .container {
   
   
        width: 100%;
        height: 100%;
        padding-left: 0%;
        box-sizing: border-box;
        background-image: url("./动漫1_r.jpg");
        background-size: cover;
        user-select: none;
    }
    /* 默认方块的样式 */
    span {
   
   
        display: inline-block;
        width: 9.7%<