breakout_game--js练手demo(html和css)

最新推荐文章于 2022-02-23 08:37:36 发布

大一小菜鸡

最新推荐文章于 2022-02-23 08:37:36 发布

阅读量674

点赞数 1

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.csdn.net/qq_45786716/article/details/111307892

博主为巩固JavaScript的dom、bom操作知识，通过写简单demo练手。介绍了找项目练手的渠道，建议从简单组件或h5游戏入手，看懂源码并写注释。还提及网页布局重要性，推荐用flex布局，强调组件和公共样式思想对CSS的好处。

前言

我最近在学习JavaScript的dom,bom操作,但是感觉就只是了解了,也没有好好运用,感觉自己记亿性不好,估计过几天可能就忘了,所以在学习过程中,写一些demo练手.
所以就出个简单demo练手,不仅我可以复盘,也可以教新手学习JavaScript.

过程

事先说明:我自身很菜,所以项目是在github上找的
就简单讲讲我是如果找项目练手的

其实项目的渠道有很多例如:B站会有视频手把手教你,知乎会告诉你高星的GitHub项目,或者直接在GitHub上撸下来
找到项目先看看,项目大致的情况,刚开始学习我觉得不适合写那种大型的项目,应该写那种简单组件或者一些h5的游戏
不要一开始就去看源码,你可以先看看别人的布局,设计,先玩玩别人的项目,有没有头绪去写.
看源码,这里就一定要看懂源码,建议html和css一起看,有一点点不懂都要去查
有自己理解的去写.一定要写注释(越来越多是最好的),可以提醒自己思路

项目

布局

在一个网页布局是比较重要的,布局好,处理js和css会相对方便一些

注:左边有一个按钮

这个项目布局相对会很容易看出!!
所以代码也不会特别复杂!

HTML代码

 <h1>Breakout!</h1>
        <div id="rules-btn" class="btn rules-btn" type="button">show rules</div>
        <div id="rules" class="rules">
            <h2>Rules:</h2>
            <p>
                Use your right and left keys to move the paddle to bounce the ball up and break the
                blocks.
            </p>
            <p>If you miss the ball, your score and the blocks will reset.</p>
            <button id="close_btn" class="btn">close</button>
        </div>

        <canvas id="canvas" width="800" height="600"></canvas>
        <!-- <div class="king">
          <h2>You are King!!</h2>
          <div type="button" class="btn">重新开始</div>
        </div> -->

CSS

我觉得这个没有什么好讲的!!边看代码,边讲!
在这里插入图片描述
flex是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

在页面上的布局:

在不同方向排列元素
重新排列元素的显示顺序
更改元素的对齐方式
动态地将元素装入容器

以前是用float或者position,这些都有一些缺点,例如高度塌陷,在不同尺寸下就会乱,这样的.而flex刚好就避免了这些问题,它也可以解决垂直居中这个大问题.
以后用flex去布局会方便许多!
在这里插入图片描述
这几个选择器能够减少js的操作,交互性更强,如果用的好,按钮那就很好看了.(一些常用的选择器很重要)
~~感觉css没有什么可以介绍的了~~ css就是为了页面变得美观,你觉得怎样好看就怎么来!!

css代码

* {
    box-sizing: border-box;
    user-select: none;
}
/* 利用了弹性盒子去进行布局 */
body {
    background-color: rgb(0, 149, 211);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0;
}
h1 {
    color: #fff;
    font-size: bold;
    text-align: center;
    margin: 20px 0;
    font-size: 45px;
}
/* 画布的样式 */
canvas {
    background: #f0f0f0;
    display: block;
    border-radius: 5px;
}

.btn {
    cursor: pointer;
    padding: 10px 20px;
    color: #fff;
    border-radius: 5px;
    background-color: black;
    outline: none;
    border: none;
}
.btn:focus {
    outline: none;
}
.btn:hover {
    background-color: #222;
}
.btn:active {
    transform: scale(0.99);
}

.rules-btn {
    position: absolute;
    top: 30px;
    left: 30px;
}
.rules {
    width: 400px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(51, 51, 51);
    height: 100%;
    padding: 20px;
    line-height: 1.5;
    transform: translateX(-400px);
    transition: transform 1s ease-in-out;
}
.rules.show {
    transform: translateX(0px);
}
/* .king{
    width: 300px;
    height:200px;
    position: absolute;
    background: black;
    opacity: 0.7;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    border-radius: 5px;
} */