I am trying to make a game with where you can control a box with the arrow-keys but i am stuck. I have used this code before and it worked but now i det a error and i dont know how to fix it.
When this code works the player will lagg a lot and i want to make a fluid charactermovement how do i do that?
I would be very grateful if someone could hjempe me with both problems
the code i have so far is
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var farge = ["blue", "darkorchid", "yellowgreen", "violet", "peru", "darkorange", "lightskyblue"];
var tileldig = Math.floor((Math.random() * 300) + 1);
var kuler = [
{r: 10, x: canvas.width/2, y: canvas.height-100, f: "red"},
//{r: 50, x: tileldig, y: 50, vx:0 , vy: 3, f: "green"},
]
var fiender = [
{r: 5, x: tileldig, y: 50, vx:0 , vy: 3, },
]
function bounceCircle () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < kuler.length; i++) {
kuler[i].x += 0;
kuler[i].y += 0;
ctx.fillStyle = kuler[i].f;
ctx.beginPath();
ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2*Math.PI, 0);
ctx.closePath();
ctx.fill();
function tast (e) {
if (e.keyCode == 37) {
kuler[i].x -= 10;
};
if (e.keyCode == 39) {
kuler[i].x += 10;
};
if (e.keyCode == 38) {
kuler[i].y -= 10;
};
if (e.keyCode == 40) {
kuler[i].y += 10;
};
}
document.onkeydown = tast;
};
for (var i = 0; i < fiender.length; i++) {
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(fiender[i].x, fiender[i].y, fiender[i].r, 2*Math.PI, 0);
ctx.closePath();
ctx.fill();
fiender[i].y += fiender[i].vy;
if (fiender.y >= canvas.height) {
circles.splice(i,1)
};
}
requestAnimationFrame(bounceCircle);
}
setInterval(function(){
fiender.push({r: 5, x: Math.floor((Math.random() * 300) + 1), y: 0, vx:0 , vy: 3, f: "green"});
}, 800);
bounceCircle();
to see demo of what i have so far click the link DEMO
thanks
tast() in your version can be called whenever the player presses a key. At that time, the variable i within that function doesn't appear to point to your for loop variable. Execution might not be within that loop at the time tast() is called. You're also redefining the function with every call to bounceCircle(). Probably not good for performance, and not clearly necessary. A switch also makes more sense than the if statements currently used for key presses.
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
farge = ["blue", "darkorchid", "yellowgreen", "violet", "peru", "darkorange",
"lightskyblue"],
tileldig = Math.floor((Math.random() * 300) + 1);
var kuler = [
{r: 10, x: canvas.width/2, y: canvas.height-100, f: "red"},
//{r: 50, x: tileldig, y: 50, vx:0 , vy: 3, f: "green"},
];
var fiender = [
{r: 5, x: tileldig, y: 50, vx:0 , vy: 3, },
];
document.onkeydown = function tast (e) {
switch (e.keyCode) {
case 37:
kuler[0].x -= 10;
break;
case 39:
kuler[0].x += 10;
break;
case 38:
kuler[0].y -= 10;
break;
case 40:
kuler[0].y += 10;
break;
}
};
function bounceCircle () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < kuler.length; i++) {
kuler[i].x += 0;
kuler[i].y += 0;
ctx.fillStyle = kuler[i].f;
ctx.beginPath();
ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2*Math.PI, 0);
ctx.closePath();
ctx.fill();
}
for (var i = 0; i < fiender.length; i++) {
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(fiender[i].x, fiender[i].y, fiender[i].r, 2*Math.PI, 0);
ctx.closePath();
ctx.fill();
fiender[i].y += fiender[i].vy;
if (fiender.y >= canvas.height) {
circles.splice(i,1)
}
}
requestAnimationFrame(bounceCircle);
}
setInterval(function(){
fiender.push({r: 5, x: Math.floor((Math.random() * 300) + 1), y: 0, vx:0 ,
vy: 3, f: "green"});
}, 800);
bounceCircle();
This works (fiddle), although it no longer loops through multiple "kuler"s. It's not clear to me why you need more than one given the example, but this should get you moving in the right direction.
Related
I'm coding an infinite runner game in javascript using the html5 canvas, and it's been going pretty well so far, but I have been getting the jump mechanism in place, and sometimes the player will phase through the platform they land on, which they shouldn't do, as i have code in place to prevent that. By the way, while the player will not be able to phase through the sides of the platforms in the finished game, I have no code in place to prevent it yet. This only happens on the platform one object. Any idea why it is doing this? My code is here-
const canvas = document.getElementById('gameframe')
const ctx = canvas.getContext('2d')
var player = {
y: 250,
x: 250,
w: 30,
h: 30
}
var plat1 = {
x: 250,
y: 350,
w: 250,
h: 300
}
var plat2 = {
x: 50,
y: 400,
w: 250,
h: 300
}
var plat3 = {
x: -200,
y: 375,
w: 250,
h: 300
}
var currentPlat = {
x: 1,
y: 1,
w: 1,
h: 1
}
function renderPlatforms() {
ctx.fillStyle = 'black';
ctx.rect(plat1.x, plat1.y, plat1.w, plat1.h);
ctx.rect(plat2.x, plat2.y, plat2.w, plat2.h);
ctx.rect(plat3.x, plat3.y, plat3.w, plat3.h);
ctx.fill();
plat1.x--;
plat2.x--;
plat3.x--;
if (plat1.x === 0 - plat1.w) {
plat1.x = 500;
}
if (plat2.x === 0 - plat2.w) {
plat2.x = 500;
}
if (plat3.x === 0 - plat3.w) {
plat3.x = 500;
}
}
function renderPlayer() {
ctx.rect(player.x, player.y, player.w, player.h)
ctx.fill();
}
function draw() {
getCurrentPlat();
doGravity();
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);
renderPlayer();
renderPlatforms();
ctx.fill();
setTimeout(draw, 3)
}
draw();
function getCurrentPlat() {
if (player.x + player.w >= plat1.x && player.x <= plat1.x + plat1.w) {
currentPlat.x = plat1.x;
currentPlat.y = plat1.y;
currentPlat.w = plat1.w;
currentPlat.h = plat1.h;
console.log('on platform one')
console.log()
}
if (player.x + player.w >= plat2.x && player.x <= plat2.x + plat2.w) {
currentPlat.x = plat2.x;
currentPlat.y = plat2.y;
currentPlat.w = plat2.w;
currentPlat.h = plat2.h;
}
if (player.x + player.w >= plat3.x && player.x <= plat3.x + plat3.w) {
currentPlat.x = plat3.x;
currentPlat.y = plat3.y;
currentPlat.w = plat3.w;
currentPlat.h = plat3.h;
}
}
function doGravity() {
if (player.y + 30 < currentPlat.y && jumping === false) {
player.y++;
}
}
var cntr = 0
var jumping = false
function jump() {
jumping = true;
if (cntr < 90) {
cntr++;
player.y--;
setTimeout(jump, 2);
} else {
function fls() {
jumping = false;
}
cntr = 0;
setTimeout(fls, 50)
}
}
<!DOCTYPE html>
<html>
<canvas width='500' height='500' id='gameframe' style='border-style: solid;'>Sorry, canvas is not supported for your browser. </canvas>
<button onclick='jump()'>jump</button>
<script src='script.js'></script>
</html>
Not sure if it was intentional but your platforms do overlap...
see it in the sample below
I did improve your code to use an array for the platforms instead of individual items, then we can loop platforms.forEach that should help you reduce the duplicate code, and adding many more platforms in the future will be very easy.
const canvas = document.getElementById('gameframe')
const ctx = canvas.getContext('2d')
var platforms = [
{x: 250, y: 50, w: 250,h: 301},
{x: 50, y: 100, w: 250,h: 302},
{x: -200, y: 75, w: 250,h: 303}
]
function renderPlatforms() {
platforms.forEach(function(p) {
ctx.beginPath();
ctx.rect(p.x, p.y, p.w, p.h);
ctx.fillText(p.x, p.x +5, p.y-5);
ctx.fillText(p.w + " / " +p.h, p.x +5, p.y+20);
ctx.stroke();
if (p.x-- === 0 - p.w) p.x = canvas.width;
})
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
renderPlatforms();
setTimeout(draw, 10)
}
draw();
<canvas width='500' height='150' id='gameframe' style='border-style: solid;'></canvas>
If you are going to overlap the platforms like that you have to change your logic and check if the player collides with any of the platforms your approach to only check against one (a current platform) is creating problems.
When troubleshooting games I find ctx.fillText() more helpful than the console.log() you can show on screen the values of the objects also quite often slowing down the game helps you see if the values really change when you expect them too change.
I am currently coding a website where, upon clicking a navigation link, HTML canvas draws a line to the relevant content box (I used markE's brilliant answer here https://stackoverflow.com/a/23941786 as a tutorial for the animation). I am in the process of animating these lines and I am running into the following issue / question:
How do I stop the first animation from completing when another link is clicked?
I have tried both creating a flag and cancelAnimationFrame in several iterations, to no joy.
Here's some simplified code, currently utilising a flag:
HTML
<div class="container">
<nav>
<ul>
<li>
About
</li>
<li>
Work
</li>
</ul>
</nav>
</div>
<canvas id="canvas" width="500" height="500"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var isRunning = false;
function draw(contentId) {
if (isRunning) return;
isRunning = true;
var t = 1;
var vertices = [];
function calcWaypoints(vertices) {
var waypoints = [];
for (var i = 1; i < vertices.length; i++) {
var pt0 = vertices[i - 1];
var pt1 = vertices[i];
var dx = pt1.x - pt0.x;
var dy = pt1.y - pt0.y;
for (var j = 0; j < 100; j++) {
var x = pt0.x + dx * j / 100;
var y = pt0.y + dy * j / 100;
waypoints.push({
x: x,
y: y
});
}
}
return (waypoints);
}
function animate() {
if (t < points.length - 1) {
window.requestAnimationFrame(animate);
}
ctx.beginPath();
ctx.moveTo(points[t - 1].x, points[t - 1].y);
ctx.lineTo(points[t].x, points[t].y);
ctx.stroke();
t++;
isRunning = false;
}
// Clear the canvas before drawing
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Assign coordinates
if (contentId == 'about') {
vertices.push({x: 50, y: 0}, {x: 50, y: 50});
vertices.push({x: 40, y: 60}, {x: 0, y: 60});
// Animate lines
ctx.lineCap = "round";
ctx.lineWidth = border;
ctx.strokeStyle = "green";
var points = calcWaypoints(vertices);
animate(points);
}
if (contentId == 'contact') {
vertices.push({x: 150, y: 0}, {x: 150, y: 50});
vertices.push({x: 160, y: 60}, {x: 300, y: 60});
vertices.push({x: 300, y: 70}, {x: 310, y: 70});
ctx.lineCap = "round";
ctx.lineWidth = border;
ctx.strokeStyle = "green";
var points = calcWaypoints(vertices);
animate(points);
}
}
Just to reiterate, in case I was unclear: when I've clicked on 'about' and then straight away click on 'contact', I would like the draw animation that was initialized when I first clicked on 'about' to completely stop (including clearing the canvas) and the 'contact' animation to start instead. At the moment, the 'contact' animation does start, but the 'about' animation insists on finishing as well. The same thing happens when I click on 'about' twice - the animation runs twice, simultaneously...
In case it helps anyone, I managed to solve it (there were some errors in logic and cancelAnimationFrame ended up doing what I needed rather than using a flag):
HTML
<div class="container">
<nav>
<ul>
<li>
About
</li>
<li>
Work
</li>
</ul>
</nav>
</div>
<canvas id="canvas" width="500" height="500"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var requestId;
function checkDraw(contentId) {
stopAnimation();
draw(contentId);
}
function stopAnimation(e) {
cancelAnimationFrame(requestId);
}
function draw(contentId) {
currentID = contentId;
var t = 1;
var vertices = [];
function calcWaypoints(vertices) {
var waypoints = [];
for (var i = 1; i < vertices.length; i++) {
var pt0 = vertices[i - 1];
var pt1 = vertices[i];
var dx = pt1.x - pt0.x;
var dy = pt1.y - pt0.y;
for (var j = 0; j < 100; j++) {
var x = pt0.x + dx * j / 100;
var y = pt0.y + dy * j / 100;
waypoints.push({
x: x,
y: y
});
}
}
return (waypoints);
}
function animate() {
if (t < points.length - 1) {
requestId = requestAnimationFrame(animate);
}
ctx.beginPath();
ctx.moveTo(points[t - 1].x, points[t - 1].y);
ctx.lineTo(points[t].x, points[t].y);
ctx.stroke();
t++;
}
// Clear the canvas before drawing
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Assign coordinates
if (contentId == 'about') {
vertices.push({x: 50, y: 0}, {x: 50, y: 50});
vertices.push({x: 40, y: 60}, {x: 0, y: 60});
// Animate lines
ctx.lineCap = "round";
ctx.lineWidth = border;
ctx.strokeStyle = "green";
var points = calcWaypoints(vertices);
animate(points);
}
if (contentId == 'contact') {
vertices.push({x: 150, y: 0}, {x: 150, y: 50});
vertices.push({x: 160, y: 60}, {x: 300, y: 60});
vertices.push({x: 300, y: 70}, {x: 310, y: 70});
ctx.lineCap = "round";
ctx.lineWidth = border;
ctx.strokeStyle = "green";
var points = calcWaypoints(vertices);
animate(points);
}
}
I hope this makes sense!
I am currently using a piece of code that I have found online for drawing a diagram by a set of angles and lengths, the problem I am having is constructing the array on the fly.
The array that works fine is this
arr = [
{ angle: 0, h: 100 },
{ angle: 45, h: 100 },
{ angle: 90, h: 300 },
{ angle: 135, h: 100 },
{ angle: 180, h: 100 }
];
but I am struggling with the syntax to insert the information into an array to match this format, here is what I have so far but this causes me an error which I am not sure.
for( var i = 1; i < 42;i++) {
arr[i].angle = document.getElementById("1m2mangle"+i).value;
arr[i].h = document.getElementById("1m2mlength"+i).value};
}
Any suggestions would be much appreciated, here is the code for drawing the lines from the input array.
ctx.moveTo(pos.x, pos.y);
pos = getAngle(ctx, pos.x, pos.y, arr[i].angle, arr[i].h);
ctx.lineTo(pos.x, pos.y);
Thanks
--Revised Function --
function draw<%response.write(counter1)%>() {
var arr = [];
for( var i = 1; i < 42;) {
alert(document.getElementById("<%response.write(counter1)%>m2mangle"+i)).value);
arr.push({
angle: document.getElementById("<%response.write(counter1)%>m2mangle1").value, h: document.getElementById("<%response.write(counter1)%>m2mlength1").value});
i++;
}
var canvas = document.getElementById('curtainCanvas<%response.write(counter1)%>');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.font = "20px Georgia";
var pos = { x: 15, y: 15 };
ctx.fillText(1,10,10);
for (var i = 0; i < arr.length; i++) {
// alert(pos.x);
ctx.moveTo(pos.x, pos.y);
pos = getAngle(ctx, pos.x, pos.y, arr[i].angle, arr[i].h);
ctx.lineTo(pos.x, pos.y);
ctx.fillText(i+2,pos.x, pos.y);
}
ctx.stroke();
}
}
This is how it's done with JS:
for( var i = 1; i < 42;i++) {
arr.push({
angle: document.getElementById("1m2mangle"+i).value,
h: document.getElementById("1m2mlength"+i).value
});
}
WE're basically pushing a new object into the end of the array, which is the structure you need in your case.
I have made a program that is supposed to make several balls move along a path. So far, I have only been able to make one ball successfully traverse the course because whenever I add another ball (from the array of balls) it begins to flicker and spasmodically disappears. I would appreciate any assistance in solving this problem.
JS bin
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="Circuit" width="500" height="320"></canvas>
<script>
var dad = [];
var canvas = document.getElementById("Circuit");
var ctx = canvas.getContext("2d");
var bool = false;
var dx1 = 2;
var dx2 = -2;
var dy1 = 0;
var dy2 = 2;
var memes = [{
x: 0,
y: 100,
}, {
x: 0,
y: 100,
}, {
x: 0,
y: 100,
}, {
x: 0,
y: 100,
}];
function drawCircle(index) {
ctx.beginPath();
ctx.arc(memes[index].x, memes[index].y, 10, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw(index) {
if (index == 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
if (memes[index].x < 490 && memes[index].y < 291 && !bool) {
drawCircle(index);
memes[index].x += dx1;
memes[index].y += dy1;
}
else if (memes[index].x == 490) {
drawCircle(index);
memes[index].x += 1;
}
else if (memes[index].x > 490 && memes[index].y < 291) {
drawCircle(index);
memes[index].y += dy2;
}
else if (memes[index].y == 291) {
drawCircle(index);
memes[index].y += 1;
}
else if (memes[index].y > 291 && memes[index].x > 2) {
drawCircle(index);
bool = true;
memes[index].x -= 2;
}
else if (memes[index].x == 2 && memes[index].y > 291) {
drawCircle(index);
memes[index].x -= 1;
}
else if (memes[index].x < 2) {
drawCircle(index);
memes[index].y -= dy2;
if (memes[index].y < 100) {
clearInterval(dad[index]);
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
ctx.strokeStyle = "red";
ctx.strokeRect(2, 101, 490, 190);
ctx.strokeStyle = "blue";
ctx.strokeRect(2, 82, 40, 40);
}
setTimeout(function() {
setTimeout(function() {
dad[1] = setInterval(function() {
draw(1);
}, 20);
}, 1000);
dad[0] = setInterval(function() {
draw(0);
}, 20);
}, 1000);
</script>
</body>
</html>
The flicker happens when the second ball tries to render the frame. You have two sprites (animating things) clearing and drawing the frame. You also have multiple timers and when animating you usually want a nextFrame function that handles movement of the sprites and drawing the frame.
The sprites array is a list of things that need to be moved and drawn. I added some properties to the meme sprites so you can see that their state needs to be internal like with the "bool" value. Without that you end up effecting the other balls. You'll need to figure out how to remove sprites when they're no longer in play.
var dad = [];
var canvas = document.getElementById("Circuit");
var ctx = canvas.getContext("2d");
var bool = false;
var dx1 = 2;
var dx2 = -2;
var dy1 = 0;
var dy2 = 2;
var memes = [{
x: 0,
y: 100,
color: "#0095DD",
draw: drawMeme,
move: moveMeme,
vx: 1.2,
vy: 1.5,
}, {
x: 0,
y: 100,
vx: 1.5,
vy: 1,
color: "#DD9500",
draw: drawMeme,
move: moveMeme
}, {
x: 0,
y: 100,
vx: 2,
vy: 1,
color: "#FF0000",
draw: drawMeme,
move: moveMeme
}, {
x: 0,
y: 100,
vx: 3,
vy: 2,
color: "#009999",
draw: drawMeme,
move: moveMeme
}];
function drawMeme(meme) {
ctx.beginPath();
ctx.arc(meme.x, meme.y, 10, 0, Math.PI * 2);
ctx.fillStyle = meme.color;
ctx.fill();
ctx.closePath();
}
var sprites = [];
function nextFrame () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var len = sprites.length;
for (var i = 0; i < len; i++) {
var sprite = sprites[i];
sprite.move(sprite);
sprite.draw(sprite);
}
ctx.strokeStyle = "red";
ctx.strokeRect(2, 101, 490, 190);
ctx.strokeStyle = "blue";
ctx.strokeRect(2, 82, 40, 40);
requestAnimationFrame(nextFrame);
}
function moveMeme(meme) {
if (meme.x < 490 && meme.y < 291 && !meme.bool) {
meme.x += dx1 * meme.vx;
meme.y += dy1 * meme.vy;
}
else if (meme.x == 490) {
meme.x += 1 * meme.vx;
}
else if (meme.x > 490 && meme.y < 291) {
meme.y += dy2 * meme.vy;
}
else if (meme.y == 291) {
meme.y += 1 * meme.vy;
}
else if (meme.y > 291 && meme.x > 2) {
meme.bool = true;
meme.x -= 2 * meme.vx;
}
else if (meme.x == 2 && meme.y > 291) {
meme.x -= 1 * meme.vx;
}
else if (meme.x < 2) {
meme.y -= dy2 * meme.vy;
if (meme.y < 100) {
// stop drawing this sprite
meme.draw = function(){};
meme.delete = 1; // for a cleanup function
}
}
}
nextFrame();
function startMeme(index) {
var meme = memes[index];
sprites.push(meme);
}
setTimeout(function() {
setTimeout(function() {
startMeme(1);
}, 1000);
startMeme(0);
startMeme(2);
startMeme(3);
}, 1000);
<canvas id="Circuit" width="500" height="320"></canvas>
My problem is that I have no idea how to implement group of objects, in my situation, group of rectangles moving all at the same time. Well, I implemented easily moving one rectangle with specific direction which you can see below from my code. Also I tried to add an array with group of rectangles. So again my question is how to implement group of rectangles (3 rows 3 columns, 9 of them, for instance) to move the same way how my one rectangle is moving in the code below????? So basically very right side of group and very left side of the group will hit the border while column in the middle of 3X3 will stay moving between two columns of 3X3.....Any help will appreciated. Thank you...
<html>
<head>
<title>Spaceman Invaders</title>
<script>
window.onload = function() {
var canvas = document.getElementById("screen");
context = canvas.getContext("2d");
context.fillStyle="black";
context.fillRect(0,0,canvas.width, canvas.height);
context.fillStyle = "red";
context.fillRect(30, 100, 20 , 20);
var posx = 27;
var posy = 100;
var go_right = true;
var go_down = false;
if (canvas.getContext) {
/* var array = [];
array.push(new Shape(20, 0, 50, 50, "red"));
array.push(new Shape(20, 60, 50, 50, "red"));
array.push(new Shape(20, 120, 50, 50, "red"));
array.push(new Shape(80, 0, 50, 50, "red"));
array.push(new Shape(80, 60, 50, 50, "red"));
array.push(new Shape(80, 120, 50, 50, "red"));
array.push(new Shape(140, 0, 50, 50, "red"));
array.push(new Shape(140, 60, 50, 50, "red"));
array.push(new Shape(140, 120, 50, 50, "red"));*/
setInterval( function() {
if (!go_down) {
if(posx < 250 && go_right) {
posx += 3;
} else if(posx < 30) {
go_right = true;
go_down = true;
} else if(!go_right) {
posx -= 3;
}else {
go_right = false;
go_down = true;
}
} else {
//if(posy <= 30)
posy += 5;
go_down = false;
}
context.fillStyle="black";
context.fillRect(0,0,canvas.width, canvas.height);
context.fillStyle = "red";
context.beginPath();
context.fillRect(posx, posy, 20 , 20);
context.fill();
}
, 20);
}
</script>
</head>
<body>
<canvas id="screen" width="300" height="500"/>
</body>
</html>
You will have to store the x,y position of each rectangle. You may create an new class for this. I've made you an example:
var Alien = function(x, y) {
this.x = x;
this.y = y;
this.posx = 30 + x*30;
this.posy = 90 + y*30;
this.go_right = true;
this.go_down = false;
this.perrow = 3;
}
Alien.prototype.move = function() {
if (!this.go_down) {
if(this.posx + (this.perrow-1-this.x) * 30 < 250 && this.go_right) {
this.posx += 3;
} else if(this.posx < 30 + this.x*30) {
this.go_right = true;
this.go_down = true;
} else if(!this.go_right) {
this.posx -= 3;
} else {
this.go_right = false;
this.go_down = true;
}
} else {
//if(posy <= 30)
this.posy += 30;
this.go_down = false;
}
}
Alien.prototype.draw = function(context) {
if(this.x == 0) {
context.fillStyle = "red";
} else if(this.x == 1) {
context.fillStyle = "yellow";
} else {
context.fillStyle = "blue";
}
context.beginPath();
context.fillRect(this.posx, this.posy, 20 , 20);
context.fill();
}
Then you can update the position and draw each object separately in a loop inside of your intervall callback.
EDIT:
Now the objects move downwards all at once.
You can test it here:
http://jsfiddle.net/Z6F4d/3/