startUp04

startUp04

<font color="red">
<input type="button" value="Up" onclick="clickBtnUp()"/> <br>
size: <div id="div01"> </div>
<input type="button" value="Down" onclick="clickBtnDw()"> <font> <br>
<canvas width="550" height="550" id="startUp02" style="background-color:rgba(255, 255, 255, 1.0);"> </canvas>

<script>
var doc01= document.getElementById("div01")
var canvas = document.getElementById('startUp02');
var context = canvas.getContext('2d');
var x = 20;
var y = 20;
var size = 5;
var vect_x = 1;
var vect_y = 1;
var vx, vy;
var vg;
const center_x = canvas.width/2;
const center_y = canvas.height/2;

var rightPressed = false;
var leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
         rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}
function keyUpHandler(e) { if(e.key == "Right" || e.key == "ArrowRight") {
    rightPressed = false;
    }
else if(e.key == "Left" || e.key == "ArrowLeft") {
    leftPressed = false;
    }
}

function clickBtnUp(){
    size += 5;
    doc01.innerHTML = size;
}

function clickBtnDw(){
    if(size > 5){
        size -= 5;
    }
    doc01.innerHTML = size;
}

function draw(){
    context.globalCompositeOperation = "source-over";
    context.fillStyle = "black";
    context.globalAlpha = 1.0;
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.beginPath();
    context.globalCompositeOperation = "lighter";
    context.fillStyle = "white";
    context.globalAlpha = 0.5;
    context.arc(x, y, size, 0, Math.PI*2, false);
    context.arc(center_x, center_y, 2, 0, Math.PI*2, false);
    context.fill();

    vg = Math.pow(center_x - x, 2) + Math.pow(center_y - y, 2);
    vg = 1 / vg;
    vx = (center_x - x) * vg*100;
    vy = (center_y - y) * vg*100;
    vect_x += vx;
    vect_y += vy;

    x += vect_x;
    y += vect_y;
    vect_y=vect_y + 0.25;

    if(x < 0 + size){
        x = size; 
        vect_x *= -1;
        if(vect_x>50)vect_x=50;
    }
    if(x > canvas.width - size){
        x = canvas.width - size;
        vect_x *= -1;
        if(vect_x>50)vect_x=50;
    }
    if(y < 0 + size){
        y = size;
        vect_y = 0;
    }
    if(y > canvas.height - size){
        y = canvas.height-size;
        vect_y *= -1;
    }

    if(rightPressed && vect_x
        vect_x *= 1.125;
        vect_y *= 1.125;
    }
    if(leftPressed){
        vect_x /= 1.125;
        vect_y /= 1.125;
    }
    context.fillStyle = "red";
    context.font="20px sans-serif";
    context.fillText("x: "+x+" ", 20, 30, 500);
    context.fillText("y: "+y+" ", 20, 50, 500);
    context.fillText("vect_x: "+vect_x+" ",20, 70, 500);
    context.fillText("vect_y: "+vect_y+" ",20, 90, 500);
}
setInterval(draw,32);
</script>

Ende;