我有一个玩家、一个背景和一块陆地。我需要的是当我点击屏幕或屏幕按钮时,玩家可以跳跃和降落。我正在为移动设备制作这个。这是我迄今为止所做的编码。
<!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图像。要更正此问题,请检查图像加载程序,以便在画布上绘制图像之前完全加载所有图像。