如何使用javascript对角移动精灵？ [英] How to move sprite diagonally with javascript?
问题描述
我正在制作一款带有HTML5画布的二维平台游戏风格游戏。在其中，角色可以使用箭头键跳转并左右移动，除了一个问题外，它可以正常工作。当我跳跃并同时向侧面移动时，精灵上升并且不会向侧面移动。只有当它下来时才会正常移动。有办法解决吗？我已经完成了对其他移动精灵对角线问题的研究，但根据我的代码;当我放开'向上'键时，精灵应该移到一边，对吧？看看我的代码，看看你的想法...
I'm making a 2-D platformer style game with an HTML5 canvas. In it the character can jump and move side-to-side using the arrow keys, it works fine except for one problem. When I jump and move to the side at the same time the sprite goes up and doesn't move to the side. Only when it's coming down it moves properly. Is there a way to fix it? I've done research on other "move sprite diagonally" questions, but according to my code; when I let go of the 'up' key the sprite should move to the side, right? Take a look at my code and see what you think...
**注意：好像我已经定义了变量，因为我有
**note: act as if I've already defined the variables, because I have
window.addEventListener("keydown", checkKeyPressed, false);
//^don't proceed if you don't know what this means^
function checkKeyPressed(e) {
if (e.keyCode == "38" && jumpTime == 0) {
//checks if 'up' key is pressed then initiates the 'jump' sequence
refreshIntervalId = setInterval(jumpUp, 5);//calls the jump function
setTimeout(stopRefresh, 500);//sets time until character stops jumping
jumpCal();//temporarily disables jumping, and therefore a double-jump
}else if (e.keyCode == "37") {
//checks if 'left' key is pressed then moves sprite to the side
charX = charX - 8;//piece 1,
a = a - 8;//2,
c = c - 8;//and 3
}else if (e.keyCode == "39") {
//same thing, except to the right...
charX = charX + 8;
a = a + 8;
c = c + 8;
}
}
function jumpUp() {
charY = charY - 5;//moves up pieces 1,
b = b - 5;//2,
d = d - 5;//and 3, since the sprite is composed of three images
}
function stopRefresh() {
clearInterval(refreshIntervalId);
//stops the character from jumping
}
function jumpCal() {
jumpTime = 1;
setTimeout(jumpRes, 1750);
//times out the jumping action
}
function jumpRes() {
jumpTime = 0;
//resets the jumping action
}
function gravityControl() {
if (charY <= platformDetect) {
//checks if touching platform then moves all pieces down
charY = charY + 3;//piece 1
b = b + 3;//piece 2
d = d + 3;//piece 3
//this function is called multiple times in an unspecified piece of code, so no, I did not make an error here
}
}
function detectPlatform() {
platformDetect = 160;
//I've added this function because there will be platforms later in the game
}
你了解我的代码吗？我留下了什么吗？太邋??了吗？如果您有任何与该问题无关的建议，请随时将其添加到评论中，我会很乐意接受。
Did you understand my code? Did I leave anything out? Was it too sloppy? If you have any suggestions not related to the question feel free to add it to the comments, I will accept any gladly.
回到手头的主题，是我的代码对？因为当我点击向上键然后放开并按住向右键时，我的角色的轨迹如下：
Back to the topic on hand, was my code right? Because when I tap the 'up' key then let go and hold down on the 'right' key, my character's trajectory is as follows:
步骤1：
^
|
|
|
|
|
|
|
**保持正常，但不会像预期的那样移到一边
**Goes up fine, but doesn't move to side, as expected
第2步：
|_
|_
|_
|_
|
|_
|
\ /
**下来并转移到它应该
**Comes down and moves to side like it should
你能帮我吗？如果你不理解我解释的任何部分，我会在评论中接受批评，毕竟我想要变得更好。
Can you help me please? If you didn't understand any part of my explanation I will accept criticism in the comments, after all I do want to become better.
_ _
|@| |@|
/_
---___ ___---
---_______---
** thnx提前!!!
**thnx in advance!!!
推荐答案
我我不太容易理解你的代码，我决定从头开始写一些东西，希望它可以提供帮助。您可能也对此答案感兴趣： https://gamedev.stackexchange.com/a/29618/34073，以及相关演示： http://jsfiddle.net/LyM87/ 。
I didn't understand your code easily, I decided to write something from scratch, hope it can help. You might be interested in this answer as well: https://gamedev.stackexchange.com/a/29618/34073, and the related demo: http://jsfiddle.net/LyM87/.
// ex: if pressed[39] == true, walk to the right
var pressed = [];
// keyboard mapping
var keys = {
JUMP: 38,
RIGHT: 39,
LEFT: 37
};
// states of the black pixel
var pixor = {
el: $('#pixor'),
isJumping: false,
x: 10,
y: 0,
vy: 0,
vx: 0
}
// record user keystrokes
$(document).on('keydown keyup', function (e) {
pressed[e.which] = e.type === 'keydown';
e.preventDefault();
});
// classical game loop: update, render, redo after 1/60 sec
function loop () {
update();
render();
setTimeout(loop, 17);
}
// updates the states of the black pixel
function update () {
// vertical moves
if (!pixor.isJumping && pressed[keys.JUMP]) {
pixor.isJumping = true;
pixor.vy = 10;
}
if (pixor.isJumping) {
pixor.y += pixor.vy;
if (pixor.vy >= 0 && pixor.vy <= 0.5) {
pixor.vy = -0.5;
}
if (pixor.vy > 0) {
pixor.vy /= 1.25;
}
else {
pixor.vy *= 1.25;
}
if (pixor.y <= 0) {
pixor.isJumping = false;
pixor.y = 0;
pixor.vy = 0;
}
}
// horizontal moves
if (pressed[keys.RIGHT]) {
pixor.vx = 5;
}
else if (pressed[keys.LEFT]) {
pixor.vx = -5;
}
else {
pixor.vx = 0;
}
pixor.x += pixor.vx;
}
// repaints the screen based on the states of the black pixel
function render () {
pixor.el.css({
bottom: pixor.y,
left: pixor.x
});
}
body {
overflow: hidden;
}
#pixor {
position: absolute;
width: 40px;
height: 40px;
bottom: 0px;
left: 10px;
background: black;
}
#calltoaction {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background: rgba(0,0,0,.5);
color: white;
text-align: center;
vertical-align: middle;
font: bold 24px Arial;
}
#calltoaction:after {
content: " ";
height: 100%;
display: inline-block;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pixor"></div>
<div id="calltoaction" onclick="$(this).remove();loop()">
Click here to start, then use UP, LEFT and RIGHT.
</div>
这篇关于如何使用javascript对角移动精灵？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
