[游戏开发]js商场导航思路--ivx--canvas实现导航动画效果

最近在研究商场导航思路

因为ivx暂时没有商场导航的案例，随即我便做了一个。

暂时没有找到自动寻路的方案。只能写好每条路线到数据库里面。然后通过搜索出来的结果进行演示

因为最近学习了ivx html5快速开发，

我这里就演示的是ivx的开发过程。?

以下为js 源码

//以下代码仅作为参考不可直接运行使用 
//路径数据为 [[369,245],[777,468],[844,300]]


var 导航坐标 = sitegorup
var ctx = ids.drawId._ctx;

var kuan = document.body.clientWidth
var gao = document.body.clientHeight
var screenx = 0
var screeny = 0

var canvas = document.getElementsByTagName("canvas")[0];

var img = new Image(); //这个就是 img标签的dom对象
img.src = ids.jiantou._link;
img.alt = '文本信息';
ctx.clearRect(0, 0, 1500, 844);

function move() {
    console.log("sitegorup:", 导航坐标);
    var i = 0;
    //图片加载完成后，执行此方法
    var t = 0;
    var timeId = setInterval(function () {
        console.log("导航坐标length:", i);

        var x0 = 导航坐标[i][0];
        var y0 = 导航坐标[i][1];
        var x1 = 导航坐标[i + 1][0];
        var y1 = 导航坐标[i + 1][1];


//贝塞尔曲线一次方程。t 取值0.1-1 ，即可画出2个坐标点之间的所有点。
//即可画出线段动画效果
        var x2 = (1 - t) * x0 + t * x1
        var y2 = (1 - t) * y0 + t * y1
        t = t + 0.01
        //console.log("x0:", x1);

        ctx.drawImage(img, x2, y2);
        if (x2 >= kuan / 2) {
            screenx =  kuan / 2-x2 
//左边距，始终让线条出于中心位置
            canvas.style.left = screenx+"px";
            console.log("screenx:", screenx);
                      console.log("canvas.style.left:", canvas.style.left);

        }
        if (y2 >= gao / 2) {
            screeny =  gao / 2-y2 
//上边距，始终让线条出于中心位置
            canvas.style.top = screeny+"px";
            console.log("screeny:", screeny);
                      console.log("canvas.style.top:", canvas.style.top);

        }
        if (t >= 1) {
            t = 0;
            if (i <= 导航坐标.length - 3) {
                i++;
            } else {
                clearInterval(timeId);
            }
        }
    }, 1000 / 30);
    //console.log("timeId:",timeId);
    return timeId;
}

var Id = img.onload = move();


console.log("Id:", Id);
//用于取消动画效果，需要知道setInterval 的id
return { timeId: Id };