如何用javascript对角地移动精灵?
问题描述:
我正在用HTML5画布制作二维平台游戏风格的游戏。在角色中,角色可以使用箭头键跳转并左右移动,除了一个问题外,它可以很好地工作。当我跳到一边的同时,精灵上升,不会移动到一边。只有当它下降时,它才能正常移动。有没有办法解决它?我已经完成了其他“移动精灵对角”问题的研究,但根据我的代码;当我放开'向上'键时,精灵应该移动到一侧,对吧?看看我的代码,看看你的想法...如何用javascript对角地移动精灵?
**注:表现得好像我已经定义的变量,因为我有
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
}
你明白我的代码?我有没有留下什么?这是不是马虎?如果您有任何与问题无关的建议,请随时将其添加到评论中,我会很乐意接受。
回到手边的话题,我的代码是否正确?因为当我点击“向上”键,然后放开并按住“正确”的关键,我的性格的轨迹如下:
第1步:
^
|
|
|
|
|
|
|
**去了罚款,但不会移动到侧面,如预期
第2步:
|_
|_
|_
|_
|
|_
|
\/
**下来,并移动到另一边像它应该
你能帮我吗?如果你不明白我的解释的任何部分,我会接受评论中的批评,毕竟我想变得更好。
_ _
|@| |@|
/_
---___ ___---
---_______---
** thnx提前!!!
答
我不明白你的代码很容易,我决定从头开始写一些东西,希望它能提供帮助。您也可能对此答案感兴趣:https://gamedev.stackexchange.com/a/29618/34073和相关演示: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>
答
因为我没有完整的代码,所以我不能确定,但是在哪里有else if (e.keyCode == "37")
else关键字可以防止在跳转时左右移动。 此外,我建议有一个处理移动而不是按键事件的常量循环。
window.addEventListener("keydown", checkKeyPressed, false);
window.addEventListener("keyup", keyUp, false);
var jumpStarted = false;
var moveLeft = false;
var moveRight = false;
setInterval(function(){
if(leftDown === true)
//move Left
else if(rightDown === true)
//move Left
if(jumpStarted)
//Jump code
}, 10);
function checkKeyPressed(e) {
if (e.keyCode == "38" && jumpTime == 0) {
jumpStarted = true;
}if (e.keyCode == "37") {
moveLeft = true;
}else if (e.keyCode == "39") {
moveRight = true;
}
}
function keyUp(e){
if (e.keyCode == "37") {
moveLeft = false;
}else if (e.keyCode == "39") {
moveRight = false;
}
}
这样做的好处是您可以在整个过程中移动按键,而不仅仅是按下按键。它也将相关代码组合在一起。
哇!棒极了!我会尝试在我的代码中实现它... –