Gigiux
Coder
Hello,
I am trying to understand the use of the function
I also understand that `setInterval`does do not take arguments easily. Thus, the arguments for these functions should be set as global arguments.
For
However, nothing of this work. In fact, not even the grid is drawn.
This is the code I wrote (also attached for convenience):
I am trying to understand the use of the function
setInterval by drawing a Pacman that opens and closes its mouth. I understand that I can launch only one function from setInterval, and this function has to be a wrapper that launches other functions. I set a wrapper drawPac that launches draw_grid (draw a grid in the context) and draw_pacman that overlaps a Pacman to the grid.I also understand that `setInterval`does do not take arguments easily. Thus, the arguments for these functions should be set as global arguments.
draw_grid takes the context; the rest is assigned by default within the function itself.For
draw_pacman, I tried to draw the opening and closing of the mouth by setting an aperture variable (mouth) that starts at 0.2 and that is then decreased by a constant value (0.01) according to the variable increaser. increaser is initially set to -1, so that inside draw_pacman the variable mouth will be adjusted to 0.2 * -1 * 0.001 = 0.199. The updated variable is passed to the function opener that checks if mouth equals 0. Since it is not, at the next iteration, the mouth will become 0.198, and so forth. When mouth will equal 0, increaser will be set to 1, starting to increase the value of mouth. When mouth gets the value of 0.2 again, increaser will return to the value of -1, starting to close the mouth.However, nothing of this work. In fact, not even the grid is drawn.
- What is the correct syntax to launch functions from setInterval?
- How should the flux of parameters pass from one function to the next inside setInterval?
This is the code I wrote (also attached for convenience):
HTML:
<!doctype html>
<html>
<head>
<title>PacMan</title>
<link rel="stylesheet" href="styles.css">
<script src="pacman.js"></script>
</head>
<body>
<h1>Animated PacMan</h1>
<canvas id="grid" width="400" height="400"></canvas>
<script>
var context = document.getElementById("grid").getContext("2d");
var increaser = -1; // increment for mouth angle
var mouth = 0.2; // mouth angle
var dim = 100; // dimension of head
var x = context.canvas.width/2; // x position of head
var y = context.canvas.height/2; // y position of head
var z = 0.8;
context.strokeStyle = "white";
context.lineWidth = 1.5;
setInterval(drawPac, 1000.0/60.0);
</script>
</body>
</html>
JavaScript:
function draw_pacman(ctx, x_pos, y_pos, radius, opening) {
angle = opening*Math.PI;
ctx.save();
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.arc(x_pos, y_pos, radius, angle, -angle);
ctx.lineTo(x_pos, y_pos);
ctx.fill();
ctx.stroke();
ctx.restore();
}
function opener(startAngle, increaser) {
endAngle += startAngle+(increaser*0.01);
if (x == 0) {
increaser=1 ;
} else if (x == 0.2) {
increaser=-1 ;
}
}
function drawPac() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
draw_grid(context);
draw_pacman(context, x, y, dim, mouth);
mouth = opener(mouth);
update();
}
function draw_grid(ctx, minor, major, stroke, fill) {
minor = minor || 10;
major = major || minor * 5;
stroke = stroke || "#00FF00";
fill = fill || "#009900";
ctx.save();
ctx.strokeStyle = stroke;
ctx.fillStyle = fill;
for(var x = 0; x < ctx.canvas.width; x += minor) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, ctx.canvas.height);
ctx.lineWidth = (x % major == 0) ? 0.5 : 0.25;
ctx.stroke();
}
for(var y = 0; y < ctx.canvas.height; y += minor) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(ctx.canvas.width, y);
ctx.lineWidth = (y % major == 0) ? 0.5 : 0.25;
ctx.stroke();
}
ctx.restore();
}
function update(x) {
x = += x;
}
Last edited by a moderator:
