我正在用canvas(&js)开发一个等距html5游戏.我的网格由列(x)和行(y)组成.
目前我的玩家可以穿过地图,但他从坐标跳到坐标.
我试图让他以平滑的方式从一个瓷砖走到另一个瓷砖,使用精灵动画.但是我不知道我怎么也找不到任何关于这个机制的文章,所以我再次向你求助!
所以,如果你知道如何做到这一点,或者知道解释这个的文章或教程,那就太棒了!
提前致谢,
Nick Verheijen
更新:我正在使用的代码来管理我的播放器
Player.move = function(direction)
{
var newX = Player.positionX;
var newY = Player.positionY;
switch( direction )
{
case 'up':
Player.moveDirection = 'up';
newY--;
break;
case 'down':
Player.moveDirection = 'down';
newY++;
break;
case 'left':
Player.moveDirection = 'left';
newX--;
break;
case 'right':
Player.moveDirection = 'right';
newX++;
break;
}
Player.positionX = newX;
Player.positionY = newY;
}
注意:我正在保存播放器移动的方向,因此我可以显示正确的图像.
此外,我没有使用像EaselJS这样的库.由于简单的原因,几乎没有任何文档或示例,所以我必须自己解决所有问题.
这段代码有什么问题？:S ..我的画布保持空白.图片网址正确且图片已加载.
这是我的engine.js文件:
var canvas;
var stage;
function init()
{
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
playerImg = new Image();
playerImg.src = 'img/player/walkingbl.png';
playerImg.onload = onPlayerLoaded;
Ticker.setFPS(30);
Ticker.addListener(window);
}
function tick()
{
stage.update();
}
function onPlayerLoaded()
{
console.log(playerImg);
player = new Bitmap(playerImg);
player.x = 300;
player.y = 450;
stage.addChild(player);
console.log('Player added to stage');
}
$(document).ready(function(){
init();
});
这是我的index.html文件:
<!DOCTYPE html>
<html>
<head>
<title>Game Engine</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id='container'>
<canvas id='#canvas' width='1000' height='350'></canvas>
</div>
<script src="js/jquery.js"></script> …