Question

我正在开发一个非常小的JavaScript项目，只是为了帮助我从下到上理解画布。我现在正试图避免使用框架等，这样我才能理解HTML5游戏的基本功能。

这是一个相当基本的“光标移动器”，尾部褪色。而已。只是一种颜色的形状，根据玩家输入移动，尾部褪色。我建议你试一试;它真的很漂亮。

无论如何，显然我更喜欢光标是圆形，因为它看起来更平滑。但是，每当我这样做时，浏览器几乎完全锁定了我。它显然有效，至少在很大程度上，但它比通过冷冻花生酱的乌龟慢。

我知道我不应该包含只是 JSFiddle，但是它有很多代码，整个过程运行缓慢。

问题很可能出在绘图功能中：

Game.draw = function() {
    for (var sn = 0; sn < this.strokes.length; sn++) {
        var s = this.strokes[sn];
/*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
        this.context.fillStyle = this.bgColor;
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   //this.context.fill();
        this.context.fillStyle = s.getColor();
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
    }
};

线条用方法标记。 1对应于圆圈，而2对应于矩形。

以下是整个项目：http://jsfiddle.net/w4Rg3/3/

我只是觉得很难相信让圈子变得非常慢得多（在看到JS 可以做的所有项目之后），以及我可能做错了什么。

Answer 1

只是几个观察（哦，不！绘制圆圈与正方形相比不是'效率低'，当然速度慢 - 但仍然很快）不幸的是，你的问题运行得更深......

您似乎需要重新考虑计划实施游戏的方式。就像你如此简洁地说它一样，比通过冷冻花生酱的乌龟慢。（呵呵，妮茜！）

我怀疑这与您设置请求动画帧的方式有关，但实际上无法进行调试而不用担心我的笔记本电脑会融化并散发出神奇的蓝色烟雾。

我从副本中修剪了所有js，但Key变量和2次调用除了为keyup和keydown添加事件监听器之外。这给我留下了以下内容：

<!DOCTYPE HTML>
<html>
<head>
<title>flowing</title>
<script>

var Key = 
{
    _pressed: {},

    SPACE: 32,
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,

    isDown: function(keyCode) {
        return this._pressed[keyCode];
    },

    onKeydown: function(event) {
        this._pressed[event.keyCode] = true;
        console.log(this._pressed[event.keyCode]);
    },

    onKeyup: function(event) {
        delete this._pressed[event.keyCode];
        console.log(this._pressed[event.keyCode]);
    }
};
window.addEventListener('keyup', Key.onKeyup, false);
window.addEventListener('keydown', Key.onKeydown, false);

</script>
<style>
</style>
</head>
 <!-- canvas gets inserted here by js -->
<body >
</body>    
</html>

炸弹，大时间！

你知道，事情就是 - 当你附加这样的事件监听器时，无论你何时进入处理程序，'this'关键字实际上都对应于触发事件的HTML元素。那么，这究竟意味着什么？

其中的3个功能可以扩展为：

return window._pressed [keyCode];
window._pressed [event.keyCode] = true;
删除window._pressed [event.keyCode];

唯一的问题是，窗口对象没有_pressed变量..变量Key，确实如此。

您应该打开您正在使用的任何浏览器的开发人员工具控制台。在Chrome，FF和Opera中它是Ctrl-Shift-I，在IE中它是F12。

这会立即突出显示此错误。

我会看到我是否找不到冰山，所以我可以继续测试，而不必担心购买新的lappy。

[编辑：] Game.draw的新代码

Game.draw = function() 
{
    for (var sn = 0; sn < this.strokes.length; sn++) 
    {
        var s = this.strokes[sn]; /*1*/
        this.context.beginPath();
        this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
        this.context.fillStyle = s.getColor(); //.bgColor; /*2*/
        this.context.closePath();
        this.context.fill();
    }
};

绘制弧线涉及一条路径。要正确使用路径，您需要在开始定义路径时告诉canvas元素，并在完成定义路径时再次告诉canvas元素。我猜浏览器最终只是以“所有路径的母亲”结束，这自然而然地被永远吸引了。当然，你的路径很简单，只是简单的圆圈。随着画布的状态机按照我们的意图正确更新，无论我们绘制圆形还是方形，代码在响应性方面似乎没有什么不同。希望这是你问题的根源。：）

Answer 2

大家好！我发现了这个问题！它与我的游戏结构或任何特别挑剔的东西无关。只是一个API问题！

问题确实存在于第一篇文章中我的问题的代码示例中。

Game.draw = function() {
    for (var sn = 0; sn < this.strokes.length; sn++) {
        var s = this.strokes[sn];
/*1*/   this.context.beginPath();  /*THIS IS FIXED*/
/*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
/*1*/   this.context.closePath();  /*THIS IS FIXED*/
        this.context.fillStyle = this.bgColor;
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
        this.context.fillStyle = s.getColor();
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
    }
};

我确保用“这是固定的”评论标记我添加的行。我认为它之前只是创造了一个真正的，非常长的弧并且一遍又一遍地绘制它，但谁知道呢？无论如何，问题解决了，它看起来很漂亮。

与矩形相比，画圈真的是效率低吗？

2 个答案: