Alternative zu clearRect() ??

Werbeanzeige

UndercoverKEKS

Frischling

Beiträge: 7

01.05.2020, 14:34

Alternative zu clearRect() ??

Serwus liebe Community!
Mit dem folgenden Code plane ich ein Game (nichts Besonderes). I werde die JS-Datei unten einfügen. Wär cool, wenn da mal jemand drüberschauen könnte. Durch das clearRect() in der Funktion drawBall() kann ich logischerweise das Image, welche ich in der Funktion brick() lade, nicht sehen. Ich bitte um Hilfe! Gibt es vielleicht sogar Alternativen zu clearRect() ?? Hoffe,dass meine Fragestellung verständlich genug ist, zumal die Übersicht im Code durch die Kommentare gewärleistet sein sollte.
Danke, mfg UndercoverKEKS

Quellcode

var canvas = document.getElementById("gameScreen");
var context = canvas.getContext("2d");
var imgBrick = document.getElementById('img_brick');

canvas.width = 1020;
canvas.height = 700;

this.width = 200;
this.height = 20;
this.position = {
x: canvas.width/2 - this.width/2,
y: canvas.height - this.height - 10,
};
this.maxSpeed = 10;
this.speed = 0;

function gameLoop() {
animate();
update();
drawBALL();
changeBALL();
requestAnimationFrame(gameLoop);
}

/** paddleMOVE ********************************************************************/


function animate() {

requestAnimationFrame(animate);
context.clearRect(0, 650, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect( this.position.x, this.position.y, this.width, this.height );

}

function update() {

this.position.x += this.speed;
if (this.position.x < 0) {this.position.x = 0}
if (this.position.x > canvas.width - this.width) {this.position.x = canvas.width - this.width}

}

gameLoop();

/** paddleSTEER **************************************************************************/

function moveLeft() {
this.speed = -this.maxSpeed;
}

function moveRight() {
this.speed = this.maxSpeed;
}

function stopp() {
this.speed = 0;
}

document.addEventListener("keydown", event => {

if (event.isComposing || event.keyCode === 37) {

moveLeft();

}

if (event.isComposing || event.keyCode === 39) {

moveRight();

}});

document.addEventListener("keyup", event => {

if (event.isComposing || event.keyCode === 37) {

if(this.speed < 0) {stopp();}

}

if (event.isComposing || event.keyCode === 39) {

if(this.speed > 0) {stopp();}

}});


/** ball & rectangle cooperation ************************************************************************************************/

var x = 200;
var y = 200;
var vx = 8;
var vy = 8;

var radius = 20;



function drawBALL() {

x += vx;
y += vy;

[b]context.clearRect(0, 0, canvas.width, 650);[/b] /*durch dieses clearRect ist das Image, das ich in der Funktion brick() lade, nicht sichtbar..was tun?**/
context.fillStyle = "#FF0080";
context.beginPath();
context.arc(x, y, radius, 0, Math.PI*2, true);
context.closePath();
context.fill();

}


function changeBALL() {

var bottomofBALL = y + radius;
var topofRECT = this.position.y;

var leftRECT = this.position.x;
var rightRECT = this.position.x + this.width;


if ((x + radius) >= canvas.width) {vx = -vx}
if ((x - radius) <= 0) {vx = -vx}
if ((y - radius) <= 0) {vy = -vy}



if (( bottomofBALL >= topofRECT) && (x >= leftRECT) && (x <= rightRECT)){vy = -vy}

if ( y > canvas.height) {vy = 50}
}


/** Image ************************************************************************************************/

[b]function brick() {

imgBrick.onload = function() {
context.drawImage(imgBrick, 10, 10, 100, 100)
}
}[/b]

brick();