带有Sprites HTML5的动画

卡罗尔(Karol Sz)

我正在尽力制作游戏,但是我却坚持要制作动画。

我正在尝试改编我发现的教程,但没有看到动画。相反,我.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();        
}
JDB仍然记得莫妮卡

我不会直接回答您的问题,因为您的问题中根本没有足够的工作代码来轻松诊断问题。

根据您的描述,很可能您没有充分修剪Sprite表。您需要提供要使用的小图片的x / y / w / h坐标。听起来您没有这样做。

这是一个在HTML5画布上设置精灵动画的非常简单的工作示例。请注意,这在<IE10中不起作用。

$(function(){
  
  var spritesheet = new Image(),
      canvas = $("#game")[0].getContext('2d'),
      spriteWidth = 64,
      spriteHeight = 64,
      indexX = 0,
      indexX_max = 7,
      indexY = 11,
      lastFrameUpdate = 0,
      frameRate = 1000 / 16, // 16 frames per second (calculated in milliseconds)
      destX = 0,
      destY = 0;
  
  spritesheet.src = 'http://i.stack.imgur.com/X2Dt6.png';
  
  function drawNextSprite(){
    var currentTime = Date.now(),
        timeSinceLastUpdate = currentTime - lastFrameUpdate,
        spriteX,
        spriteY;
    
    // If it's been less than 1/16 of a second since the last update, then
    // don't update the sprite yet
    if ( timeSinceLastUpdate < frameRate ){
      window.requestAnimationFrame(drawNextSprite);
      return;
    }
    
    lastFrameUpdate = currentTime;
    
    if ( indexX > indexX_max ) indexX = 0;
    if ( destX > 80 ) destX = -spriteWidth;
    
    // find the next sprite image to use
    spriteX = spriteWidth * indexX;
    spriteY = spriteHeight * indexY;
    
    // clear the area we last drew on (so that we don't leave a trail)
    canvas.clearRect( destX, destY, spriteWidth, spriteHeight );
    canvas.drawImage(
      spritesheet, // the spritesheet
      spriteX, spriteY, spriteWidth, spriteHeight, // where is the sprite frame?
      destX, destY, spriteWidth, spriteHeight // where should we draw it on the canvas?
    );
    
    // increment to the next sprite image
    indexX++;
    // move our sprite across the screen
    destX += 3;
    
    window.requestAnimationFrame(drawNextSprite);
  }
  
  drawNextSprite(); // draw the first frame
  
  
});
#game{
  border: solid black 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="game" height="80" width="80"></canvas>

有关我使用的Sprite工作表的信息,包括相关的版权,可以在这里找到:http
://opengameart.org/content/universal-lpc-sprite-male-01版权/归因声明:Gaurav Munjal

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带有HTML5的Android应用

来自分类Dev

带有regex模式的html5输入类型数字

来自分类Dev

带有括号的HTML5电话号码验证

来自分类Dev

在Facebook上嵌入带有opengraph的html5视频

来自分类Dev

带有CSS的HTML5中的居中按钮

来自分类Dev

fancybox + jwplayer(带有html5后备广告)

来自分类Dev

带有选择必填属性的HTML5验证错误

来自分类Dev

带有hls的flowplayer HTML5预滚动

来自分类Dev

创建带有视频作为背景HTML5的部分

来自分类Dev

带有CSS元素的HTML5在缩放时移动

来自分类Dev

带有画布的html5图像过滤器

来自分类Dev

带有jCanvas的HTML5 Canvas:如何删除图层

来自分类Dev

带有Javascript的HTML5视频播放/停止按钮

来自分类Dev

带有HTML5中“音频”元素的JQuery

来自分类Dev

带有html5画布的径向文本

来自分类Dev

禁用带有html5内容的Firefox全屏警告?

来自分类Dev

HTML5,带有禁用属性的文本框

来自分类Dev

嵌入带有参数的HTML5 / JS Web App

来自分类Dev

带有HTML5视频的Azure AD

来自分类Dev

带有JavaScript的HTML5视频-语法混乱

来自分类Dev

使用带有 react-leaflet 的 html5 视频

来自分类Dev

CSS3 / HTML5 / JS-如何创建具有幻灯片效果的动画纹理背景?

来自分类Dev

有没有一种标准方法可以为HTML5广告/动画的屏幕阅读器提供alt =“”文本?

来自分类Dev

具有iframe的HTML5 Doctype

来自分类Dev

html5 img是否有`loadedmetadata`?

来自分类Dev

HTML5 canvas动画和旋转

来自分类Dev

HTML5 Canvas动画未显示

来自分类Dev

HTML5 canvas动画和旋转

来自分类Dev

HTML5 和 JavaScript 动画矩形?