在使用 JS 编译的 Kotlin 编程时，尝试在 canvas 元素上移动圆圈时遇到问题

Question

我正在构建一个非常简单的基于 Web 的 'breakout'，当我试图让球在 canvas 元素上移动时我遇到了运行麻烦。我已经开始玩游戏并且运行宁 javascript。事情是，我现在正试图将它移植到 Kotlin（javascript 已编译）。即使在我认为必要的调整之后，球也不会移动。

我在类型方面也有问题（这就是为什么你会看到那些“*1.0”到处都是），因为我无法从 int 转换为 double，但我不会说这就是问题所在这里。另外， IDE 显示了我不熟悉的评论。我在有关错误消息的部分谈到了这一点，但消息如下："Wrapped into a reference object to be modified when captured in a closure".

我不确定问题到底出在哪里，但到目前为止我已经尝试过： -我的 'setInterval' 电话的其他签名 -重新格式化程序，使我的代码在 main() 中，以摆脱 return 和 'val canvas = initializeCanvas()' 调用。

import org.w3c.dom.*
import kotlin.browser.*
import kotlin.math.*


val canvas = initializeCanvas()
fun initializeCanvas(): HTMLCanvasElement {
    val canvas = document.createElement("canvas") as HTMLCanvasElement
    val ctx = canvas.getContext("2d") as CanvasRenderingContext2D
    ctx.canvas.width = 480
    ctx.canvas.height = 320
    document.body!!.appendChild(canvas)
    var x = canvas.width/2
    var y = canvas.height-30
    val dx = 2
    val dy = -2
    fun drawBall(){
        ctx.beginPath()
        ctx.arc(x*1.0, y*1.0, 10.0, 0.0, PI*2)
        ctx.fillStyle = "#000000"
        ctx.fill()
        ctx.closePath()
    }
    fun draw(){
        ctx.clearRect(0.0, 0.0, canvas.width*1.0, canvas.height*1.0)
        drawBall()
        x += dx
        y += dy
    }
    window.setInterval(draw(),10)
    return canvas
}

预期的输出是球向 canvas 的右上角移动，然后消失在墙上，因为我还没有实现碰撞。

如我所说，当前输出是一个静态球。

至于错误信息，有none。但是 "IDE Note" 一直困扰着我。在我提供的代码中，在 draw 函数中，我增加了 x 和 y。当我将鼠标悬停在它们上面时，intellij 说它们是 "Wrapped into a reference object to be modified when captured in a closure"。我以前从未见过这样的警告，网络搜索也没有结果。

Answer 1

Wrapped into a reference object to be modified when captured in a closure

这仅意味着您必须将要执行的方法 - draw - 包装在一个闭包中。没有它只会调用一次。

所以简单地改变

window.setInterval(draw(), 10)

至

window.setInterval( { draw() }, 10)

在使用 JS 编译的 Kotlin 编程时，尝试在 canvas 元素上移动圆圈时遇到问题

Having trouble trying to make an circle move on a canvas element, while programming with JS compiled Kotlin

javascript

canvas

web

kotlin

kotlin-js