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);
}
}
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>
-
И, если у вас есть background (ground), то лучше вынести его на отдельный слой, а не перерисовывать на каждом кадре. Можно динамически создать спрайт на отдельном холсте и брать уже оттуда нужные участки и переносить сюда.– LeonidCommented 4 сент. 2021 в 18:07