html 5画布如何让玩家跳跃(纯无框架）

html 5 canvas how to make a player jump (pure no frameworks)

本文关键字：框架 跳跃 5画 布如何 玩家 html      更新时间：2024-04-30

我有一个玩家、一个背景和一块陆地。我需要的是当我点击屏幕或屏幕按钮时，玩家可以跳跃和降落。我正在为移动设备制作这个。这是我迄今为止所做的编码。

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

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

要进行固定跳跃（在同一坐标上开始和降落），请查看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} );
}

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

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

相关文章：