Question

我有一个玩家，一个背景和一个地块都设置好了。我需要的是当我点击屏幕或屏幕按钮时玩家跳跃和降落的方式。我正在为移动设备做这个。这是我到目前为止所做的编码。

  <!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>

Answer 1

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

要进行静止跳跃（在同一坐标上开始和降落），请查看“缓和”。

Easing让你的角色快速跳跃，在他们的顶点和加快下降速度。特别是，请查看easeOutQuart for ascent和easeInQuart for descent。

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} );
}

BTW，您的示例代码可能存在问题：

你的bk.png图片可能是你填充画布的最大图像。它可能需要最长时间才能加载并最后绘制。因此，您的背景可能会覆盖您的elf1.png和Iceland.png图像。要更正此问题，请检查图像加载器，以便在画布上绘制它们之前所有图像都已完全加载。

html 5 canvas如何让玩家跳转（纯粹没有框架）

1 个答案: