我最新的Hobby Project是一个使用JavaScript的非常简单的Jump'n'Run游戏。我已经写了一些代码（借助于lostdecadegames的教程），并阅读了有关GameLoop的所有内容。
var start = true;
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1200;
canvas.height = 480;
document.body.appendChild(canvas);
var jumping = false;
var gravity = 1.5;
var pressed = true;
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "background.png";
// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "hero.png";
// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "monster.png";
// Game objects
var hero = {
speed_x: 50,
speed_y_up: 50,
speed_y_down: 50, // movement in pixels per second
velocity_x: 50,
velocity_y: 50
};
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
// Update game objects
var update = function (modifier) {
if(38 in keysDown) { // Player holding up
jumping = true;
//hero.y -= hero.speed_y_up * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed_y_down * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed_x * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed_x * modifier;
}
};
// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
if(hero.y > 0 && hero.y < 480 && hero.x <= -32)
{
hero.x = hero.x + 1232;
ctx.drawImage(heroImage, hero.x, hero.y);
}
else if(hero.y > 0 && hero.y < 480 && hero.x >= 1200)
{
hero.x = hero.x - 1232;
ctx.drawImage(heroImage, hero.x, hero.y);
}
else if(jumping)
{
ctx.drawImage(heroImage, hero.x, hero.y-100);
jumping = false;
}
else ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
};
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 500);
render();
then = now;
};
// Starting the game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible
如您所见，我已经添加了一个固定重力变量和一些速度变量。英雄动作非常平稳，所以这没问题。
我在jump-Animation中有2个问题：
按住向上键时，英雄将悬空。我试图用一些布尔变量来解决这个问题，但是我不知道该如何使Hero崩溃。
现在，我实施了一个“脏污”操作，使英雄重绘了50px以上的像素，但是我想要一个平滑的Jump，这样英雄在上升时会变慢，在下降时会加快。我查阅了太多的教程和大量的示例代码，但是我太傻了，无法弄清楚如何获得所需的动画。
希望你们能为我的问题提供一些建议（我不要求最终代码，我只需要一些提示）。
最佳答案
很难确切地理解if (heroReady)中的if语句在做什么，因为数字对我而言没有任何意义，但在我看来，您的问题就在那里。
首先，在我看来，jumping应该检查第一个条件。如果第一个条件为真，那么他是否在跳都没关系。不过，我无法轻易判断每个条件何时成立，因此我假设当玩家坚持时，
else if(jumping)
{
ctx.drawImage(heroImage, hero.x, hero.y-100);
jumping = false;
}
被照常执行。
现在，假设我认为您的问题是
jumping完全由玩家是否握住来决定，因为jumping正确时，它就会变为假。这是不正确的。当玩家按下向上键时，跳跃应设置为true，但是当他们将其移除时，应将其设置为false。动画触地时应将其设置为false。
您遇到的另一个问题是您实际上并没有使用英雄的属性来呈现其跳跃位置，而只是在抵消它。也许这只是解决问题之前的解决方法，但是这使角色很难分辨何时撞到地面，因为在跳动之后您无法开始降低角色（增加y值），因为您从未举过手通过降低y值。
那么我们该如何解决呢？
这是我的建议。由于重构，您可能会在完成时找到更优雅的方法，但是现在设置的方式我认为它会很好地工作：
就像您正在做的那样，只要他们按起来，就立即设置
jumping，但仅在jumping == false时设置，因为大概您的英雄无法进行空中跳跃。设置
jumping之后（并在相同的if语句中），立即更新其速度。在更新部分中，无论玩家是否按下任何键，都可以添加另一个用于表示玩家是否在跳跃。如果是，请根据重力降低其动量。然后，检查它们的动量是否与它们开始跳跃时增加的动量相反。换句话说，检查它们是否以与开始跳跃时的上升速度完全相同的速度下降。这恰好发生在他们开始跳跃的y坐标处。 （这更可靠，因为只需检查它们的位置，因为它将在多个y位置工作。）另一种方法是存储一个变量，使其在跳跃时具有y坐标。无论哪种方式，如果其跳转已结束，请将跳转设置为false。
由于您是基于跳跃来更新其坐标的，因此在渲染功能中，您可以消除任何跳跃逻辑，而仅基于坐标绘制图像。
这些帮助有用？
关于javascript - 用JavaScript跳转动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14607847/