Foros del Web » Programando para Internet » Javascript »

juego serpiente en javascript acabado

Estas en el tema de juego serpiente en javascript acabado en el foro de Javascript en Foros del Web. Este codigo que he hecho ha sido gracias a una discusion tonta entre un compi y yo, estabamos discutiendo en como se tendria que mover ...
  #1 (permalink)  
Antiguo 03/01/2005, 17:48
Avatar de Ruchu  
Fecha de Ingreso: octubre-2001
Mensajes: 698
Antigüedad: 22 años, 7 meses
Puntos: 2
juego serpiente en javascript acabado

Este codigo que he hecho ha sido gracias a una discusion tonta entre un compi y yo, estabamos discutiendo en como se tendria que mover la serpiente... y como lo haria mas rapido...

Es el juego de la serpiente, es bastante basico, parecido al juego que incluian los primeros moviles.
Esta claro que el javascript no es para hacer estsa cosas.

Lo he comentado un poco para poder poner el codigo aqui y que se pueda tocar... Solo esta probado en cacasoft explorer.

Teclas de juego: 1, 2, 3 y 5 (mejor del teclado numerico)

Que lo disfruteis.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>

<body onkeypress="capturaTecla()">
<script>
function aleatorio(inferior,superior){//devuelve num aleatorio
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.round(aleat)
return parseInt(inferior) + aleat
}

//genera la comida mirando de no posicionarla en una pos ocupada x l serp
function generaPapeo(){
var generadoOK=false
var cont
var longSerp=serpF.length

while(generadoOK==false){
cont=0
comidaF=aleatorio(0,tamFTablero)
comidaC=aleatorio(0,tamCTablero)
while((comidaF!=serpF[cont] || comidaC!=serpC[cont]) && cont<longSerp){
cont++
}
//si contador es menor q la longitud del array (serp), se ha de repetir la posicion xq le ha tocado una pos ocupada por la serp
if(cont<longSerp){
generadoOK=false
}else{
generadoOK=true
}
}
document.getElementById(comidaF+","+comidaC).style .background=colorComida
}

//captura tecla y asigana el valor a la variable direccion
function capturaTecla(){
var tecla=event.keyCode

if(tecla==49 && direccion!=2){
direccion=4
}else if(tecla==50 && direccion!=1){
direccion=3
}else if(tecla==51 && direccion!=4){
direccion=2
}else if(tecla==53 && direccion!=3){
direccion=1
}
event.returnValue = false;
}

//dibuja el tablero. tanto la comida, como la serpiente, usea todo, son celdas
function pintaTablero(filas,cols){
document.write("<center><table border=0 cellspacing=0 cellpadding=0 id=tablero>")
for(f=0;f<filas;f++){
document.write("<tr></tr>")
for(c=0;c<cols;c++){
document.write("<td width=4 height=4 id="+f+","+c+"></td>")
}
}
document.write("</table><font face=Verdana size=2><br>Powered by Ruchu<br><b><span id=puntos>0</span></b></font></center>")
document.getElementById("tablero").style.backgroun d=colorTablero
}

//recorre los arrays de la serp(sus posiciones en tablero) y las pinta
function pintaSerp(){
for(i=0;i<serpF.length;i++){
document.getElementById(serpF[i]+","+serpC[i]).style.background=colorSerp
}
}

function colisionSerp(){
//miro si la cabeza de la serp xoca con su cola
var cont=1//empiezo a contar desde la pos 2 del array serp,porque logicamente la cabeza no puede chocar con su propia cabeza
var longSerp=serpF.length-1

while((serpF[0]!=serpF[cont] || serpC[0]!=serpC[cont]) && cont<=longSerp){
cont++
}
if(serpF[0]!=serpF[cont] || serpC[0]!=serpC[cont]){
return false
}else{
return true
}
}

function pisadoPosProhibida(){
//miro si la serp se come la comida o choca con fin tablero o ella misma
if(serpF[0]==comidaF && serpC[0]==comidaC){
puntos=puntos+20
document.getElementById("puntos").innerHTML=puntos
posisACrecer=3
generaPapeo()
}else if(colisionSerp()==true){
return true
}else if(serpF[0]>tamFTablero || serpF[0]<0 || serpC[0]>tamCTablero || serpF[0]<0) {
return true
}
}

//muevo la cabeza(posiciones 0 de los 2 arrays)de la serp pa arriba,abajo,izq o der
function direccionaSerp(){
if(direccion==1){
serpF[0]=serpF[0]-1//movimiento hacia arriba
}else if(direccion==2){
serpC[0]=serpC[0]+1//movimiento hacia derecha
}else if(direccion==3){
serpF[0]=serpF[0]+1//movimiento hacia abajo
}else{
serpC[0]=serpC[0]-1//movimiento hacia izquierda
}
}

