Javascript 在画布中同时移动一组对象
我的问题是，我不知道如何实现一组对象，在我的情况下，一组矩形同时移动。我实现了简单地移动一个具有特定方向的矩形，您可以从下面的代码中看到。我还尝试添加一个包含一组矩形的数组。所以我的问题是，如何实现一组矩形，3行3列，其中9列，例如，以与下面代码中我的一个矩形相同的方式移动？？？？？所以基本上非常右边的组和非常左边的组将击中边界，而列在中间的3x3将保持移动之间的两列3x3……任何帮助都会感激。谢谢你Javascript 在画布中同时移动一组对象,javascript,object,canvas,Javascript,Object,Canvas,我的问题是，我不知道如何实现一组对象，在我的情况下，一组矩形同时移动。我实现了简单地移动一个具有特定方向的矩形，您可以从下面的代码中看到。我还尝试添加一个包含一组矩形的数组。所以我的问题是，如何实现一组矩形，3行3列，其中9列，例如，以与下面代码中我的一个矩形相同的方式移动？？？？？所以基本上非常右边的组和非常左边的组将击中边界，而列在中间的3x3将保持移动之间的两列3x3……任何帮助都会感激。谢谢你 <html> <head> <title
<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>
您必须存储每个矩形的x、y位置。您可以为此创建一个新类。我给你举了个例子：
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();
}
谢谢您的回复。但我的意思是将9个矩形移动到一起…所以基本上你将有3行3列。它们在一起移动，而不是在彼此之后…@0nth3l3fti如果我没弄错的话，它应该是一个如图所示的组，但向下移动应该是在同一时刻。对吗？基本上，3X3的右侧应该撞击黑色画布的右侧，然后3X3对象作为一个整体向下移动。之后，3X3向左移动，以3X3的最左侧击中黑色画布的左侧。然后3X3物体作为一个物体向下移动，然后向右移动，击中黑色画布的右侧，等等。对不起，我解释一下。这里是初学者……没问题，但下次试着多描述一下。干得好：