[英]Accessing ith array within a javascript object
I'm following a book with the following code, I can't seem to make the lines between the circles show up. 我正在看一本书,并附有以下代码,但似乎无法使圆圈之间的线条显示出来。 It seems to be because if I do 好像是因为
drawLine(context, 1, 1, 100, 100, 3);
it works, however if I do: 它有效,但是如果我这样做:
drawLine(context, untangleGame.circles[1].x, 1, 100, 100, 3);
It wont work. 它不会工作。 So my question is how do I access that value. 所以我的问题是我如何获得该价值。 This is an example from a book which used jQuery for this. 这是一本书的示例,该书为此使用了jQuery。
It is for this bit of code, which draws a line from the first circle to every other circle, it then iterates over the other circles: 这是这段代码,它从第一个圆到另一个圆画一条线,然后在其他圆上进行迭代:
for (var i = 0; i < untangleGame.circles.length; i++) {
var startPoint = untangleGame.circles[i];
for (var j = 0; j < i; j++) {
var endPoint = untangleGame.circles[j];
drawLine(context, startPoint.x, startPoint.y, endPoint.x, endPoint.y, 1);
untangleGame.lines.push(new Line(startPoint, endpoint,
untangleGame.thinLineThickness));
}
}
I have the example here: 我这里有一个例子:
http://jsfiddle.net/5wdjpryo/ http://jsfiddle.net/5wdjpryo/
The game I'm trying to follow is called untangle. 我要关注的游戏称为解开。
you need to initialize your untangleGame object, see this update http://jsfiddle.net/5wdjpryo/1/ Basically add var c = new Circle(x, y); untangleGame.circles.push(c);
您需要初始化untangleGame对象,请参阅此更新http://jsfiddle.net/5wdjpryo/1/基本上添加var c = new Circle(x, y); untangleGame.circles.push(c);
var c = new Circle(x, y); untangleGame.circles.push(c);
when you draw circles. 当您画圆时。
var canvas = document.getElementById('game');
// canvas height and width:
var width = canvas.width;
var height = canvas.height;
function Circle(x, y, radius) {
this.x = x;
this.y = y;
}
var context = canvas.getContext && canvas.getContext('2d');
function drawCircle(context, x, y, radius) {
context.fillStyle = 'green';
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
drawCircle(context, 100, 100, 10);
// draw random 5 circles:
var circleRadius = 10;
var circlesCount = 5;
// the game object:
var untangleGame = {
circles: [],
thinLineThickness: 1,
lines: []
};
for (var i = 0; i < circlesCount; i++) {
var x = Math.random() * width;
var y = Math.random() * height;
var c = new Circle(x, y);
untangleGame.circles.push(c);
drawCircle(context, x, y, 10);
}
// drawing line and line object:
function Line(startPoint, endpoint, thickness) {
this.startPoint = startPoint;
this.endPoint = endPoint;
this.thickness = thickness;
}
function drawLine(context, x1, y1, x2, y2, thickness) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = thickness;
context.strokeStyle = "#cfc";
context.stroke();
}
// checking that drawLine works
drawLine(context, 1, 1, 100, 100, 3);
for (var i = 0; i < untangleGame.circles.length; i++) {
var startPoint = untangleGame.circles[i];
for (var j = 0; j < i; j++) {
var endPoint = untangleGame.circles[j];
drawLine(context, startPoint.x, startPoint.y, endPoint.x, endPoint.y, 1);
untangleGame.lines.push(new Line(startPoint, endPoint,
untangleGame.thinLineThickness));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.