Ir para conteúdo

Jogo Simples Em Js

noobinhu

Por noobinhu
em Programação Web

 Share

Posts Recomendados

noobinhu

noobinhu 38

Postado
Postado

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>

Link para o comentário
https://xtibia.com/forum/topic/111206-jogo-simples-em-js/
Compartilhar em outros sites
  • 1 month later...
Darkanso

Darkanso 1

Postado
Postado (editado)

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 por Darkanso
Link para o comentário
https://xtibia.com/forum/topic/111206-jogo-simples-em-js/#findComment-738430
Compartilhar em outros sites
  • 1 month later...
-Fark-

-Fark- 4

Postado
Postado

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 ?

Link para o comentário
https://xtibia.com/forum/topic/111206-jogo-simples-em-js/#findComment-753968
Compartilhar em outros sites
  • 4 weeks later...
skynagerloas

skynagerloas 1

Postado
Postado (editado)

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 por Sky
Link para o comentário
https://xtibia.com/forum/topic/111206-jogo-simples-em-js/#findComment-769214
Compartilhar em outros sites
  • 8 months later...
 Share
Ir para a lista de tópicos

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...