function mueveSerp(){
var numTemp//variable auxiliar
if(posisACrecer>0){
posisACrecer=posisACrecer-1
numTemp=0
}else{
document.getElementById(serpF[serpF.length-1]+","+serpC[serpF.length-1]).style.background=colorTablero
numTemp=1
}
var longSerp=serpF.length-numTemp

//muevo hacia arriba los valores de los arrays (movimiento serp)
for(i=longSerp;i!=0;i--){
serpF[i]=serpF[i-1];serpC[i]=serpC[i-1]
}

direccionaSerp()

if(pisadoPosProhibida()==true){
//si esto ocurre mato temporizador
window.clearInterval(init)
alert("Game Over.")
}else{
pintaSerp()
}
}





//variables globales-----
var tamCTablero=26//tamaño en columnas para el tablero de juego
var tamFTablero=15//tamaño en filas para el tablero de juego
var comidaF//posicion en fila para situar la comida
var comidaC//posicion en columna para situar la comida
var colorTablero="#000000"
var colorSerp="#ffffff"
var colorComida="#888800"
var direccion=2//direccion serpiente. 1=arriba,2=derecha,3=abajo,4=izquierda
var posisACrecer=0//variable que guarda cuantos cuadraditos ha de crecer la serp
var puntos=0//puntuacion obtenida

var serpF = new Array()//posiciones en filas para las posis de la serpiente
var serpC = new Array()//posiciones en cols para las posis de la serpiente
//todas las posiciones del tablero que "son" serpiente se guarda en estos 2 arays. Se podria haber hecho en una matriz de 2 dimensiones

//inicializo la serpiente con 3 posiciones o cuadraditos de larga
serpF[0]=10
serpF[1]=10
serpF[2]=10
serpC[0]=5
serpC[1]=4
serpC[2]=3


//pinto el tablero de juego y pinto comida
pintaTablero(tamFTablero+1,tamCTablero+1)
generaPapeo()

//cada 130 misisegs se llama a mueveSerp, es como si fuera el programa principal
var init=window.setInterval("mueveSerp()",130);
</script>
</body>
</html>

Última edición por Ruchu; 03/01/2005 a las 18:49 Razón: Se me olvido el iconito!
  #2 (permalink)  
Antiguo 13/02/2012, 23:53
 
Fecha de Ingreso: febrero-2012
Mensajes: 84
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: juego serpiente en javascript acabado

pero no puedo jugarlo como hago para correrlo?
  #3 (permalink)  
Antiguo 14/02/2012, 02:26
Avatar de Ruchu  
Fecha de Ingreso: octubre-2001
Mensajes: 698
Antigüedad: 22 años, 7 meses
Puntos: 2
Respuesta: juego serpiente en javascript acabado

Había un error de sintaxis.

Codigo corregido:

Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>

<body onkeypress="capturaTecla()">
<script>
function aleatorio(inferior,superior){//devuelve num aleatorio
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.round(aleat)
return parseInt(inferior) + aleat
}

//genera la comida mirando de no posicionarla en una pos ocupada x l serp
function generaPapeo(){
var generadoOK=false
var cont
var longSerp=serpF.length

while(generadoOK==false){
cont=0
comidaF=aleatorio(0,tamFTablero)
comidaC=aleatorio(0,tamCTablero)
while((comidaF!=serpF[cont] || comidaC!=serpC[cont]) && cont<longSerp){
cont++
}
//si contador es menor q la longitud del array (serp), se ha de repetir la posicion xq le ha tocado una pos ocupada por la serp
if(cont<longSerp){
generadoOK=false
}else{
generadoOK=true
}
}
document.getElementById(comidaF+","+comidaC).style .background=colorComida
}

//captura tecla y asigana el valor a la variable direccion
function capturaTecla(){
var tecla=event.keyCode

if(tecla==49 && direccion!=2){
direccion=4
}else if(tecla==50 && direccion!=1){
direccion=3
}else if(tecla==51 && direccion!=4){
direccion=2
}else if(tecla==53 && direccion!=3){
direccion=1
}
event.returnValue = false;
}

//dibuja el tablero. tanto la comida, como la serpiente, usea todo, son celdas
function pintaTablero(filas,cols){
document.write("<center><table border=0 cellspacing=0 cellpadding=0 id=tablero>")
for(f=0;f<filas;f++){
document.write("<tr></tr>")
for(c=0;c<cols;c++){
document.write("<td width=4 height=4 id="+f+","+c+"></td>")
}
}
document.write("</table><font face=Verdana size=2><br>Powered by Ruchu<br><b><span id=puntos>0</span></b></font></center>")
document.getElementById("tablero").style.background=colorTablero
}

