0
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);
    }
}
0

1 ответ 1

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() может принимать разный набор параметров, в данном случае:

  1. Объект изображения или холста (CanvasImageSource).
  2. Начальная Х на изображении.
  3. Начальная Y на изображении.
  4. Ширина захвата участка изображения.
  5. Высота захвата участка изображения.
  6. Начальная X на холсте.
  7. Начальная Y на холсте.
  8. Ширина отображения участка изображения.
  9. Высота, на которую отобразится участок изображения.

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>

1
  • И, если у вас есть background (ground), то лучше вынести его на отдельный слой, а не перерисовывать на каждом кадре. Можно динамически создать спрайт на отдельном холсте и брать уже оттуда нужные участки и переносить сюда.
    – Leonid
    Commented 4 сент. 2021 в 18:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.