1

我一直在做一个爱好项目，它正在用 HTML5 重建旧的 DOS 游戏 Gotcha。绘图块的部分几乎已经完成（除了一些讨厌的错误），但我现在正在努力的事情是绘制游戏中的微调器。我已经上传了带有多个变形的微调器的屏幕截图。http://www.mvdms.com/gotcha/spinner.png。我的问题是：如何使用 canvas 对象在 HTML5 中重现如此高级的动画？

我到处搜索类似的动画，但我就是找不到。我当前的微调器代码非常简单：

初始化：

    APP.spinnerLines = new Array();

    for(i = 0; i< 12; i++)
    {
        var line = new Line(13,20);
        line.points.push(new Point(i*5,0));

        APP.spinnerLines.push(line);
    }

更新：（每帧）

        for(i in APP.spinnerLines)
        {                       
            var lpX;
            var lpY;

            for(j in APP.spinnerLines[i].points)
            {
                lpX = APP.spinnerLines[i].points[j].x;
                lpY = APP.spinnerLines[i].points[j].y;

                context.moveTo(lpX, lpY);
                if(APP.spinnerLines[i].points[parseInt(j)+1] !== undefined)
                {
                    lpX = APP.spinnerLines[i].points[parseInt(j)+1].x;
                    lpY = APP.spinnerLines[i].points[parseInt(j)+1].y;

                    context.lineTo(lpX, lpY);
                }
            }
        }

稍后在代码中还有一些碰撞检测，但我猜现在这与对象无关；）

那么，有没有人可以帮助我在 HTML5 中绘制这个形状？

我目前的项目状态可在http://www.mvdms.com/gotcha上查看（用箭头键移动）

提前致谢！

4

0 回答 0