1

Тема: Анімація

window.onload = init;

var map;
var ctxMap;

var pl;
var ctxPlayer;

var cact;
var ctxCactus;

var gameWidth = 800;
var gameHeight = 500;

var backgraund = new Image();
backgraund.src = "img/baсkgraund.png";

var player = new Image();
player.src = "img/player.png";

var cactus = new Image();
cactus.src = "img/cactus.png";

var player1 = new Player();
var cactus1 = new Cactus();

var isPlaying;

var requestAnimFrame = window.requestAnimationFrameFrame 
                    || window.webkitRequestAnimationFrame
                    || window.oRequestAnimationFrameFrame 
                    || window.msRequestAnimationFrameFrame;

function init()
{
    map = document.getElementById("map");
    ctxMap = map.getContext("2d");

    pl = document.getElementById("player");
    ctxPlayer = pl.getContext("2d");

    cact = document.getElementById("cactus");
    ctxCactus = cact.getContext("2d");


    map.width = gameWidth;
    map.height = gameHeight;
    pl.width = gameWidth;
    pl.height = gameHeight;
    cact.width = gameWidth;
    cact.height = gameHeight;

    drawBackgraund();
    
    startLoop();
}

function loop()
{
    if(isPlaying)
    {
        draw();
        update();
        requestAnimFrame(loop);
    }
}

function startLoop()
{
    isPlaying = true;
    loop();
}

function stopLoop()
{
    isPlaying = false;
}

function draw()
{
    player1.draw();
    cactus1.draw();
}

function Player()
{
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = 15;
    this.drawY = 270;
    this.width = 100;
    this.height = 167;

    this.spead = 5;
}

function Cactus()
{
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = 350;
    this.drawY = 310;
    this.width = 160;
    this.height = 208;

    this.spead = 5;
}

function update()
{
    cactus1.update();
}

function clearCtxCactus()
{
    ctxCactus.clearRest(0, 0, gameWidth, gameHeight);
}

function clearCtxPlayer()
{
    ctxPlayer.clearRest(0, 0, gameWidth, gameHeight);
}

var i;

Player.prototype.draw = function()
{
    for(i = 0; i<10000000; i++)
    {
        if(this.srcX!=400)
        {
            //clearCtxPlayer();
            ctxPlayer.drawImage(player, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height);
            this.srcX+=100;
        }
        else
        {
            this.srcX=0;
        }
    }
}

Cactus.prototype.draw = function()
{
    //clearCtxCactus();
    ctxCactus.drawImage(cactus, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width/2, this.height/2);
}

Cactus.prototype.update = function()
{

    this.drawX += -5;
}

function drawBackgraund()
{
    ctxMap.drawImage(backgraund, 0, 0, 800, 500, 0, 0, gameWidth, gameHeight);
}

Допоможіть початківцю, проблема в тому, що я ніяк не можу зробити адекватну анімацію, чому коли я застосовую функцію clearCtxPlayer() то картинка перестає відображатись, хоча по ідеї мала би замінятись наступним кадром, як це виправити?

Подякували: 221VOLT1

2 Востаннє редагувалося 221VOLT (28.04.2016 14:05:34)

Re: Анімація

навіщо ви повиносили по одному рядочку у окремі функції?
+ окремо оголошення змінної від визначення(присвоєння)

надлишковість коду === проблеми з читанням та виправленням помилок

-----

то є класно що ви хочете начитися працювати з канвасом з нуля,
у вашому випадку я вам рекомендував би спробувати попрацювати з libcanvas -
https://github.com/theshock/libcanvas
http://libcanvas.github.io/

можливо, то є найкращий фреймворк для роботи з канвасом - маленький, швидкий, зручний - мені він дуже сподобався

--------------

може бути корисним -

https://habrahabr.ru/post/119772/
https://habrahabr.ru/post/119773/

https://habrahabr.ru/post/121046/
https://habrahabr.ru/post/121047/
https://habrahabr.ru/post/168435/

https://habrahabr.ru/post/184666/

Подякували: yegor21