-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