javascript Jogo Simples Em Js

noobinhu · Abril 12, 2009

Estava meio sem o que fazer, fiz um joguinho, com JS/HTML/CSS:

<html>
<head>

<title>Jogo Simples em JS</title>

</head>

<style type="text/css">

body {

background-color: black;

margin-left: 20px;

margin-top: 20px;

color: white;

}

div#jogo {

border: 1px solid white;

width:400px;

height:300px;

}

.botao {

width:21px;

height:21px;

background-color: white;

position:relative;

}

</style>

<script language="javascript">

var started = 0;

var pontos = 0;

var segundos = 0;

function bemvindo()

{

alert("Bem vindo!\nPara começar um jogo, clique em Iniciar.");

}

function rand( min, max ) {

// http://kevin.vanzonneveld.net

// + original by: Leslie Hoare

// + bugfixed by: Onno Marsman

// * example 1: rand(1, 1);

// * returns 1: 1

var argc = arguments.length;

if (argc == 0) {

min = 0;

max = 2147483647;

} else if (argc == 1) {

throw new Error('Warning: rand() expects exactly 2 parameters, 1 given');

}

return Math.floor(Math.random() * (max - min + 1)) + min;

}

function randomBotao()

{

if (started == 1)

{

var botao = document.getElementById("mainbutton");

var rand_width = rand(25,375);

var rand_height = rand(25,275);

botao.style.top = rand_height+"px";

botao.style.left = rand_width+"px";

setTimeout("randomBotao();",2000);

}

}

function pontuar()

{

if (started == 1)

{

var botao = document.getElementById("mainbutton");

var rand_width = rand(25,375);

var rand_height = rand(25,275);

botao.style.top = rand_height+"px";

botao.style.left = rand_width+"px";

pontos++;

document.getElementById("pontuacao").innerHTML = pontos;

}

}

function iniciarjogo()

{

if (confirm("Você deseja começar um novo jogo?") == true)

{

alert("Jogo iniciado.\nPara jogar, basta clicar o máximo de vezes no quadrado que aparecerá na tela.");

pontos = 0;

started = 1;

document.getElementById("mainbutton").style.display = "block";

randomBotao();

segundos = 60;

document.getElementById("tempo_restante").innerHTML = segundos;

iniciarTimer();

document.getElementById("pontuacao").innerHTML = 0;

}

else

{

alert("Jogo não iniciado.");

}

}

function iniciarTimer()

{

if (segundos > 1)

{

segundos = segundos - 1;

document.getElementById("tempo_restante").innerHTML = segundos;

setTimeout("iniciarTimer();",1000);

}

else

{

segundos = 0;

document.getElementById("tempo_restante").innerHTML = segundos;

alert("Jogo terminado!\nPontos feitos: "+pontos+"");

pontos = 0;

started = 0;

document.getElementById("pontuacao").innerHTML = 0;

document.getElementById("mainbutton").style.display = "none";

}

}

</script>

<body onload="bemvindo();">

<input type="button" value="Iniciar" onclick="iniciarjogo();" /> <br><br>

<div id="jogo"><input type="button" value=" " onClick="pontuar();" id="mainbutton" class="botao" style="display:none;"/></div><br>

<div style="margin-left:30px;"><b>Pontos:</b> <span id="pontuacao">0</span> <b>Segundos Restantes:</b> <span id="tempo_restante">0</span> </div>

</body>

</html>

Darkanso · Maio 13, 2009

Nusss joguinho viciante, kkk achei bem legalzinho, max de pontos que consegui foi 80, so muito lento, o quadradinho é esperto ele se move as vezes do nada. Mas ta de parabéns, jogo bem elaborado e bem inteligente, é um bom jogo pra raciosinio, pelo menos eu não faria melhor.

Atensiosamente, Darkanso.

Editado Maio 13, 2009 por Darkanso

Pisico · Junho 15, 2009

ta i como eu faço pra joga?

joaohd · Junho 19, 2009

Manero. ta de parabéns. só tem 1 coisinha... ninguem me vence

"Jogo terminado!

Pontos feitos: 624"

<font size="5">è só segurar enter q vai</font>

-Fark- · Junho 20, 2009

Desculpa a pegunta retardada maiss...

Como se joga isso ? O_o

Vilden · Junho 25, 2009

tbm quero saber como joga isso fiquei curioso :x

guilhermes26 · Junho 25, 2009

Simples, copiem isso e salvem como .htm

Depois é só abrir.

Vilden · Junho 25, 2009

Daniel ainda nao entendi.. tipo copia isso e usa oq pra salva

so burrin assim mesmo :X

-Fark- · Junho 28, 2009

eu ja saquei...

tipo assim: abre um bloco de notas, copia o texto que esta logo ali ^

