Javascript HTML5画布如何让玩家跳跃（纯无框架）_Javascript_Html_Html5 Canvas

Javascript HTML5画布如何让玩家跳跃（纯无框架）

javascript html html5-canvas

Javascript HTML5画布如何让玩家跳跃（纯无框架）,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我有一个球员，一个背景，和一块地都设置好了。我需要的是，当我点击屏幕或屏幕上的按钮时，玩家可以跳跃和落地。我是为移动设备制作的。这是我到目前为止所做的编码 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title> Testing Canvas</title> <script type="text/javascript"> window.onload =

我有一个球员，一个背景，和一块地都设置好了。我需要的是，当我点击屏幕或屏幕上的按钮时，玩家可以跳跃和落地。我是为移动设备制作的。这是我到目前为止所做的编码

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


测试画布
window.onload=函数（）
{
var canvas=document.getElementById（“canvasOne”）；
var context=canvas.getContext（“2d”）；
var canvasbk=document.getElementById（“bk”）；
var contextbk=canvasbk.getContext（“2d”）；
var myelf=新图像（）；
var myice=新图像（）；
var mybk=新图像（）；
myice.src=“冰岛.png”；
myelf.src=“elf1.png”；
mybk.src=“bk.png”；
myelf.onload=函数（）
{
背景：drawImage（myelf，40,55）；
}
myice.onload=函数（）
{
drawImage（myice，0150）；
}    
mybk.onload=函数（）
{
背景bk.drawImage（mybk，0,0，canvasbk.width，canvasbk.height）；
}
}
既然你想做一些学习，我不会用一个编码的答案破坏你的经验，但是你应该检查这两种让你的角色跳跃的方法
要进行固定跳跃（在同一坐标上启动和降落），请查看放松。
放松可以让你的角色在顶点跳得快、慢，并在下降时加速。特别是，检查easeOutQuart的上升和easeInQuart的下降

要从起点跳到另一个终点，请查看二次曲线。
它从精确的起点到精确的终点绘制一条曲线，曲线的“弯曲度”由控制点定义。二次曲线公式的好处在于，它自然会在顶点生成更多的点（更多的点意味着您的角色将快速开始，在顶点缓慢，在下降时加速）。这是在给定时间（T）返回XY的二次公式
顺便说一句，您的示例代码中可能存在一个问题：
您的bk.png图像可能是最大的图像，因为它填充了画布。它可能需要最长的时间加载，并将最后绘制。因此，您的背景可能会覆盖elf1.png和冰岛.png图像。要纠正这一点，请检查图像加载器，以便在将图像绘制到画布上之前，所有图像都已完全加载。感谢您的建议，我读过的书中说，如果我有单独的画布作为背景，则当我要重绘精灵时，它将不会被重绘。感谢GetQuadricBezierxyatt函数，我已经找了一整天了！
// 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} );
}