Question

大家好！

我一直在使用HTML5 / Canvas中的Isometric Tile游戏引擎一段时间，我有一个完整的工作游戏。今天早些时候，我回顾了我的代码并想了想：“嗯，让我们试着让这个动画很流畅......”

从那以后，这就是我所做的一切。

问题
我希望角色实际上从一块瓷砖“滑动”到瓷砖 - 但画布重绘不允许这样 - 有没有人有任何想法......？下面的代码和小提琴......

摆弄它！ http://jsfiddle.net/neuroflux/n7VAu/

<html>  
<head>
<title>tileEngine - Isometric</title>
<style type="text/css">
* { margin: 0px; padding: 0px; font-family: arial, helvetica, sans-serif; font-size: 12px; cursor: default; }
</style>
<script type="text/javascript">
var map = Array( //land
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
    [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]]
);
var tileDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/land.png");
var charDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/mario.png");
var objectDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/rock.png"); //last is one more
var objectImg = new Array();

var charImg = new Array();
var tileImg = new Array();

var loaded = 0;
var loadTimer;
var ymouse;
var xmouse;
var eventUpdate = 0;

var playerX = 0;
var playerY = 0;

function loadImg(){ //preload images and calculate the total loading time
    for(var i=0;i<tileDict.length;i++){ 
        tileImg[i] = new Image();
        tileImg[i].src = tileDict[i];
        tileImg[i].onload = function(){
            loaded++;
        }
    }
    i = 0;
    for(var i=0;i<charDict.length;i++){
        charImg[i] = new Image();
        charImg[i].src = charDict[i];
        charImg[i].onload = function(){
            loaded++;
        }
    }
    i = 0;
    for(var i=0;i<objectDict.length;i++){
        objectImg[i] = new Image();
        objectImg[i].src = objectDict[i];
        objectImg[i].onload = function(){
            loaded++;
        }
    }
}

function checkKeycode(event) { //key pressed
    var keycode;
    if(event == null) {
        keyCode = window.event.keyCode;
    } else {
        keyCode = event.keyCode;
    }
    switch(keyCode) {
        case 38: //left
            if(!map[playerX-1][playerY][1] > 0){
                playerX--;
            }
            break;
        case 40: //right
            if(!map[playerX+1][playerY][1]  > 0){
                playerX++;
            }
            break;
        case 39: //up
            if(!map[playerX][playerY-1][1]  > 0){
                playerY--;
            }
            break;
        case 37: //down
            if(!map[playerX][playerY+1][1]  > 0){
                playerY++;
            }
            break;
        default:
            break;
    }
}

function loadAll(){ //load the game
    if(loaded == tileDict.length + charDict.length + objectDict.length){
        clearInterval(loadTimer);
        loadTimer = setInterval(gameUpdate,100);
    }
}

function drawMap(){ //draw the map (in intervals)
    var tileH = 25;
    var tileW = 50;
    mapX = 80;
    mapY = 10;
    for(i=0;i<map.length;i++){
        for(j=0;j<map[i].length;j++){
            var drawTile= map[i][j][0];
            var xpos = (i-j)*tileH + mapX*4.5;
            var ypos = (i+j)*tileH/2+ mapY*3.0;
            ctx.drawImage(tileImg[drawTile],xpos,ypos);

            if(i == playerX && j == playerY){
                you = ctx.drawImage(charImg[0],xpos,ypos-(charImg[0].height/2));
            }
        }
    }
}

function init(){ //initialise the main functions and even handlers
    ctx = document.getElementById('main').getContext('2d');
    loadImg();
    loadTimer = setInterval(loadAll,10);
    document.onkeydown = checkKeycode;
}

function gameUpdate() { //update the game, clear canvas etc
    ctx.clearRect(0,0,904,460); 
    ctx.fillStyle = "rgba(255, 255, 255, 1.0)"; //assign color
    drawMap();
}
</script>
</head> 
<body align="center" style="text-align: center;" onload="init()">   
    <canvas id="main" width="904" height="465">
        <h1 style="color: white; font-size: 24px;">I'll be damned, there be no HTML5 &amp; canvas support on this 'ere electronic machine!<sub>This game, jus' plain ol' won't work!</sub></h1>
    </canvas>
</body> 
</html>

修改
请...？

Answer 1

要使用画布进行动画处理，您必须每帧重绘整个受影响的部分，否则您的对象将在其后面留下痕迹。每个动画帧，在精灵移动之前，你必须重绘他后面的三个或四个瓦片。

我建议在绘图函数中添加一些额外的状态，以便为每个帧更新一些临时距离，并重新绘制相关的tile和sprite。在动画运行时，全局变量将阻止键输入。

我懒得自己写，但你应该没事。玩得开心！

Answer 2

Here's an example.这不太准确，因为我做得很快。

基本上当用户按下你想要开始倒计时的按钮时，时钟的每个连续刻度将它（+ 1，+ 2）等移动到其目标。经过一定数量的滴答后，它停止了移动。

编辑使用Nick的修改示例。见评论。

Answer 3

Gamedev帮忙： https://gamedev.stackexchange.com/questions/12058/smooth-animation-on-a-persistently-refreshing-canvas/12061#12061

通过持久刷新的画布进行HTML5动画

3 个答案: