Neocodex Design Cursos - HTML
HTML/GAMES - Artigo 1
Olá
Tudo bem?
Sou Emilio Dami Silva e este é o meu primeiro artigo sobre HTML/GAMES.
Estes artigos são básicos e é para iniciantes, aqueles que não tem conhecimento nenhum sobre desenvolver jogos com HTML.
Nessa série de artigos vamos desenvolver algo bem simples, enquanto estudamos a teoria por trás dos jogos exibidos em HTML.
Você precisa ter algum conhecimento de HTML e por isso é bom que você leia esse conjunto de artigos sobre HTML na minha página, ao menos para você ter um conhecimento básico.
Não vamos tratar de HTML aqui nesses artigos, mas somente HTML/GAMES.
Acompanhe aqui os nossos artigos básicos de HTML:
12 lições para iniciar em HTML - Artigo 1
-
Para desenvolver nossos estudos e praticar iremos precisar:
- • Um Computador com o Windows;
- • um editor de textos e um browser, eu sugiro que seja o Google Chrome Browser
Vamos dar início ao nosso aprendizado, em primeiro lugar, quero mostrar a você um jogo completo e funcionando para que você possa ver o funcionamento de um jogo em HTML.
Depois iremos dar um passo de cada vez para aprender o processo de desenvolvimento de jogos.
Eu vou dizer algumas coisas sobre jogos por aqui, desenvolver jogos é missão complicada e normalmente envolve centenas de pessoas no projeto, entre desenhistas, roteiristas, diretores, programadores, analistas, todos trabalhando juntos para desenvolver o software.
O que vamos entender aqui não se trata de criar uma empresa de jogos, nem mesmo de aprender a programar, aqui vamos dar alguns conceitos iniciais sobre desenvolvimento de games em HTML.
Esse conselho é para você não ficar muito empolgado e achar que irá desenvolver um FIFA amanhã mesmo, não é bem assim viu, Vamos lá.
Você já deve saber usar um editor de textos, se você não sabe, veja o artigo número 1 da nossa serie de artigos clicando aqui:
12 lições para iniciar em HTML - Artigo 1
Abra seu editor e copie o código abaixo dentro dele, salve em sua pasta preferida, abra o seu BROWSER e execute o Script do Jogo e veja o resultado.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myGamePiece.gravity = 0.05;
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}
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.frameNo = 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, type) {
this.type = type;
this.score = 0;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.gravity = 0;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myScore.text="SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<p>Use the ACCELERATE button to stay in the air</p>
<p>How long can you stay alive?</p>
</body>
</html>
- Salve seu trabalho na pasta de trabalho que você criou para esse curso.
Você concluiu sua primeira lição de HTML/GAMES, meus parabéns!
Por enquanto é só.
Eu sou Emílio Dami e retornaremos em breve.
Assista nossos vídeos em nosso canal no you-tube, se inscreva lá para continuar a receber todas as novidades automaticamente e deixe seu comentário, ah e compartilhe!
Você pode enviar um e-mail para info@neocodexdesign.com
HTML/GAMES - Artigo 1 - Português
Se você deseja construir uma plataforma sólida para seus negócios.
Envie-nos uma mensagem agora mesmo e vamos falar sobre o seu projeto!
Vamos conversar mais sobre o seu projeto?
Vamos direto ao trabalho! Fale algo sobre seu projeto!
Contate-nos usando o formulario abaixo, informe seu telefone e email para entrarmos em contato imediatamente!
Voce pode nos contatar ligando para nos, utilizando o email ou nos contatando via redes sociais.
Mas se voce preencher os campos abaixo iremos entrar em contato agora mesmo.
We will contact you back immediately.
Muito obrigado pela sua visita ao nosso site!