来自纯javascript的Paper.js
我正试图用paper.js制作一个游戏，但有些东西不起作用，所以我简化了一些事情，并。。不再工作了 我曾尝试使用paper.js和已经创建的名称空间paperscript进行制作，但调试太困难，所以我尝试使用 即使使用超级简单的代码在浏览器中移动球。。它不起作用 这是我的密码：来自纯javascript的Paper.js,javascript,canvas,Javascript,Canvas,我正试图用paper.js制作一个游戏，但有些东西不起作用，所以我简化了一些事情，并。。不再工作了 我曾尝试使用paper.js和已经创建的名称空间paperscript进行制作，但调试太困难，所以我尝试使用 即使使用超级简单的代码在浏览器中移动球。。它不起作用 这是我的密码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bouncing ball</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../lib/paper.js"></script>
<script type="text/javascript">
var ball;
function game(_view) {
console.log("game!");
ball = new Ball();
this.view = _view;
console.log(ball);
}
paper.install(window);
window.onload = function() {
var canvas = document.getElementById('canvas');
paper.setup(canvas);
view.onFrame = onFrame;
game(view);
}
var Ball = Base.extend({
initialize: function() {
this.position = new Point(100, 100);
this.velocity = new Point(3, 0);
this.path = new Path.Circle(location, 25);
this.path.strokeColor = 'black';
this.path.fillColor = 'black';
},
iterate: function() {
this.position += this.velocity;
this.path.position = this.position;
return this;
}
});
function onFrame(event) {
ball.iterate();
//console.log(ball);
};
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
setOnFrame: function(onFrame) {
this._onFrame = onFrame;
if (!onFrame) {
delete this._onFrameCallback;
return;
}
var that = this,
requested = false,
before,
time = 0,
count = 0;
this._onFrameCallback = function(param, dontRequest) {
requested = false;
if (!that._onFrame)
return;
paper = that._scope;
requested = true;
if (!dontRequest) {
DomEvent.requestAnimationFrame(that._onFrameCallback,
that._canvas);
}
var now = Date.now() / 1000,
delta = before ? now - before : 0;
that._onFrame(Base.merge({
delta: delta,
time: time += delta,
count: count++
}));
before = now;
that.draw(true);
};
if (!requested)
this._onFrameCallback(); //here your onFrame function is called
},
setOnFrame: function(onFrame) {
this._onFrame = onFrame;
if (!onFrame) {
delete this._onFrameCallback;
return;
}
var that = this,
requested = false,
before,
time = 0,
count = 0;
this._onFrameCallback = function(param, dontRequest) {
requested = false;
if (!that._onFrame)
return;
paper = that._scope;
requested = true;
if (!dontRequest) {
DomEvent.requestAnimationFrame(that._onFrameCallback,
that._canvas);
}
var now = Date.now() / 1000,
delta = before ? now - before : 0;
that._onFrame(Base.merge({
delta: delta,
time: time += delta,
count: count++
}));
before = now;
that.draw(true);
};
if (!requested)
this._onFrameCallback(); //here your onFrame function is called
},
如果查看并确保在开发工具中设置了break-on异常，则可以看到堆栈。然后，解决方案是在分配处理程序之前初始化ball。只有一个可能的原因，调用onFrame时ball尚未定义。创建ball后指定onFrame，或者在onFrame内选中ball。只有一个可能的原因，即调用onFrame时尚未定义ball。在创建ball之后指定onFrame，或者在onFrame中选中ball。我创建了一个库来处理这个问题。它还处理动画。下面是使用folio.js的示例
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]-->
<head>
<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<title>Ball</title>
<script type="text/javascript" src="paper-core.js"></script>
<script type="text/javascript" src="paper.folio.js"></script>
<script type="text/javascript">
// ------------------------------------------------------------------------
// Properties
// ------------------------------------------------------------------------
// the core folio namespace
var f = folio;
// define ball variable
var ball;
// ------------------------------------------------------------------------
// Setup
// ------------------------------------------------------------------------
function Setup() {
ball = new Ball();
};
// ------------------------------------------------------------------------
// Update
// ------------------------------------------------------------------------
/*
* Update() is called every frame
*/
function Update(event) {
ball.iterate();
};
// ------------------------------------------------------------------------
// Draw
// ------------------------------------------------------------------------
function Draw() {
};
// ------------------------------------------------------------------------
// Classes
// ------------------------------------------------------------------------
var Ball = Base.extend({
initialize: function() {
this.position = new Point(100, 100);
this.velocity = new Point(3, 0);
this.path = new Path.Circle(this.position, 25);
this.path.strokeColor = 'black';
this.path.fillColor = 'black';
},
iterate: function() {
this.path.position.x += this.velocity.x;
this.path.position.y += this.velocity.y;
return this;
}
});
</script>
<meta http-equiv="x-dns-prefetch-control" content="off"/>
</head>
<body>
<canvas resize="true" id="canvas"></canvas>
</body>
</html>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]-->
<head>
<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<title>Ball</title>
<script type="text/javascript" src="paper-core.js"></script>
<script type="text/javascript" src="paper.folio.js"></script>
<script type="text/javascript">
// ------------------------------------------------------------------------
// Properties
// ------------------------------------------------------------------------
// the core folio namespace
var f = folio;
// define ball variable
var ball;
// ------------------------------------------------------------------------
// Setup
// ------------------------------------------------------------------------
function Setup() {
ball = new Ball();
};
// ------------------------------------------------------------------------
// Update
// ------------------------------------------------------------------------
/*
* Update() is called every frame
*/
function Update(event) {
ball.iterate();
};
// ------------------------------------------------------------------------
// Draw
// ------------------------------------------------------------------------
function Draw() {
};
// ------------------------------------------------------------------------
// Classes
// ------------------------------------------------------------------------
var Ball = Base.extend({
initialize: function() {
this.position = new Point(100, 100);
this.velocity = new Point(3, 0);
this.path = new Path.Circle(this.position, 25);
this.path.strokeColor = 'black';
this.path.fillColor = 'black';
},
iterate: function() {
this.path.position.x += this.velocity.x;
this.path.position.y += this.velocity.y;
return this;
}
});
</script>
<meta http-equiv="x-dns-prefetch-control" content="off"/>
</head>
<body>
<canvas resize="true" id="canvas"></canvas>
</body>
</html>
??? 是的，ball是ball的一个例子。。变量ball lowercase是脚本的第一行..通过进一步的研究对其进行了更新。好吧。感谢您审阅答案。现在我不明白的是：在你的jfiddle中，如果我评论ball.iterate，和我在chrome上的本地示例中一样；但是取消注释console.logball；控制台向我显示一个对象，该对象在_proto__________________________内具有迭代为函数。为什么？为什么没有正确调用它？如果我在处理程序赋值之前尝试初始化处理程序，那么。。没有其他例外，但球根本没有移动。你是在速度上加上位置，而不是单独加上位置。？？？是的，ball是ball的一个例子。。变量ball lowercase是脚本的第一行..通过进一步的研究对其进行了更新。好吧。感谢您审阅答案。现在我不明白的是：在你的jfiddle中，如果我评论ball.iterate，和我在chrome上的本地示例中一样；但是取消注释console.logball；控制台向我显示一个对象，该对象在_proto__________________________内具有迭代为函数。为什么？为什么没有正确调用它？如果我在处理程序赋值之前尝试初始化处理程序，那么。。没有其他例外，但球根本没有移动。你将位置添加到速度中，而不是单独添加位置。