Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 63
Tutorial para Criar Retângulos Animados Aleatoriamente

Neste tutorial veremos como criar uma animaçao utilizando alguns retângulos dentro de uma área pré-determinada.
Vejamos então o exemplo:
Nesse exemplo você poderá alterar as cores, a quantidade e o número de retângulos que forem necessários. Para esse exemplo vamos utilizar apenas um arquivo HTML:
Arquivo retangulosAnimados.html:
<!DOCTYPE html> <html lang='en'> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Retângulos Animados</title> <style id="compiled-css" type="text/css"> body { background-color: ivory; } canvas { border:1px solid red; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <h2>Retângulos Animados</h2> <canvas id="canvas" width=300 height=300></canvas> <script type='text/javascript'> // Variáveis relacionadas à tela. var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // Uma matriz para conter todos os objetos retangulares. var rectangles = []; // Uma pseudo-classe retangular (javascript não possui classes reais). function Rectangle(stdProperties) { addProperties(this, stdProperties); this.color = randomColor(); }; Rectangle.prototype.init = function (x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; return (this); }; // Move o retângulo por sua predefinição delta-x e delta-y. Rectangle.prototype.move = function () { var maxRight = canvas.width - this.width; var maxBottom = canvas.height - this.height; this.x += this.directionX * this.velocityX; if (this.x < 0) { this.x = 0; this.directionX *= -1 } if (this.x > maxRight) { this.x = maxRight; this.directionX *= -1 } this.y += this.directionY * this.velocityY; if (this.y < 0) { this.y = 0; this.directionY *= -1 } if (this.y > maxBottom) { this.y = maxBottom; this.directionY *= -1 } return (this); }; // Desenhe o retângulo na tela. Rectangle.prototype.render = function () { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); return (this); } // Cria um novo objeto retângulo da "classe" Rectangle. function newRect(x, y, width, height) { // Define as propriedades padrão o Retângulo. var DefaultRectangleProperties = { x: 0, y: 0, width: 10, height: 10, velocityX: 1, velocityY: 1, directionX: 1, directionY: 1, color: "black", } // Recria um Retângulo. var rect = new Rectangle(DefaultRectangleProperties); // Define x,y,largura,altura e desenhe na tela. rect.init(x, y, width, height).render(); // Retorna (this) para permitir o encadeamento. return (rect); } // Cria 5 retângulos aleatoriamente. for (var i = 0; i < 5; i++) { var rect = newRect(Math.random() * 200, Math.random() * 200, 40, 50); rect.velocityX = Math.random() * 2; rect.velocityY = Math.random() * 3; rectangles.push(rect); } // Anima os retângulos usando requestAnimationFrame. animate(); // O loop de animação. function animate(t) { // Solicita outro quadro de animação. requestAnimationFrame(animate); // Limpa a tela. // Move todos os retângulos por sua distância predefinida e redesenha todos os retângulos. ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < rectangles.length; i++) { rectangles[i].move().render(); } } // Cria getters/setters no objeto especificado usando o objeto de propriedade fornecido. function addProperties(object, properties) { for (var i in properties) { (function (i) { Object.defineProperty(object, i, { get: function () { return properties[i]; }, set: function (val) { properties[i] = val; } }) })(i); } } // Gera uma cor aleatória. function randomColor() { return ('#' + Math.floor(Math.random() * 16777215).toString(16)); } </script> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Desenhar à Mão Livre
Tutorial para Criar uma Máscara em uma Imagem >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino