lunes, 28 de julio de 2014

Juego de solitario desarrollado en javascript codigo puro

puedes ver el juego funcionando dando Click Aqui

En este juego desarrollado en javascript  para cualquier navegador que soporte este lenguaje  primero vamos a descargar las imagenes esta la ponemos en una carpeta llamada images aqui les dejo cada una:
Empezamos con los treboles :

AS de trebol

4 de trebol2 de trebol3 de trebol


7 de trebol5 de trebol6 de trebol
10 de trebol8 de trebol9 de trebol

K de trebolj de trebolQ de trebol

Luego los Diamantes:

AS de diamante

4 de diamante2 de diamante3 de diamante



7 de diamante5 de diamante6 de diamante



10 de diamante8 de diamante9 de diamante



K de diamanteJ de diamanteQ de diamante


Luego los Corazones:

AS de corazones

4 de corazones2 de corazones3 de corazones



7 de corazones5 de corazones6 de corazones



10 de corazones8 de corazones9 de corazones



K de corazonesJ de corazonesQ de corazones


Luego las Picas:

AS de picas

4 de picas2 de picas3 de picas




7 de picas5 de picas6 de picas



10 de picas8 de picas9 de picas



K de picasJ de picasQ de picas

por ultimo estas 3 imagenes:




luego bajamos los siguientes js y css:

style.css

solitario.js



luego cargamos en la cabezera o antes del head los siguientes  js y css puro codigo javascript:



<!--separador inicio
http://youtubepeliculascompletas.blogspot.com/
http://javayotros.blogspot.com/
http://efectosparabloggerywebs.blogspot.com/
http://appyjava.blogspot.com/-->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300|Slackey" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css" media="screen"></LINK>
<script> 
 var cardBackgroundArray = new Array();
 cardBackgroundArray.push('images/card_bg1.png'); 
 cardBackgroundArray.push('images/card_bg2.png'); 
 cardBackgroundArray.push('images/card_bg3.png'); 
</script>
<script src="solitario.js"></script> 
<script>
 window.onload = initSolitaire; 
</script>


<!--<a href="http://efectosparabloggerywebs.blogspot.com/"></a>
<a href="http://javayotros.blogspot.com/"></a>
<a href="http://youtubepeliculascompletas.blogspot.com/"></a>-->
<!--separador final-->





luego por ultimo llamamos al script en el cuerpo de html o mejor dicho en el body luego dela etiqueta body

<div class="container">
 <div class="row">
  <div class="col-xs-12 center">
   <h1>Juego de Solitario</h1><hr>
   <audio id="win_sound" src="win.ogg"></audio>
   <span><b>Tiempo:</b> <span id="tiempo"></span></span>
   <div class="col-xs-12" style="text-align:center;" id="bg_win"></div>
  </div>
 </div>
 <div class="row">
  <div class="col-xs-6" id="bg_deck">
   <div style="background:none repeat scroll 0% 0% #111" id="bg_deck_inner"></div>
   <div style="background:none repeat scroll 0% 0% #111" id="bg_deck_shown"></div>
  </div>
  <div class="col-xs-6" id="bg_aces"></div>
 </div>
 <div class="row">
  <div class="col-xs-12" id="bg_seven"></div>
 </div>
 <div class="row">
 
 </div>
</div>
<div id="movingCardContainer"></div>
puedes ver el juego funcionando dando Click Aqui