Холст - обновление не работает, как я ожидал - PullRequest
Новая
       15

Холст - обновление не работает, как я ожидал

1 голос
/ 24 мая 2019

Я учусь создавать игры в JS, Я добавил фон, характер и движение. Когда у меня нет ctx.clear (..), персонаж движется, но не очищает предыдущее изображение, когда у меня есть ctx.clear, я не вижу своего персонажа ...

Я пытался использовать setInterval в качестве функции обновления, но там мой персонаж мигает, и все равно нет ничего хорошего для создания обновления / обновления 

document.addEventListener('DOMContentLoaded', () => {
    window.requestAnimationFrame(update.bind(this));
    update();
    movingCharacter.moving(ctx);
});


function update() {
    let now
    let then = Date.now();
    let delta;

    now = Date.now();
    delta = now - then;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawFigure.draw(ctx, 0, 0, windowsWidth, windowsHeight,'#000000');
    drawImages.draw(ctx, imagesCharacterList.panda, pandaPosition[0], 
    pandaPosition[1], 50, 50);
    window.requestAnimationFrame(update.bind(this));
}



export default class DrawImages {
    draw(ctx, image, x, y, width, height) {
        const img = new Image();
        img.src = image;
        img.onload = () => {
            ctx.drawImage(img, x, y, width, height);
        }    
    }
}



export const pandaPosition = [100, 200];

export class MovingCharacter {
    moving(ctx) {
        document.addEventListener('keydown', (key) => {
            switch (true) {
                case key.keyCode === 87: 
                        pandaPosition[1] -= 1;
                    break;

                case key.keyCode === 83: 
                        pandaPosition[1] += 1;
                    break;

                case key.keyCode === 68: 
                        pandaPosition[0] += 1;
                    break;

                case key.keyCode === 65: 
                        pandaPosition[0] -= 1;
                    break;

                case key.keyCode === 32: 
                        pandaPosition[1] -= 10;
                            // ctx.clearRect(0, 0, window.innerWidth,                     window.innerHeight);

                    break;
            }    
        })
    }
}

Я хочу переместить моего персонажа и увидеть его ...

1 Ответ

1 голос
/ 24 мая 2019

По сути, как говорит Виктор Зихла, вам не нужно загружать изображение каждый раз, когда вы хотите нарисовать.

Загрузка изображения при создании класса DrawImages, а затем только рисование изображения в цикле обновления. 

class DrawImages {
    constructor(imageurl, ctx, x, y, width, height)
    {
       this.img = new Image();
       this.img.src = imageurl;
       this.img.onload = () => {
            ctx.drawImage(this.img, x, y, width, height);
       }    
    }
    draw(ctx, x, y, width, height) {
        ctx.drawImage(this.img, x, y, width, height);
    }
}

//I guess this goes in a different module
const drawImages = new DrawImages("https://example.com/image.jpg", ctx, pandaPosition[0], pandaPosition[1], 50, 50);

Возможно, вы захотите сделать что-то другое в onload, но это в основном работает. 

var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
    window.requestAnimationFrame(update.bind(this));
    update();
    movingCharacter.moving();
});

function update() {
    let now
    let then = Date.now();
    let delta;

    now = Date.now();
    delta = now - then;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawImages.draw(ctx, pandaPosition[0], pandaPosition[1], 32, 32);
    window.requestAnimationFrame(update.bind(this));
}



class DrawImages {
    constructor(imageurl, ctx, x, y, width, height)
    {
       this.img = new Image();
       this.img.src = imageurl;
       this.img.onload = () => {
            ctx.drawImage(this.img, x, y, width, height);
       }    
    }
    draw(ctx, x, y, width, height) {
        ctx.drawImage(this.img, x, y, width, height);
    }
}

const pandaPosition = [100, 200];

const drawImages = new DrawImages("https://www.gravatar.com/avatar/0552c7e9c1da444137e8b235576e516d?s=64&d=identicon&r=PG", ctx, pandaPosition[0], pandaPosition[1], 32, 32);

class MovingCharacter {
    moving() {
        document.addEventListener('keydown', (key) => {
            switch (true) {
                case key.keyCode === 87: 
                        pandaPosition[1] -= 1;
                    break;

                case key.keyCode === 83: 
                        pandaPosition[1] += 1;
                    break;

                case key.keyCode === 68: 
                        pandaPosition[0] += 1;
                    break;

                case key.keyCode === 65: 
                        pandaPosition[0] -= 1;
                    break;

                case key.keyCode === 32: 
                        pandaPosition[1] -= 10;

                    break;
            }    
        })
    }
}

var movingCharacter = new MovingCharacter();
<canvas id="canv" width="300" height="300">
...