I remember playing a very simple game before , A ball is moving , Then the bottom board comes to pick up , If you don't catch it and hit the bottom, the game is over , Although I forgot its name , But always thinking , I'm in a dream , It happens that the demand is not saturated in the recent new year 、 I wanted to do it just before, but I didn't do it , I happen to be studying these two days konvajs, Just have this little article , It's simple , Just three steps , It takes you three minutes to learn .

konvajs brief introduction

konvajs It's like jquery To DOM、Snap.svg And svg Same to canvas, Easy to implement canvas Graphical interaction effects , Use it , You can quickly draw common graphics , And can easily add style to it 、 Events 、 Animation effects and so on , Mom doesn't have to worry about checking the mouse position by myself anymore . file ：https://konvajs.org/.

Use konvajs Basically, there are three steps , The first step is to create a " stage "：

import { Stage } from 'konva'
const stage = new Stage({
    container: 'container',//  Container element id
    width: 500,
    height: 500
})

The second step is to create a “ Layers ”, Add to “ stage ” in ：

import { Layer } from 'konva'
const layer = new Layer()
stage.add(layer)

One layer Corresponding to a canvas Elements .

The third step is to create various graphics and add them to “ Layer ”.

First step

A small ball and a baffle .

Directly copy the sample code of circles and rectangles on the official documents , Pellet ：

import { Circle } from 'konva'
createCircle () {
    //  Center coordinates of the ball 
    this.centerX = this.stage.width() / 2
    this.centerY = 100
    this.circle = new Circle({
        x: this.centerX,
        y: this.centerY,
        radius: this.radius,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
    })
    this.layer.add(this.circle)
    this.layer.draw()//  Redraw , This method needs to be called after each modification 
}

Baffles ：

import { Rect } from 'konva'
createRect () {
    this.rect = new Rect({
        x: (this.stage.width() - 100) / 2,
        y: this.height - 50,
        width: 100,
        height: 10,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,//  Allow drag 
        dragBoundFunc: function (pos) {//  The control can only be dragged horizontally 
            return {
                x: pos.x,
                y: this.absolutePosition().y//  obtain y Absolute position of 
            }
        }
    })
    this.layer.add(this.rect)
    this.layer.draw()
}

The second step

Let the ball move , Give the ball an initial velocity , An acceleration , After hitting the wall, the speed is reversed , The speed is increasing , Used to increase the difficulty of the game ：

this.speedX = Math.random() * 3
this.speedY = Math.random() * 3
this.speedStep = 0.01

runCircle () {
    //  Modify the position of the ball 
    this.centerX += this.speedX
    this.centerY += this.speedY
    this.circle.x(this.centerX)
    this.circle.y(this.centerY)
    //  Wall impact detection 
    if (this.centerX - this.radius <= 0 || this.centerX + this.radius >= this.width) {//  The walls on the left and right 
        this.speedX = -this.speedX//  Horizontal speed reverse 
    }
    if (this.centerY - this.radius <= 0) {//  Judge only the top wall , The bottom wall is used to end the game 
        this.speedY = -this.speedY
    }
    //  Collision detection , The third step is 
    this.collisionCheck()
    //  End of game detection 
    if (this.centerY + this.radius >= this.height) {//  Hit the bottom wall and the game is over 
        return this.gameOver()
    }
    //  The acceleration 
    //  If the maximum speed is not reached, increase the speed 
    if (Math.abs(this.speedX) < this.maxSpeed) {
        this.speedX > 0 ? this.speedX += this.speedStep : this.speedX -= this.speedStep
    }
    if (Math.abs(this.speedY) < this.maxSpeed) {
        this.speedY > 0 ? this.speedY += this.speedStep : this.speedY -= this.speedStep
    }
}

And then use requestAnimationFrame To constantly refresh ：

update () {
    window.requestAnimationFrame(() => {
        this.runCircle()
        this.update()
        this.layer.draw()
    })
}

The third step

Check whether the ball collides with the baffle , If you hit it, the speed is reversed , The principle is to find the nearest point around the rectangle to the center of the ball , Then judge whether the distance between this point and the center of the small ball is less than the radius of the small ball , How to determine this point is also very simple , If the center of the circle is to the left of the rectangle , Then this point must be on the left side of the rectangle , spot x The value of rect.x, If it's on the right side of the rectangle , spot x The value of must be on the right side of the rectangle , That is to say rect.x + rect.width, If it's between rectangles , Because the line between the nearest point and the center of the circle must be reset to the edge of the rectangle , So point x The value of is the center of the circle x, spot y And x equally .

collisionCheck () {![](https://img-blog.csdnimg.cn/20210802080414728.png)
    let minx = 0
    let miny = 0
    let rectX = this.rect.x()
    let rectY = this.rect.y()
    let rectWidth = this.rect.width()
    let rectHeight = this.rect.height()
    //  Determines the position of the point on the rectangle closest to the ball x coordinate 
    if (this.centerX < rectX) {//  To the left of the rectangle 
        minx = rectX
    } else if (this.centerX > rectX + rectWidth) {//  To the right of the rectangle 
        minx = rectX + rectWidth
    } else {//  Between the left and right of the rectangle 
        minx = this.centerX
    }
    //  Determines the position of the point on the rectangle closest to the ball y coordinate 
    if (this.centerY < rectY) {//  Above the rectangle 
        miny = rectY
    } else if (this.centerY > rectY + rectHeight) {//  Under the rectangle 
        miny = rectY + rectHeight
    } else {//  Between the top and bottom of the rectangle 
        miny = this.centerY
    }
    //  If the distance is less than the radius, there is a collision 
    if (this.getTwoPointDistance(minx, miny, this.centerX, this.centerY) <= this.radius) {
        //  Hit the left or right , So horizontal velocity x reverse 
        if (minx === rectX || minx === rectX + rectWidth) {
            this.speedX = -this.speedX
        }
        //  Hit the top of the rectangle and the vertical speed y reverse 
        if (miny === rectY) {
            this.speedY = -this.speedY
        }
    }
}

It's over here , You can have fun ：

Sample code ：https://github.com/wanglin2/BallGame.