Javascript 如何在HTML5画布中制作精灵跑步/冲刺动画_Javascript_Html_Animation_Html5 Canvas_Runtime

Javascript 如何在HTML5画布中制作精灵跑步/冲刺动画

javascript html animation html5-canvas

Javascript 如何在HTML5画布中制作精灵跑步/冲刺动画,javascript,html,animation,html5-canvas,runtime,Javascript,Html,Animation,Html5 Canvas,Runtime,我正在html5画布上创建一个2D platformer游戏。我正在尝试设置一个精灵的动画，使其切换到运行图像和信纸图像，以创建精灵正在运行的错觉。我尝试过根据帧数更改精灵图像，但它只显示精灵运行不到一秒钟。这不是我的全部代码。仅与运行动画相关的部分 index.html： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <

我正在html5画布上创建一个2D platformer游戏。我正在尝试设置一个精灵的动画，使其切换到运行图像和信纸图像，以创建精灵正在运行的错觉。我尝试过根据帧数更改精灵图像，但它只显示精灵运行不到一秒钟。这不是我的全部代码。仅与运行动画相关的部分

index.html：

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Game</title>
    <style media="screen">
      #canvas {
        background-color: #87cefa;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
  </body>
  <script type="text/javascript" src="index.js">

  </script>
</html>

加载图像一次首先，不要每次渲染时都加载图像

image.src=“filenameORUrl”

加载图像

加载图像一次，然后选择要渲染的图像

创建加载图像的示例使有生气要设置图像动画，请将动画图像添加到阵列中。设置一个变量，该变量定义每个图像应显示多少帧，然后将frameNum除以该值并将其设置为下限以获得图像索引

设置图像动画的示例注意在

（frameNo/runAnimFrames | 0）

中，

|0

（按位或0）对结果进行分层。与

Math.floor（frameNo/runAnimFrames）

相同。应仅在小于

31**2-1的正数上使用或零
示例将动画序列添加到数组runAnim
，并在主渲染循环内显示动画，每个动画帧显示30帧runAnimFrames
（半秒）。减少数字可加快动画，增加数字可减慢动画
可以根据需要向动画阵列添加任意多的帧
const runAnim = [running, normal]; // add animation sequence to arr
const runAnimFrames = 30;   // number of frames to display each image in animation

// Inside main render loop
   if(key === 39) {
      const plyImg = runAnim[(frameNo / runAnimFrames | 0) % runAnim.length];
      ctx.drawImage(plyImg, player.x, player.y, player.w, player.h);
   } else {
      ctx.drawImage(normal, player.x, player.y, player.w, player.h);
   }

const running = new Image;   // create
const normal = new Image;
running.src = "Running.png"; //load
normal.src = "normal.png";

const runAnim = [running, normal]; // add animation sequence to arr
const runAnimFrames = 30;   // number of frames to display each image in animation

// Inside main render loop
   if(key === 39) {
      const plyImg = runAnim[(frameNo / runAnimFrames | 0) % runAnim.length];
      ctx.drawImage(plyImg, player.x, player.y, player.w, player.h);
   } else {
      ctx.drawImage(normal, player.x, player.y, player.w, player.h);
   }