É algo muito complicado e que deixa você entretido por horas, só de saber que você pode criar, animar e jogar sem ter que instalar nada é incrível o que pode ser feito!
Com os comandos certo no canvas você tem a liberdade de ser o artista, não é nada fácil, ter de criar códigos para dizer ao PC que quer uma simples linha, massss é ai que você também vê que a linha que não é tão simples !
Em fim, existem vários tutoriais espalhados pela internet de como aprender o basico de HTML5 e JAVASCRIPT. E foi com vários desses que eu modifiquei/criei/copiei o jogo FREEWAY da galinha que eu vi em um site.
Como não está postado na internet segue o MEGA código aqui mesmo ! hehehehhe
Copiem no bloco de notas, e salvem como .html só isso !
Abraços, boa criação e diversão.
<!DOCTYPE html>
<html>
<head>
<title>FREEWAY</title>
<style>
#canvas {
width: 900px;
height: 670px;
border: solid 3px black;d
}
</style>
</head>
<body style="background:rgb(15,15,15);">
<center>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas")
var contexto = canvas.getContext("2d")
var score = 0
var game_over = false
function desenharFundo() {
contexto.fillStyle = "#797979"
contexto.fillRect(0,0,canvas.width,canvas.height)
var altura_faixa = canvas.height / 20
var num_faixas = 20
contexto.fillStyle = "#ffffff"
for (i = 0; i < num_faixas; i = i + 2.2) {
for (j = 0; j < 20; j = j + 1) {
contexto.fillRect(j * (canvas.width / 20), i * canvas.height / 22, canvas.width / 20 - 8, 0.2)
}
}
contexto.fillStyle = "#B5B5B5"
contexto.fillRect(0,0,canvas.width, altura_faixa)
contexto.fillStyle = "black"
contexto.fillRect(0,altura_faixa, canvas.width, 1)
contexto.fillStyle = "green"
contexto.fillRect(0,altura_faixa , canvas.width, altura_faixa)
contexto.fillStyle = "black"
contexto.fillRect(0,altura_faixa * 2, canvas.width, 1)
contexto.fillStyle = "black"
contexto.fillRect(0,altura_faixa * 18.1, canvas.width, 1.5)
contexto.fillStyle = "green"
contexto.fillRect(0,altura_faixa * 18.3, canvas.width, altura_faixa * 1.8)
}
var b_galinha1 = [[0,3,0,0,3,3,0,0,0,0],
[3,3,0,5,3,3,5,0,0,0],
[0,3,0,3,3,3,3,0,3,0],
[0,0,3,3,3,3,3,0,3,3],
[0,0,0,3,3,3,3,3,0,0],
[0,0,0,3,3,3,3,0,0,0],
[0,0,0,3,3,3,3,0,0,0],
[0,0,0,3,0,0,3,3,3,0],
[0,3,3,0,0,0,0,0,3,3],
[3,3,0,0,0,0,0,0,0,0]];
var b_galinha2 = [[0,0,0,0,3,3,0,0,3,0],
[0,0,0,5,3,3,5,0,3,3],
[0,3,0,3,3,3,3,0,3,0],
[3,3,0,3,3,3,3,3,0,0],
[0,0,3,3,3,3,3,0,0,0],
[0,0,0,3,3,3,3,0,0,0],
[0,0,0,3,3,3,3,0,0,0],
[0,3,3,3,0,0,3,0,0,0],
[3,3,0,0,0,0,0,3,3,0],
[0,0,0,0,0,0,0,0,3,3]];
var carro = [[0,0,1,1,1,1,0,0,0,0,1,1,1,1,0,0],
[0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
[2,2,2,2,2,2,2,2,4,4,4,4,2,2,2,2],
[2,2,2,2,2,4,4,4,2,2,2,2,4,4,2,2],
[2,2,2,2,2,4,0,4,2,2,2,2,0,4,2,2],
[2,2,2,2,2,4,4,0,2,2,2,2,4,0,2,2],
[2,2,2,2,2,2,2,2,4,4,4,4,2,2,2,2],
[0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
[0,0,1,1,1,1,0,0,0,0,1,1,1,1,0,0]]
function criarGalinha() {
var galinha = new Object()
galinha.x = canvas.width / 2
galinha.bitmap1 = b_galinha1
galinha.bitmap2 = b_galinha2
galinha.bitmap = b_galinha1
galinha.y = canvas.height - 1 - galinha.bitmap.length
galinha.width = galinha.bitmap[0].length
galinha.height = galinha.bitmap.length - 1
galinha.contador = 0
galinha.move = function(direcao) {
this.y = this.y + direcao
this.contador = this.contador + 1
if (this.contador % 2 == 0) {
this.bitmap = this.bitmap1
} else {
this.bitmap = this.bitmap2
}
if (this.y <= 0) {
score = score + 1
this.y = canvas.height - 1 - this.bitmap.length
} else if (this.y > (canvas.height - 1 - this.bitmap.length)) {
this.y = canvas.height - 1 - this.bitmap.length
}
}
return galinha
}
function inverter_vertical(bitmap) {
var resultado = new Array()
for (var linha in bitmap) {
var linha_corrente = bitmap[linha]
var nova_linha = new Array()
var num_itens = linha_corrente.length
for (x = num_itens - 1; x >= 0; x = x - 1) {
nova_linha.push(linha_corrente[x])
}
resultado.push(nova_linha)
}
return resultado
}
function substituir(valor_original, valor_substituto, bitmap) {
var resultado = new Array()
for (var linha in bitmap) {
var nova_linha = new Array()
var linha_corrente = bitmap[linha]
for (var x = 0; x < linha_corrente.length; x = x + 1) {
nova_linha.push(linha_corrente[x] == valor_original ? valor_substituto : linha_corrente[x])
}
resultado.push(nova_linha)
}
return resultado
}
var carro_invertido = inverter_vertical(carro)
function criarCarro(x, y, bitmap, direcao) {
var result = new Object()
result.x = x
result.y = y + 18
result.bitmap = bitmap
result.width = bitmap[0].length
result.height = bitmap.length
result.direcao = direcao
result.move = function() {
this.x = this.x + direcao
if (this.x < 0 && this.direcao < 0) {
this.x = canvas.width + 10
} else if (this.x > canvas.width && this.direcao > 0) {
this.x = -20
}
}
result.pegouGalinha = function(galinha) {
if ( (galinha.x >= this.x && galinha.x <= (this.x + this.width)) ||
(galinha.x + galinha.width >= this.x && galinha.x + galinha.width <= (this.x + this.width)) ) {
return (galinha.y >= this.y && galinha.y <= (this.y + this.height)) ||
((galinha.y + galinha.height) < (this.y && this.height) && (galinha.y + galinha.height) > (this.y))
}
return false
}
return result
}
function desenharBitmap(bitmap,pos_x,pos_y,tamanho) {
for (var y in bitmap) {
for (var x in bitmap[y]) {
var valor = bitmap[y][x]
if (valor != 0) {
switch (valor) {
case 1: contexto.fillStyle = "black"; break;
case 2: contexto.fillStyle = "red"; break;
case 3: contexto.fillStyle = "yellow"; break;
case 4: contexto.fillStyle = "cyan"; break;
case 5: contexto.fillStyle = "green"; break;
}
contexto.fillRect(pos_x + (tamanho * x), pos_y + (tamanho * y), tamanho, tamanho)
}
}
}
}
var galinha = criarGalinha()
var lista_carros = new Array()
for (i = 0; i < 8; i = i + 1) {
if (Math.random() * 10 > 5) {
lista_carros.push(criarCarro(Math.random() * canvas.width, canvas.height / 10 * i, carro, -4))
} else {
lista_carros.push(criarCarro(Math.random() * canvas.width, canvas.height / 10 * i, carro_invertido, 4))
}
}
function draw() {
desenharFundo();
if (game_over) {
contexto.fillStyle = "yellow"
contexto.fillText("Aperte F5!", canvas.width / 4, canvas.height / 2)
contexto.fillText("Para ganhar outro sapo amarelo!", canvas.width / 4, canvas.height / 1.7)
return
}
for (var i in lista_carros) {
var carrinho = lista_carros[i]
desenharBitmap(carrinho.bitmap, carrinho.x, carrinho.y, 1)
}
desenharBitmap(galinha.bitmap, galinha.x, galinha.y, 1)
contexto.fillStyle = "black"
contexto.fillText(score, canvas.width / 2, 8)
}
document.onkeydown = function(event) {
if (game_over) {
alert("O sapo amarelo está imovel.\nJaz morto na estrada.\nRecarregue a página para jogar de novo!")
return
}
switch(event.which) {
case 37&&39: galinha.move(-1); break;
case 39&&37: galinha.move(-1); break;
case 38: galinha.move(-15); break;
case 40: galinha.move(1); break;
}
}
function testeFim() {
if (game_over == true) {
return true
}
for (var i in lista_carros) {
if (lista_carros[i].pegouGalinha(galinha)) {
game_over = true
return true
}
}
return false
}
setInterval(
function() {
for (var i in lista_carros) {
lista_carros[i].move()
}
game_over = testeFim()
draw()
}
,50)
draw()
</script>
</center>
</body>
</html>
