使用konvajs三步实现一个小球游戏

记得以前玩过一个很简单的小游戏，一个球在动，然后底下一个板来接，如果没接住撞到底边游戏就结束了，虽然忘了它叫什么名字，但一直心心念念，魂牵梦萦，刚好最近临过年需求不饱和、刚好之前一直想做但是没动手，刚好这两天在学习konvajs，刚好就有了这篇小文章，很简单，只要三步，包你三分钟学会。

konvajs简介

konvajs就像jquery之于DOM、Snap.svg之与svg一样之于canvas，可以方便的实现canvas的图形交互效果，使用它，你可以快速绘制常用图形，并能方便的给它添加样式、各种事件、动画效果等等，妈妈再也不用担心我自己来检测鼠标位置了。文档：https://konvajs.org/。

使用konvajs基本上也分为三步，第一步是创建一个"舞台"：

import { Stage } from 'konva'
const stage = new Stage({
    container: 'container',// 容器元素的id
    width: 500,
    height: 500
})

第二步是创建一个“图层”，添加到“舞台”里：

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

一个layer对应着一个canvas元素。

第三步就是创建各种图形添加到“图层里”。

第一步

来一个小球和挡板。

直接复制官方文档上的圆和矩形的示例代码，小球：

import { Circle } from 'konva'
createCircle () {
    // 小球的中心坐标
    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()// 重新绘制，每次修改后都需要调用该方法
}

挡板：

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,// 允许拖动
        dragBoundFunc: function (pos) {// 控制只能水平拖动
            return {
                x: pos.x,
                y: this.absolutePosition().y// 获取y的绝对位置
            }
        }
    })
    this.layer.add(this.rect)
    this.layer.draw()
}

第二步

让球动起来，给球一个初始速度，一个加速度，撞墙后速度反向，速度逐渐加快，用来增加游戏难度：

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

runCircle () {
    // 修改小球位置
    this.centerX += this.speedX
    this.centerY += this.speedY
    this.circle.x(this.centerX)
    this.circle.y(this.centerY)
    // 撞墙检测
    if (this.centerX - this.radius <= 0 || this.centerX + this.radius >= this.width) {// 左侧和右侧的墙
        this.speedX = -this.speedX// 水平速度反向
    }
    if (this.centerY - this.radius <= 0) {// 只判断顶部的墙，底部的墙用来结束游戏
        this.speedY = -this.speedY
    }
    // 撞板检测，第三步再说
    this.collisionCheck()
    // 游戏结束检测
    if (this.centerY + this.radius >= this.height) {// 撞到底部的墙游戏就结束了
        return this.gameOver()
    }
    // 加速度
    // 还没达到最大速度则增加速度
    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
    }
}

然后使用requestAnimationFrame来不断刷新：

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

第三步

检测小球和挡板的是否碰撞，撞到了则速度反向，原理是找到矩形四周离小球的圆心最近的点，然后判断这个点和小球圆心的距离是否小于小球半径，这个点怎么确定也很简单，如果圆心在矩形的左侧，那么这个点一定在矩形的左侧边上，点x的值也就是rect.x，如果在矩形的右侧，点x的值一定在矩形的右侧边上，也就是rect.x + rect.width，如果在矩形之间的话，因为最近的点和圆心的连线肯定是重置于矩形的边，所以点x的值就是圆心的x，点y的计算和x一样。

collisionCheck () {![](/img/bVcTPDu)
    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()
    // 确定矩形上离小球最近的点的x坐标
    if (this.centerX < rectX) {// 在矩形左侧
        minx = rectX
    } else if (this.centerX > rectX + rectWidth) {// 在矩形右侧
        minx = rectX + rectWidth
    } else {// 在矩形左右之间
        minx = this.centerX
    }
    // 确定矩形上离小球最近的点的y坐标
    if (this.centerY < rectY) {// 在矩形上面
        miny = rectY
    } else if (this.centerY > rectY + rectHeight) {// 在矩形下面
        miny = rectY + rectHeight
    } else {// 在矩形上下之间
        miny = this.centerY
    }
    // 如果距离小于半径则代表发生了碰撞
    if (this.getTwoPointDistance(minx, miny, this.centerX, this.centerY) <= this.radius) {
        // 撞到了左侧或右侧，那么水平速度x反向
        if (minx === rectX || minx === rectX + rectWidth) {
            this.speedX = -this.speedX
        }
        // 撞到了矩形上面则垂直速度y反向
        if (miny === rectY) {
            this.speedY = -this.speedY
        }
    }
}

到这里就结束了，可以愉快的开玩了：

示例代码：https://github.com/wanglin2/BallGame。