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

文章目录

  • 前言
  • 一、静态页面的构建
  • 二、JS动态操作
    • 1.创造对象
    • 2.用画布画出全部的内容
    • 3.碰撞检测
  • 总结

成果展示

前言

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

一、静态页面的构建

首先让我们建出一个这么页面,相信对于学过css的同学来说都是小菜一碟吧。
超好玩的前端小项目(简单易做)_第1张图片
这里我说两点,第一,这里的查看规则是可以点开的。所以我们在这里需要用一个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;
}

超好玩的前端小项目(简单易做)_第2张图片
第二,中间这个白色盒子并不是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再走吧。
超好玩的前端小项目(简单易做)_第3张图片

你可能感兴趣的:(web前端开发,前端,css3,css,html,javascript)