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

文章目录

成果展示

前言

刚刚学完前端三件套，做一个小项目来试验一下成果，这个项目适合新手入门，非常容易，而且很有意思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><buttonclass="btn rule-btn"id="rules-btn">查看规则</button><divclass="show_rule"><h2>规则</h2><p>
        用你的右键和左键移动球拍，使球反弹和打破砖块。
      </p><p>如果你漏了球，你的得分和砖块将被重置。</p><buttonclass="btn"id="close-btn">Close</button></div><canvasid="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是否为真，如果不为真则不创建砖块，为否的情况就是砖块已经和小球发生碰撞消失了。

// 画一个球functiondrawBall(){
    ctx.beginPath();
    ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2);
    ctx.fillStyle = ball.visible ?'#0095dd':'transparent';
    ctx.fill();
    ctx.closePath();}// 画一个板子functiondrawPaddle(){
    ctx.beginPath();
    ctx.rect(paddle.x,paddle.y,paddle.w,paddle.h);
    ctx.fillStyle = paddle.visible ?'#0095dd':'transparent';
    ctx.fill();
    ctx.closePath();}// 画砖墙functiondrawBricks(){// 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 ++ 就可以了。

// 球的运动functionmoveBall(){
    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函数一直递归就可以了。

// 启动总函数functionupdate(){moveBall();movePaddle();draw();requestAnimationFrame(update);//递归调用，重置动画}update();

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

总结

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