//recorre los arrays de la serp(sus posiciones en tablero) y las pinta
function pintaSerp(){
for(i=0;i<serpF.length;i++){
document.getElementById(serpF[i]+","+serpC[i]).style.background=colorSerp
}
}

function colisionSerp(){
//miro si la cabeza de la serp xoca con su cola
var cont=1//empiezo a contar desde la pos 2 del array serp,porque logicamente la cabeza no puede chocar con su propia cabeza
var longSerp=serpF.length-1

while((serpF[0]!=serpF[cont] || serpC[0]!=serpC[cont]) && cont<=longSerp){
cont++
}
if(serpF[0]!=serpF[cont] || serpC[0]!=serpC[cont]){
return false
}else{
return true
}
}

function pisadoPosProhibida(){
//miro si la serp se come la comida o choca con fin tablero o ella misma
if(serpF[0]==comidaF && serpC[0]==comidaC){
puntos=puntos+20
document.getElementById("puntos").innerHTML=puntos
posisACrecer=3
generaPapeo()
}else if(colisionSerp()==true){
return true
}else if(serpF[0]>tamFTablero || serpF[0]<0 || serpC[0]>tamCTablero || serpF[0]<0) {
return true
}
}

//muevo la cabeza(posiciones 0 de los 2 arrays)de la serp pa arriba,abajo,izq o der
function direccionaSerp(){
if(direccion==1){
serpF[0]=serpF[0]-1//movimiento hacia arriba
}else if(direccion==2){
serpC[0]=serpC[0]+1//movimiento hacia derecha
}else if(direccion==3){
serpF[0]=serpF[0]+1//movimiento hacia abajo
}else{
serpC[0]=serpC[0]-1//movimiento hacia izquierda
}
}

function mueveSerp(){
var numTemp//variable auxiliar
if(posisACrecer>0){
posisACrecer=posisACrecer-1
numTemp=0
}else{
document.getElementById(serpF[serpF.length-1]+","+serpC[serpF.length-1]).style.background=colorTablero
numTemp=1
}
var longSerp=serpF.length-numTemp

//muevo hacia arriba los valores de los arrays (movimiento serp)
for(i=longSerp;i!=0;i--){
serpF[i]=serpF[i-1];serpC[i]=serpC[i-1]
}

direccionaSerp()

if(pisadoPosProhibida()==true){
//si esto ocurre mato temporizador
window.clearInterval(init)
alert("Game Over.")
}else{
pintaSerp()
}
}





//variables globales-----
var tamCTablero=26//tamaño en columnas para el tablero de juego
var tamFTablero=15//tamaño en filas para el tablero de juego
var comidaF//posicion en fila para situar la comida
var comidaC//posicion en columna para situar la comida
var colorTablero="#000000"
var colorSerp="#ffffff"
var colorComida="#888800"
var direccion=2//direccion serpiente. 1=arriba,2=derecha,3=abajo,4=izquierda
var posisACrecer=0//variable que guarda cuantos cuadraditos ha de crecer la serp
var puntos=0//puntuacion obtenida

var serpF = new Array()//posiciones en filas para las posis de la serpiente
var serpC = new Array()//posiciones en cols para las posis de la serpiente
//todas las posiciones del tablero que "son" serpiente se guarda en estos 2 arays. Se podria haber hecho en una matriz de 2 dimensiones

//inicializo la serpiente con 3 posiciones o cuadraditos de larga
serpF[0]=10
serpF[1]=10
serpF[2]=10
serpC[0]=5
serpC[1]=4
serpC[2]=3


//pinto el tablero de juego y pinto comida
pintaTablero(tamFTablero+1,tamCTablero+1)
generaPapeo()

//cada 130 misisegs se llama a mueveSerp, es como si fuera el programa principal
var init=window.setInterval("mueveSerp()",130);
</script>
</body>
</html>
  #4 (permalink)  
Antiguo 14/02/2012, 10:09
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 9 meses
Puntos: 1532
Respuesta: juego serpiente en javascript acabado

no funciona en FF, Chorme ni Opera, deberás corregir la detección de las teclas para hacerlo crossbrowser, ¿en que navegador lo has probado?
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #5 (permalink)  
Antiguo 15/02/2012, 06:07
Avatar de Ruchu  
Fecha de Ingreso: octubre-2001
Mensajes: 698
Antigüedad: 22 años, 7 meses
Puntos: 2
Respuesta: juego serpiente en javascript acabado

Funciona en ie. Con las teclas a,w,d,s
  #6 (permalink)  
Antiguo 15/02/2012, 07:04
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 13 años
Puntos: 343
Respuesta: juego serpiente en javascript acabado

Podes usar los tags de highlight para el codigo, es ilegible así.

Aunque idealmente podrías hacer un fiddle, para testearlo en vivo.

Si te interesa, aca hay un tutorial de Andres Pagella.
__________________
blog | @aijoona
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 16:47.