как добавить появление картинки вместо красных квадратов?

Question

function drawGame() {
    ctx.drawImage(ground, 0, 0);

    ctx.drawImage(foodImg, food.x, food.y);

    for(let i = 0; i < snake.length; i++) {
        ctx.fillStyle = i == 0 ? "green" : "red";
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
    }
}

Answer 1

Намудрил я тут с ожиданием подгрузки обоих картинок, здесь важно только функция drawSnake():

function drawSnake(){
    for(let i=0; i < snake.length; i++){
        let image = i == 0 ? headImage : bodyImage;
        ctx.drawImage(image,0,0,image.width,image.height,snake[i].x,snake[i].y,box,box);
    }
}

CanvasRenderingContext2D.drawImage() может принимать разный набор параметров, в данном случае:

Объект изображения или холста (CanvasImageSource).
Начальная Х на изображении.
Начальная Y на изображении.
Ширина захвата участка изображения.
Высота захвата участка изображения.
Начальная X на холсте.
Начальная Y на холсте.
Ширина отображения участка изображения.
Высота, на которую отобразится участок изображения.

const headImageSrc = 'https://t3.ftcdn.net/jpg/02/95/66/46/240_F_295664608_PYAj3igTp0R2cxuxSEpD25Cy7oXn1iMG.jpg';
const bodyImageSrc = 'https://t3.ftcdn.net/jpg/03/43/41/52/240_F_343415210_GZBaYqdPggiS3Bhsinry8wDsmIF19PhF.jpg';

const canvas = document.getElementById('snakegame');
const ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 180;

let loaded = false;

const headImage = new Image();
headImage.src = headImageSrc;
headImage.onload = () => {
    if(loaded){
        drawSnake();
        loaded = false;
    } else {
        loaded = true;
    }
}

const bodyImage = new Image();
bodyImage.src = bodyImageSrc;
bodyImage.onload = () => {
    if(loaded){
        drawSnake();
        loaded = false;
    } else {
        loaded = true;
    }
}

let snake = [{x:45,y:34}, {x:55,y:34}, {x:65,y:34}, {x:65,y:44}, {x:65,y:54}, {x:55,y:54}, {x:55,y:64}, {x:55,y:74}, {x:55,y:84}];
let box = 10;

function drawSnake(){
    for(let i=0; i < snake.length; i++){
        let image = i == 0 ? headImage : bodyImage;
        ctx.drawImage(image,0,0,image.width,image.height,snake[i].x,snake[i].y,box,box);
    }
}

<canvas id="snakegame"></canvas>

БЛОГ НА HUSL

как добавить появление картинки вместо красных квадратов?

Ответы (1 шт):