超好玩的前端小项目(简单易做)

成果展示

前言

刚刚学完前端三件套，做一个小项目来试验一下成果，这个项目适合新手入门，非常容易，而且很有意思hhh。先在这里说了，需要的前置知识是基础的html和css还有js，这里面用到了canvas画布的功能，很多动画都是在画布上完成的，如果不懂的话，先去学一下在来吧。

一、静态页面的构建

首先让我们建出一个这么页面，相信对于学过css的同学来说都是小菜一碟吧。

这里我说两点，第一，这里的查看规则是可以点开的。所以我们在这里需要用一个div设置为absolute定位，并且再用一个transform: translateX()样式给内隐藏。有的同学就要问了，这个样式可以隐藏东西吗？其实是可以的，我们只要把宽度设为负数就可以了。然后我们在后边js点击查看规则按钮时，往div插入一个css样式，transform: translateX(0)，就可以显示出来了。

.show_rule{
    position: absolute;
    left: 0;
    top: 0;
    /* 设置定位 */
    background: #333;
    color: #fff;
    width: 400px;
    min-height: 100vh;
    line-height: 1.5;
    padding: 20px;

    /* 动画效果 */
    transform: translateX(-400px); 
    transition: transform 1s ease-in-out;
}

第二，中间这个白色盒子并不是div，而是canvas样式，是一个画布。 下面是整体的html标签结构

  <h1>Breakout!h1>
    <button class="btn rule-btn"  id="rules-btn">查看规则button>
    <div class="show_rule">
        <h2>规则h2>
      <p>
        用你的右键和左键移动球拍，使球反弹和打破砖块。
      p>
      <p>如果你漏了球，你的得分和砖块将被重置。p>
      <button class="btn" id="close-btn">Closebutton>
    div>

    <canvas id="canvas" width="800" height="600">canvas>

二、JS动态操作

首先在这里我们把JS操作分为两大步，第一就是建造对象，从图里面看，我们需要建造三个东西，一个小球，一块板子和砖块。 第二就是碰撞检测了，小球碰到墙壁，砖块和挡板都会反弹。(博主水平有限，写出来的检测判定可能会有点问题)

1.创造对象

首先让我们来创造小球，小球对象需要坐标，半径和x，y轴上的加速度，还有一个visible记录小球状态。（这个状态是判断小球要不要画出来）

// 定义一个对象小球
var ball = {
    x : canvas.width / 2,
    y : canvas.height / 2,
    r : 10,
    xspeed:3,
    yspeed:-3,
    speed:3,
    visible:true
};

挡板对象，同样需要坐标还有x轴的加速度speed，w，h是挡板的宽高

var paddle = {
    x : canvas.width / 2 - 40,
    y : canvas.height - 20,
    w : 80,
    h : 10,
    speed: 8,
    dx : 0,
    visible: true
};

最后比较麻烦的是砖块的对象，我们砖块需要造成一面墙，所以我们需要用一个二维数组存对象。这里面两个循环是有技巧的，我们是沿着x轴建立的，这里的x轴说的是二维数组里面的x轴，也就是往下建砖块，所以我们可以写成下面这样。

// 定义一个砖块对象
var brick = {
    w : 70,
    h : 20,
    padding: 10,
    offsetx : 45,
    offsety : 60,
    visible : true
};

// 创造砖头
var bricks = [];
for (var i = 0 ; i < brickRowCount ; i ++ ){
    bricks[i] = [];
    for (var j = 0 ; j < brickColumnCount ; j ++ ){
        var x = i * (brick.w + brick.padding) + brick.offsetx;
        var y = j * (brick.h + brick.padding) + brick.offsety;
        bricks[i][j] = {x,y,...brick};
    }

2.用画布画出全部的内容

这里就是把上面创建的东西用画布画出来，这里就是canvas的使用了，不懂的话先去学习一下吧。在这里面，我们在创建砖块时，都要判断visible是否为真，如果不为真则不创建砖块，为否的情况就是砖块已经和小球发生碰撞消失了。

// 画一个球
function drawBall(){
    ctx.beginPath();
    ctx.arc(ball.x,ball.y,ball.r,0,Math.PI * 2);
    ctx.fillStyle = ball.visible ? '#0095dd' : 'transparent';
    ctx.fill();
    ctx.closePath();
}

// 画一个板子
function drawPaddle(){
    ctx.beginPath();
    ctx.rect(paddle.x,paddle.y,paddle.w,paddle.h);
    ctx.fillStyle = paddle.visible ? '#0095dd' : 'transparent';
    ctx.fill();
    ctx.closePath();
}

// 画砖墙
function drawBricks()
{
    // forEach() 方法对数组的每个元素执行一次提供的函数。
    bricks.forEach(col => {
        col.forEach(b => {
            console.log();
            ctx.beginPath();
            ctx.rect(b.x,b.y,b.w,b.h);
            ctx.fillStyle = b.visible ? '#0095dd' : 'transparent';
            ctx.fill();
            ctx.closePath();
        });
    });
}

3.碰撞检测

麻烦的就是碰撞检测这里了，我们来捋一下，小球会碰撞三个东西，墙壁，挡板，还有砖块，并且在撞击砖块的时候，砖块需要记录为visible=false。
那怎样才算碰撞呢，就拿撞击右边的墙壁来说，其实就是小球的 x坐标 + 半径r >= 墙壁的x坐标，那就是发生了碰撞了。所以我们就需要将小球的加速度取反就OK了。那撞到左边的墙壁就是 x坐标 - 半径r
<= 0 。所以其他碰撞也是一样的道理，大家只要顺着这个思路推下去就OK了。最后我们在弄一个记录得分的函数Score，每次撞击Score ++ 就可以了。

// 球的运动
function moveBall(){
    ball.x += ball.xspeed;
    ball.y += ball.yspeed;


    // 墙体碰撞
    if(ball.x + ball.r > canvas.width || ball.x - ball.r < 0) 
        ball.xspeed = -ball.xspeed;
    if(ball.y + ball.r > canvas.height || ball.y - ball.r < 0 ) 
        ball.yspeed = -ball.yspeed;

    // 球板碰撞
    if (
        ball.x - ball.r >= paddle.x - paddle.w &&
        ball.x + ball.r <= paddle.x + paddle.w &&
        ball.y + ball.r >= paddle.y
    ){
        ball.yspeed = -ball.speed;
    }

    // 砖块碰撞
    bricks.forEach(col =>{
        col.forEach(b =>{
            if(b.visible){
                if(
                    ball.x - ball.r > b.x && 
                    ball.x + ball.r < b.x + b.w && 
                    ball.y + ball.r > b.y && 
                    ball.y - ball.r < b.y + b.h 
                ){
                    ball.yspeed = -ball.yspeed;
                    b.visible = false;           //碰撞到就返回弹，并且把vis标记为false，令砖块消失

                    increaseScore();
                }
            }
        });
    });


    //撞击到地面，得分清空,并且砖块全部重置
    if (ball.y + ball.r > canvas.height) {
        showAllBricks();
        score = 0;
    }
}

动画调用函数使用，我们把所有的函数封装在一起，用一个update函数一直递归就可以了。

// 启动总函数
function update()
{
    moveBall();
    movePaddle();
    draw();

    requestAnimationFrame(update);             //递归调用，重置动画
}

update();

代码在GitHub仓库里面，这是地址

总结

如果觉得这个项目不错的话，给我的GitHub点个star再走吧。