Images anstatt Farben

[konzule]

Hey hey,
ich bräuchte bitte einen kleinen Rat.
Und zwar bin ich grade dabei ein kleines Tetris zu schreiben für die Schule.
Funktioniert alles wunderbar bis jetzt. Nur leider würde ich anstatt der langweiligen Farben ein paar gleich große Bilder einbinden. Vll könne mir wer nen kleinen Denk anstoß geben.
Ich habe hier mein Array mit Shapes und darunter die dazu gehörigen farben.
Mit den Farben funktioniert das super... nur mit Bilder is das echt etwas knifflig.

var shapes = [
[ 1, 1, 1, 1 ],
[ 1, 1, 1, 0,
1 ]

];
var colors = [
'green', 'orange',
];


Hier noch die Render funktion

function render() {
ctx.clearRect( 0, 0, W, H );

ctx.strokeStyle = 'black';
for ( var x = 0; x < COLS; ++x ) {
for ( var y = 0; y < ROWS; ++y ) {
if ( board[ y ][ x ] ) {
ctx.fillStyle = colors[ board[ y ][ x ] - 1 ];
drawBlock( x, y );
}
}
}

ctx.fillStyle = 'red';
ctx.strokeStyle = 'black';
for ( var y = 0; y < 4; ++y ) {
for ( var x = 0; x < 4; ++x ) {
if ( current[ y ][ x ] ) {
ctx.fillStyle = colors[ current[ y ][ x ] - 1 ];
drawBlock( currentX + x, currentY + y );
}
}
}
}

Danke schonmal

 

[scbawik]

Hey hey,
ich bräuchte bitte einen kleinen Rat.
Und zwar bin ich grade dabei ein kleines Tetris zu schreiben für die Schule.
Funktioniert alles wunderbar bis jetzt. Nur leider würde ich anstatt der langweiligen Farben ein paar gleich große Bilder einbinden. Vll könne mir wer nen kleinen Denk anstoß geben.
Ich habe hier mein Array mit Shapes und darunter die dazu gehörigen farben.
Mit den Farben funktioniert das super... nur mit Bilder is das echt etwas knifflig.

var shapes = [
[ 1, 1, 1, 1 ],
[ 1, 1, 1, 0,
1 ]

];
var colors = [
'green', 'orange',
];


Hier noch die Render funktion

function render() {
ctx.clearRect( 0, 0, W, H );

ctx.strokeStyle = 'black';
for ( var x = 0; x < COLS; ++x ) {
for ( var y = 0; y < ROWS; ++y ) {
if ( board[ y ][ x ] ) {
ctx.fillStyle = colors[ board[ y ][ x ] - 1 ];
drawBlock( x, y );
}
}
}

ctx.fillStyle = 'red';
ctx.strokeStyle = 'black';
for ( var y = 0; y < 4; ++y ) {
for ( var x = 0; x < 4; ++x ) {
if ( current[ y ][ x ] ) {
ctx.fillStyle = colors[ current[ y ][ x ] - 1 ];
drawBlock( currentX + x, currentY + y );
}
}
}
}

Danke schonmal

drawImage
getImageData
putImageData
?