mercredi 26 juin 2019

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

I am building a very simple web-based 'breakout', and I have run into trouble when trying to make the ball move on the canvas element. I do have the game up and running in javascript. Thing is, I am now trying to port it to Kotlin(javascript compiled). Even after doing the adaptations I think were necessary, the ball won't move.

I am also having trouble with types(thats why you will see those "*1.0" lying around), since I've not been able to convert from int to double, but I wouldn't say that's the issue here. Also, the IDE is showing a remark I am not familiar with. I talk about that on the section about error messages, but the message is as follows: "Wrapped into a reference object to be modified when captured in a closure".

I am not sure where exactly the problem lies, but so far I have tried: -Other signatures for my 'setInterval' call -Reformating the program so that my code is within main(), as to get rid of the return and 'val canvas = initializeCanvas()' call.

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
}

The expected output would be that of the ball moving towards the top-right of the canvas, and then vanishing into the wall, since I have not yet implemented collisions.

The current output, as I stated, is of a static ball.

As for error messages, there are none. But an "IDE Note" has been bothering me. on the code I provided, inside the draw function, I increment x and y. When I hover over them, intellij says that they are "Wrapped into a reference object to be modified when captured in a closure". I have never seen such warning before and a web search has not been fruitful.




Aucun commentaire:

Enregistrer un commentaire