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

2022年05月10日 阅读数:5
这篇文章主要向大家介绍超好玩的前端小项目(简单易作),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

成果展现
在这里插入图片描述javascript

前言

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

1、静态页面的构建

首先让咱们建出一个这么页面,相信对于学过css的同窗来讲都是小菜一碟吧。
在这里插入图片描述
这里我说两点,第一,这里的查看规则是能够点开的。因此咱们在这里须要用一个div设置为absolute定位,而且再用一个transform: translateX()样式给内隐藏。有的同窗就要问了,这个样式能够隐藏东西吗?实际上是能够的,咱们只要把宽度设为负数就能够了。而后咱们在后边js点击查看规则按钮时,往div插入一个css样式,transform: translateX(0),就能够显示出来了。html

.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">Close</button>
    </div>

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

2、JS动态操做

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

1.创造对象

首先让咱们来创造小球,小球对象须要坐标,半径和x,y轴上的加速度,还有一个visible记录小球状态。(这个状态是判断小球要不要画出来)git

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

挡板对象,一样须要坐标还有x轴的加速度speed,w,h是挡板的宽高github

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

最后比较麻烦的是砖块的对象,咱们砖块须要形成一面墙,因此咱们须要用一个二维数组存对象。这里面两个循环是有技巧的,咱们是沿着x轴创建的,这里的x轴说的是二维数组里面的x轴,也就是往下建砖块,因此咱们能够写成下面这样。web

// 定义一个砖块对象
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是否为真,若是不为真则不建立砖块,为否的状况就是砖块已经和小球发生碰撞消失了。canvas

// 画一个球
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再走吧。
在这里插入图片描述