html 5 canvas 如何让玩家跳跃（纯无框架）答案

【问题标题】：html 5 canvas how to make a player jump (pure no frameworks)html 5 canvas 如何让玩家跳跃（纯无框架）
【发布时间】：2013-12-26 02:00:19
【问题描述】：

我设置了一个玩家、一个背景和一块地块。我需要的是一种让玩家在我点击屏幕或屏幕按钮时跳跃和着陆的方式。我正在为移动设备制作这个。这是我到目前为止所做的编码。

  <!DOCTYPE html>
  <head>
  <meta charset="UTF-8">
  <title> Testing Canvas</title>
  <script type="text/javascript">
  window.onload = function ()
  {

  var canvas = document.getElementById("canvasOne");
  var context = canvas.getContext("2d");
  var canvasbk = document.getElementById("bk");
  var contextbk = canvasbk.getContext("2d");


 var myelf = new Image();
 var myice = new Image() ;
 var mybk  = new Image();

 myice.src="iceland.png";
  myelf.src="elf1.png" ;
 mybk.src="bk.png";

 myelf.onload = function()
 {
 context.drawImage(myelf,40,55);


 }
 myice.onload = function()
 {

 context.drawImage(myice,0,150);

}    
 mybk.onload = function()
{

 contextbk.drawImage(mybk,0,0,canvasbk.width,canvasbk.height);

}


}

 </script>
 </head>
<body>

 <div style = “width:500px; height:500px; margin:0 auto; padding:5px;”>

 <canvas id="canvasOne" width="500" height="300"
  style="border:2px solid black; position:absolute; 
  left:auto; top:auto; z-index:2"></canvas>

  <canvas id="bk" width=500px; height="300px; style="border:solid black;
  position:absolute; top:auto left:auto; z-index 1"></canvas>

  </div>
 </body>
 </html>

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

既然你想做一些学习，我不会用编码的答案破坏你的体验，但你应该检查这两种让你的角色跳跃的方法。

要进行固定跳跃（在同一坐标上开始和着陆），请查看 Easing。

缓动可以让你的角色快速跳跃，在顶点缓慢跳跃并在下降时加速。特别是，查看easeOutQuart 以了解上升和easeInQuart 以了解下降。

http://jqueryui.com/resources/demos/effect/easing.html

要从起点跳到不同的终点，请查看二次曲线。

它以控制点定义的“曲线”量从确切的起点到确切的终点绘制一条曲线。二次曲线公式的好处是它自然会在其顶点生成更多点（更多点意味着您的角色将开始快速，在顶点缓慢并在下降时加速）。这是在给定时间 (T) 返回 XY 的二次公式。

// get XY along quadratic bezier at T 
// (T==0.00 at start of curve, T==1.00 at end of curve) 

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}

顺便说一句，您的示例代码中可能存在问题：

您的 bk.png 图像可能是您最大的图像，因为它填满了画布。加载时间可能最长，并且会最后绘制。因此，您的背景可能会覆盖您的 elf1.png 和 Iceland.png 图像。要纠正这个问题，请检查一个图像加载器，以便在您将所有图像完全加载到画布上之前。

【讨论】：

谢谢你的建议，我读的书说如果我有一个单独的背景画布，当我想重绘精灵时它不会被重绘。
感谢 getQuadraticBezierXYatT 函数，我找了一整天的函数！