e cole no bloco de notos...

clique em : salvar como...

ai vc salva assim:

Qualquer nome.html

e salva e depois abre....

intendeu ?

satan666 · Junho 29, 2009

uashuahsuahsuahsa

parece o tibia quando surgiu....

igualzinho ate os graficos

skynagerloas · Julho 28, 2009

Bom, peguei o Código e dei uma Modificada e incrementei algumas coisinhas.

<html>
<head>

<title>Jogo Simples em JS</title>

</head>

<style type="text/css">

body {

background-color: black;

margin-left: 20px;

margin-top: 20px;

color: white;

}

div#jogo {

border: 1px solid white;

width: 400px;

height: 300px;

}

.botao {

width: 21px;

height: 21px;

background-color: white;

position: relative;

}

</style>

<script language="javascript">

var started = 0;

var pontos = 0;

var segundos = 0;

var record = 0;

var velocidade = 20;

function bemvindo()

{

alert("Bem vindo!\nPara começar um jogo, clique em Iniciar.");

}

function rand( min, max ) {

// http://kevin.vanzonneveld.net

// + original by: Leslie Hoare

// + bugfixed by: Onno Marsman

// * example 1: rand(1, 1);

// * returns 1: 1

var argc = arguments.length;

if (argc == 0) {

min = 0;

max = 2147483647;

} else if (argc == 1) {

throw new Error('Warning: rand() expects exactly 2 parameters, 1 given');

}

return Math.floor(Math.random() * (max - min + 1)) + min;

}

function randomBotao()

{

if (started == 1){

var botao = document.getElementById("mainbutton");

var rand_width = rand(25,375);

var rand_height = rand(25,275);

botao.style.top = rand_height+"px";

botao.style.left = rand_width+"px";

setTimeout("randomBotao();",velocidade*100);

}

}

function pontuar()

{

if (started == 1)

{

var botao = document.getElementById("mainbutton");

var rand_width = rand(25,375);

var rand_height = rand(25,275);

botao.style.top = rand_height+"px";

botao.style.left = rand_width+"px";

pontos++;

if ((pontos%10)==0){

velocidade--;

if (velocidade == 0){

started = 0;

if (pontos > record){

record = pontos;

document.getElementById("record").innerHTML = record;

}

alert("VOCE GANHOU!!!. Pontos feitos: "+pontos+"\nRecord: "+record+"");

}

segundos= segundos+10;

}

document.getElementById("pontuacao").innerHTML = pontos;

}

}

function iniciarjogo()

{

if (confirm("Você deseja começar um novo jogo?") == true)

{

alert("Jogo iniciado.\nPara jogar, basta clicar o máximo de vezes no quadrado que aparecerá na tela.");

pontos = 0;

started = 1;

document.getElementById("mainbutton").style.display = "block";

randomBotao();

segundos = 60;

document.getElementById("tempo_restante").innerHTML = segundos;

iniciarTimer();

document.getElementById("pontuacao").innerHTML = 0;

}

else

{

alert("Jogo não iniciado.");

}

}

function iniciarTimer()

{

if (segundos > 1)

{

segundos = segundos - 1;

document.getElementById("tempo_restante").innerHTML = segundos;

setTimeout("iniciarTimer();",1000);

}

else

{

segundos = 0;

document.getElementById("tempo_restante").innerHTML = segundos;

if (pontos > record){

record = pontos;

document.getElementById("record").innerHTML = record;

}

alert("Jogo terminado!\nPontos feitos: "+pontos+"\nRecord: "+record+"");

pontos = 0;

started = 0;

document.getElementById("pontuacao").innerHTML = 0;

document.getElementById("mainbutton").style.display = "none";

}

}

</script>

<body onload="bemvindo();">

<input type="button" value="Iniciar" onMouseUP="iniciarjogo();" />

<font color="#0055FF" lang="Verdana">Para reiniciar o record, aperte "F5"</font>

<br>

<br>

<div id="jogo"><input type="button" value=" " onMouseUp="pontuar();"

id="mainbutton" class="botao" style="display: none;" /></div>

<br>

<div style="margin-left: 30px;"><b>Pontos:</b> <span

id="pontuacao">0</span>

<b>Segundos

Restantes:</b> <span id="tempo_restante">0</span><b><br>Record:</b><span

id="record">0</span></div>

</body>

</html>

Créditos:

Leslie Hoare

Onno Marsman

noobinhu

Sky

Editado Julho 28, 2009 por Sky

Diogo · Abril 15, 2010

Clique uma vez, segure o espaço e seja um verdadeiro vencedor.

Entrar

javascript Jogo Simples Em Js

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Quem Está Navegando 0 membros estão online

Conteúdo Similar