Sistema de Pontuação
02/05/2017
0
Boas,
Então... Estou tendo uma dor de cabeça em criar um sistema de pontuação simples para este "Jogo" em Canvas.
Código a partir do que eu fui "tentando" -_-
Sem as Modificações:
Estou aprendendo canvas/ javascript, e adaptei este joguinho para um trabalho escolar, porém, gostaria de acrescentar um sistema de Score, muito simples, o que para mim está parecendo um bicho de 7 cabeças.
Obrigado desde já!
Então... Estou tendo uma dor de cabeça em criar um sistema de pontuação simples para este "Jogo" em Canvas.
Código a partir do que eu fui "tentando" -_-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Teste </title>
<link href="style/style.css" rel="stylesheet">
</head>
<center><body onload="Inicializar()">
<div>
<canvas id="Pong" width="700" height="620">
</canvas>
</div>
<script type="text/javascript">
// Todas Variáveis
var NaveX = Math.random() * 620; // Posição X Nave
var NaveY = 50; // posição y Nave
var NaveDX = 2; // Change in ball x position.
var NaveDY = 2 // Change in ball y position.
var Prancha1X = 700; // Prancha1 Azul x
var Prancha1Y = 620; // Prancha1 Azul Y
var PranchaX = 250; // Localização inicial da prancha
var PranchaH = 10; // altura prancha
var PranchaD = Prancha1Y - PranchaH; // Prancha depth.
var PranchaW = 150; // Largura da prancha
var canvas; // Canvas element.
var ctx = this.context; // Canvas context.
var gameLoop; // Game loop time interval.
var Pontuacao;
var ForaDaBarra;
// This function is called on page load.
// Iniciando
function Inicializar() {
Pontuacao = 0;
canvas = document.getElementById("Pong");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
// Jogar até que a Nave pare
gameLoop = setInterval(drawBall, 15); // velocidade bolinhas (Quanto maior o número, menor a velocidade)
// Chamando Teclado
window.addEventListener('keydown', whatKey, true);
}
}
function drawBall() { // Configurações Inicias
// limpar
ctx.clearRect(0, 0, Prancha1X, Prancha1Y);
// Fundo
var img = new Image();
img.src = 'img/fundo.jpg';
ctx.drawImage(img, 1, 1);
// Ovni
var imagem = new Image();
imagem.src = 'img/ovni.png';
ctx.drawImage(imagem, NaveX, NaveY, 30, 20); // tamanho Nave
//ctx.drawImage(imagem, NaveX, NaveY, 15, 0, Math.PI * 2, true);
// Prancha1 azul
ctx.fillStyle = "navy";
ctx.beginPath();
ctx.rect(PranchaX, PranchaD, PranchaW, PranchaH);
ctx.closePath();
ctx.fill();
// Localização da Bola
NaveX += NaveDX;
NaveY += NaveDY;
// ajustar nave batendo nas laterais
if (NaveX + NaveDX > Prancha1X - 10 || NaveX + NaveDX < 0) NaveDX = -NaveDX;
// Se a nave bate no topo, ela volta
if (NaveY + NaveDY < 50)
{ // 50 = coordenada onde ela bate //Nave batendo em cima// Se a Nave bate no "limbo", verifica se há a Prancha1 azul
NaveDY = -NaveDY;
Pontuacao = + 10;
}
else if (NaveY + NaveDY > Prancha1Y - 15) // Se a nave bate na Prancha1 azul, ela "salta"
{
if (NaveX > PranchaX && NaveX < PranchaX + PranchaW)
NaveDY = -NaveDY;
else {
clearInterval(gameLoop);
alert("Game over!"); // Se não (else), acaba o jogo!
}
}
}
// Definindo as Teclas (<, >, A, D)
function whatKey(evt) {
switch (evt.keyCode) {
case 37: // seta esquerda <
PranchaX = PranchaX - 20;
if (PranchaX < 0) PranchaX = 0;
break;
case 39: // seta direita >
PranchaX = PranchaX + 20;
if (PranchaX > Prancha1X - PranchaW) PranchaX = Prancha1X - PranchaW;
break;
case 65: // Letra A
PranchaX = PranchaX - 20;
if (PranchaX < 0) PranchaX = 0;
break;
case 68: // Letra D
PranchaX = PranchaX + 20;
if (PranchaX > Prancha1X - PranchaW) PranchaX = Prancha1X - PranchaW;
break;
}
}
</script>
</body> </center>
</html>
Sem as Modificações:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Teste </title>
<link href="style/style.css" rel="stylesheet">
</head>
<center><body onload="Inicializar()">
<div>
<canvas id="Pong" width="700" height="620">
</canvas>
</div>
<script type="text/javascript">
// Todas Variáveis
var NaveX = Math.random() * 620; // Posição X Nave
var NaveY = 50; // posição y Nave
var NaveDX = 2; // Change in ball x position.
var NaveDY = 2 // Change in ball y position.
var Prancha1X = 700; // Prancha1 Azul x
var Prancha1Y = 620; // Prancha1 Azul Y
var PranchaX = 250; // Localização inicial da prancha
var PranchaH = 10; // altura prancha
var PranchaD = Prancha1Y - PranchaH; // Prancha depth.
var PranchaW = 150; // Largura da prancha
var canvas; // Canvas element.
var ctx; // Canvas context.
var gameLoop; // Game loop time interval.
// This function is called on page load.
// Iniciando
function Inicializar() {
canvas = document.getElementById("Pong");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
// Jogar até que a Nave pare
gameLoop = setInterval(drawBall, 15); // velocidade bolinhas (Quanto maior o número, menor a velocidade)
// Chamando Teclado
window.addEventListener('keydown', whatKey, true);
}
}
function drawBall() { // Configurações Inicias
// limpar
ctx.clearRect(0, 0, Prancha1X, Prancha1Y);
// Fundo
var img = new Image();
img.src = 'img/fundo.jpg';
ctx.drawImage(img, 1, 1);
// Ovni
var imagem = new Image();
imagem.src = 'img/ovni.png';
ctx.drawImage(imagem, NaveX, NaveY, 30, 20); // tamanho Nave
//ctx.drawImage(imagem, NaveX, NaveY, 15, 0, Math.PI * 2, true);
// Prancha1 azul
ctx.fillStyle = "navy";
ctx.beginPath();
ctx.rect(PranchaX, PranchaD, PranchaW, PranchaH);
ctx.closePath();
ctx.fill();
// Localização da Bola
NaveX += NaveDX;
NaveY += NaveDY;
// ajustar nave batendo nas laterais
if (NaveX + NaveDX > Prancha1X - 10 || NaveX + NaveDX < 0) NaveDX = -NaveDX;
// Se a nave bate no topo, ela volta
if (NaveY + NaveDY < 50)
{ // 50 = coordenada onde ela bate //Nave batendo em cima// Se a Nave bate no "limbo", verifica se há a Prancha1 azul
NaveDY = -NaveDY;
}
else if (NaveY + NaveDY > Prancha1Y - 15) // Se a nave bate na Prancha1 azul, ela "salta"
{
if (NaveX > PranchaX && NaveX < PranchaX + PranchaW)
NaveDY = -NaveDY;
else {
clearInterval(gameLoop);
alert("Game over!"); // Se não (else), acaba o jogo!
}
}
}
// Definindo as Teclas (<, >, A, D)
function whatKey(evt) {
switch (evt.keyCode) {
case 37: // seta esquerda <
PranchaX = PranchaX - 20;
if (PranchaX < 0) PranchaX = 0;
break;
case 39: // seta direita >
PranchaX = PranchaX + 20;
if (PranchaX > Prancha1X - PranchaW) PranchaX = Prancha1X - PranchaW;
break;
case 65: // Letra A
PranchaX = PranchaX - 20;
if (PranchaX < 0) PranchaX = 0;
break;
case 68: // Letra D
PranchaX = PranchaX + 20;
if (PranchaX > Prancha1X - PranchaW) PranchaX = Prancha1X - PranchaW;
break;
}
}
</script>
</body> </center>
</html>
Estou aprendendo canvas/ javascript, e adaptei este joguinho para um trabalho escolar, porém, gostaria de acrescentar um sistema de Score, muito simples, o que para mim está parecendo um bicho de 7 cabeças.
Obrigado desde já!
Augusto
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)