Bgames
Olá visitante! Seja bem vindo ao nosso fórum!

Para você ter total acesso ao nosso fórum é preciso que você se cadastre.

Cadastre-se Aqui!


PARA VER LINKS E IMAGENS É PRECISO SE REGISTRAR!

O elemento canvas(criando um menu):

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

O elemento canvas(criando um menu):

Mensagem por RTBlack Games em Ter 3 Set 2013 - 17:57

Com o avanço da web também veio a tendência do surgimento de jogos de browser, cada vez mais leves e dinâmicos. A chegada da HTML5 e do elemento canvas permitiu ainda o surgimento de jogos feitos inteiramente em JavaScript, o que os torna leves e independentes de plataforma, fator que tem ganhado cada dia mais importância.
O desenvolvimento de um jogo completo requer bastante análise, escrita do roteiro, criação dos gráficos, entre outros procedimentos fundamentais e relativamente complexos. Porém, para demonstrar um pouco do que pode ser feito com JavaScript, manipulando o elemento canvas, este artigo apresentará o código necessário para criar um menu simples, desenhando-o dinamicamente na tela do browser, sem usar divs, listas, ou qualquer outro elemento HTML.
Iniciando:
(primeiramente devemos criar um arquivo em html e inserir o seguinte código)

Código:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Menu com canvas e JS</title>
<style> body { margin:0; overflow:hidden; } </style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script> $(function () { //o restante do código ficará aqui }); </script>
</head>
<body> <canvas id="canvasMenu"></canvas>
</body>
</html>

Segundo passo:
(crie uma arquivo em javascript com o seguinte código)

Código:
var largura;
var altura;
var larguraMenu = 400;
var alturaMenu = 300;
var canvas = document.getElementById("canvasMenu");
var ctx = canvas.getContext("2d");

function atualizarPlanoDeFundo() {
largura = window.innerWidth;
altura = window.innerHeight;
canvas.setAttribute("width", largura);
canvas.setAttribute("height", altura);
var img = new Image();
img.src = "bg.jpg";
ctx.drawImage(img, 0, 0);
}

function desenharBaseMenu() {
ctx.fillStyle = "rgba(255,255,255,0.7)";
var x = parseInt((largura / 2) - (larguraMenu / 2));
 var y = parseInt((altura / 2) - (alturaMenu / 2));
ctx.fillRect(x, y, larguraMenu, alturaMenu);
}

function desenharItensMenu() {
var x = parseInt((largura / 2) - (larguraMenu / 2));
var y = parseInt((altura / 2) - (alturaMenu / 2));
var img;
 img = new Image();
img.src = "iniciar_1.png";
 ctx.drawImage(img, x, y); i
mg = new Image();
img.src = "opcoes_1.png";
ctx.drawImage(img, x, y + 100);
img = new Image();
 img.src = "sair_1.png";
ctx.drawImage(img, x, y + 200);
}
Continuação
(no mesmo arquivo)
function desenharMenu() {
atualizarPlanoDeFundo();
desenharBaseMenu();
desenharItensMenu();
}

function selecionarItem(indice) {
desenharMenu();
var x = parseInt((largura / 2) - (larguraMenu / 2));
var y = parseInt((altura / 2) - (alturaMenu / 2));
var img; img = new Image();
switch (indice) { case 0: img.src = "iniciar_2.png"; ctx.drawImage(img, x, y);
break;
case 1: img.src = "opcoes_2.png";
ctx.drawImage(img, x, y+ 100);
break;
case 2: img.src = "sair_2.png";
ctx.drawImage(img, x, y + 200); break;
 }
}


window.onresize = function () {
desenharMenu();
}

window.onmousemove = function () {
var posX = event.clientX;
var posY = event.clientY;
var x = parseInt((largura / 2) - (larguraMenu / 2));
var y = parseInt((altura / 2) - (alturaMenu / 2));
var indice = -1;
if (posX > x && posX < x + larguraMenu) {
if (posY > y && posY < y + alturaMenu) {
indice = parseInt((posY - y) / 100);
      }
   }
selecionarItem(indice);
}



Resultado:
[Você precisa estar registrado e conectado para ver esta imagem.]

RTBlack Games


Mensagens : 16
Pontos : 29

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: O elemento canvas(criando um menu):

Mensagem por Ultimate em Ter 3 Set 2013 - 21:09

Excelente material, obrigado por compartilhar com a comunidade, se tiver um tempo faça sua apresentação.

Ultimate


Mensagens : 566
Pontos : 997622
Evolução : 100


Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: O elemento canvas(criando um menu):

Mensagem por RTBlack Games em Qua 4 Set 2013 - 10:40

Sim,postarei vários tópicos como este,quanto a minha apresentação farei ela hoje a noite.

RTBlack Games


Mensagens : 16
Pontos : 29

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: O elemento canvas(criando um menu):

Mensagem por Conteúdo patrocinado Hoje à(s) 23:40


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum