xTibia

.com
NO
javascript

Jogo Simples Em Js

Por noobinhu, 12 de abr. de 2009 em Programação Web

script
12
2k
noobinhuN
12 de abril de 2009 às 20:38

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>

1 mês depois...
DarkansoD
12 de maio de 2009 às 23:42

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 12 por Darkanso

1 mês depois...
PisicoP
15 de junho de 2009 às 15:53

ta i como eu faço pra joga?

joaohdJ
19 de junho de 2009 às 13:26

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--
19 de junho de 2009 às 21:26

Desculpa a pegunta retardada maiss...

Como se joga isso ? O_o

VildenV
25 de junho de 2009 às 17:30

tbm quero saber como joga isso :o fiquei curioso :x

guilhermes26G
25 de junho de 2009 às 17:34

Simples, copiem isso e salvem como .htm

Depois é só abrir.

VildenV
25 de junho de 2009 às 17:42

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

 

so burrin assim mesmo :X

-Fark--
28 de junho de 2009 às 11:47

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 ?

satan666S
29 de junho de 2009 às 20:04

uashuahsuahsuahsa

parece o tibia quando surgiu....

 

 

igualzinho ate os graficos :D

1 mês depois...
skynagerloasS
28 de julho de 2009 às 10:21

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 por Sky

9 meses depois...
DiogoD
15 de abril de 2010 às 02:05

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