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>
(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);
}