-1
我想努力做出一個遊戲,但我卡住試圖做一個動畫。動畫與精靈HTML5
我正在嘗試修改我找到的教程,但我沒有看到動畫。相反,我看到在屏幕上繪製的整個文件都是.png
。
這裏是我的代碼(以及到的jsfiddle http://jsfiddle.net/ae3nj03a/3/鏈接)
我會很感激的任何幫助或指導。
var fantom = new Image(300,60); //obrazek ma wymiary 24,24
fantom.src = 'obrazki/SpriteGracz.png';
function draw() {
var nr_klatki = 1;
var liczba_klatek_fantom = 5;
var szerokosc_klatki = fantom.width/liczba_klatek_fantom;
var wysokosc_klatki = fantom.height;0
var c = document.createElement('canvas');
ggctx=c.getContext('2d');
c.fillStyle = "#111";
//c.fillRect(0,0,200,100);
nr_klatki++;
if (nr_klatki>liczba_klatek_fantom) {
nr_klatki = 1;
}
var xklatki = (nr_klatki-1)*szerokosc_klatki;
ggctx.drawImage(fantom, xklatki, 0, szerokosc_klatki, wysokosc_klatki, 60, 35, szerokosc_klatki, wysokosc_klatki);
return draw;
}
function rysuj(callback){
var gracz = document.createElement("canvas");
gctx = gracz.getContext("2d");
gctx.fillStyle = "black";
//gracz.width = 640;
//gracz.height = 480;
gracz = new Image();
gracz.onload = function(){
setInterval(draw(), 20);
};
gracz.src = "../obrazki/SpriteGracz.png";
//gctx.arc(310, 410, 20, 0, 2*Math.PI);
//gctx.fill();
// dom.dodKlase(gracz, "plansza");
dom.dodKlase(gracz, "gracze");
return gracz;
callback();
}
//function()
function setup(){
var boardElement = $("#ekran-gry .ekran-planszy")[0];
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
dom.dodKlase(canvas, "plansza");
boardElement.appendChild(createBackground());
boardElement.appendChild(rysuj());
boardElement.appendChild(canvas);
// rysuj();
}
雖然我們都同情你的位置(所有專業開發人員一直在你的位置上),「發現錯誤」的問題在這個網站上脫離主題。見http://meta.stackoverflow.com/a/253788/211627 – JDB 2015-03-02 21:40:10
你有點,但我堅持爲我的項目創建動畫一段時間了,我看了很多不同的教程,不知道如何做到這一點工作。我不得不說,我不想讓任何人告訴我接下來要做什麼。我只需要一些小技巧。看着這段代碼,我不明白它爲什麼不起作用。 – 2015-03-02 21:58:34
不要試圖開始大。動畫很難。從小處開始......看看你是否可以創建一個畫布元素,然後畫一個盒子。接下來,用一個靜態圖像填充框。那會讓你走上大半路。下載已完成的項目並嘗試閱讀代碼是最難學習的方法之一。 – JDB 2015-03-03 03:42:38