在Wordpress网站中包含Processing.js草图

时间:2017-03-06 19:48:17

标签: javascript jquery ajax wordpress processing.js

我试图在Wordpress网站中加入Processing.js游戏。我使用Ajax调用从Rawgit获取草图,但是当我预览页面时,它只显示一个空白的画布。这是我的代码的示例版本(现在它用于加载绘制红色椭圆的草图):

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='https://rawgit.com/Larpee/The-Khan-Quiz/master/style.css' type="text/css"/>
</head>
<body>
    <div id="title">Page Name</div>
        <div id="game-window"><h5 id="game-title">Game name</h5>
        <canvas id="game"></canvas>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

$.get("https://rawgit.com/Larpee/The-Khan-Quiz/master/test.txt", function (game) {
    var sketchProc = function (processingInstance) {
        with (processingInstance) {
            size(400, 400);
            frameRate(30);
            eval(game);
        }
    };

    var canvas = document.getElementById("game");
    var processingInstance = new Processing(canvas, sketchProc);
});

</script>
</html>

您可以尝试使用以下链接查看游戏代码:https://www.khanacademy.org/computer-programming/the-khan-quiz/6282341959729152

有谁知道为什么这不起作用?先谢谢

0 个答案:

没有答案