Añadir un cuadrado rojo en el área de juego:
Agregar un componente
Hacer un constructor de componentes, que le permite agregar componentes a la gamearea.
El constructor de objetos se llama component , y hacemos nuestro primer componente, llamado myGamePiece :
Ejemplo
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
} Los componentes tienen propiedades y métodos para controlar su apariencia y movimientos.
marcos
Para hacer el juego listo para la acción, vamos a actualizar la pantalla 50 veces por segundo, lo cual es muy similar a fotogramas de una película.
En primer lugar, crear una nueva función llamada updateGameArea() .
En el myGameArea objeto, agregar un intervalo que va a ejecutar el updateGameArea() la función de cada milisegundo 20 (50 times per second) . También agregar una función llamada clear() , que borra todo el lienzo.
En el component constructor, agregar una función llamada update() , para manejar el dibujo del componente.
El updateGameArea() función llama a la clear() el y update() método.
El resultado es que el componente se extrae y se aclaró 50 veces por segundo:
Ejemplo
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
} Inténtalo tú mismo " Hacer que se mueva
Para demostrar que el cuadrado rojo se está elaborando 50 veces por segundo, vamos a cambiar la posición x (horizontal) en un píxel cada vez que se actualice el área de juego:
Ejemplo
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Inténtalo tú mismo " ¿Por Despeje el Area de Juego?
Podría parecer innecesario para despejar el área de juego en cada actualización. Sin embargo, si dejamos a un lado la clear() método, todos los movimientos de la componente dejarán un rastro de donde fue colocado en el último cuadro:
Ejemplo
function updateGameArea() {
//myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Inténtalo tú mismo " Cambiar el tamaño
Se puede controlar la anchura y la altura del componente:
Ejemplo
Crear un rectángulo 10x140 píxeles:
function startGame() {
myGameArea.start();
myGamePiece = new
component( 10 , 140 , "red" , 10, 120);
} Inténtalo tú mismo " Cambiar el color
Se puede controlar el color del componente:
Ejemplo
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} Inténtalo tú mismo " También puede utilizar otros colorvalues como hexadecimal, RGB o RGBA:
Ejemplo
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
} Inténtalo tú mismo " Cambiar la Posición
Utilizamos X e Y las coordenadas para posicionar componentes en el área de juego.
La esquina superior izquierda del lienzo tiene las coordenadas (0,0)
Puntero del ratón sobre el área de juego de abajo para ver su coordenadas X e Y:
Puede colocar los componentes donde lo desee en el área de juego:
Ejemplo
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 2 , 2 );
} Inténtalo tú mismo " Muchos de los componentes
Usted puede poner tantos componentes como desee en el área de juego:
Ejemplo
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new
component(75, 75, "red" , 10, 10);
yellowGamePiece = new component(75, 75, "yellow" , 50, 60);
blueGamePiece = new component(75, 75, "blue" , 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
Inténtalo tú mismo " Mover componentes
Hacen que los tres componentes se mueven en diferentes direcciones:
Ejemplo
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
Inténtalo tú mismo "