JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://searls.github.com/jasmine-all/jasmine-all-min.js"></script>
<html>
<head>
</head>
<body>
<!--<div class="conteudo">
</div>
-->
</body>
</html>
CSS
body {
background-color: white !important;
}
.conteudo {
background-color:white;
width: 412px;
height: 513px;
padding:2px;
}
.carta {
display:block;
float:left;
width: 101px;
height: 171px;
}
.backcover {
width: 101px;
height: 171px;
border: 1px dashed black;
float:left;
background-image: url(http://subtlepatterns.com/patterns/paper_fibers.png);
background-position: initial initial;
background-repeat: initial initial;"
display: block;
}
JavaScript
/***
Dojo no DESDR => Javascript + jQuery + Jasmine
Jasmine: http://pivotal.github.com/jasmine/
jQuery: http://api.jquery.com/
Jogo da Memória
- Especificação
- jogo da memória com 6 imagens
- tabuleiro começa vazio e a ordem das peças deve ser definida.
- ao clicar na carta a mesma é virada e exibida ao usuário, e seu sequencial deve ser armazenado
- no clique subsequente, se a imagem da carta for a mesma do elemento anterior, então as duas permanecem exibidas
- caso a imagem na segunda carta virada não coincida com a carta anterior, as duas são desviradas
- o jogo acaba quando todas as cartas estiverem viradas
- o usuário deve ser notificado de que o jogo finalizou
- ao encontrar um par, as cartas do par terão um efeito de realcce(highlight) como feedback para o usuário
Recomendações
- Prioridade para a parte lógica do jogo. Vamos implementar os requisitos através de Desenvolvimento Orientado a Testes, usando o framework jasmine
- Após a implementação da lógica faremos a finalização da interface com o usuário. E vamos seguir a mesma metodologia de Teste em primeiro lugar para essa etapa.
- Vamos trabalhar em pares, com piloto e co-piloto. A dupla deve verbalizar o trabalho executado.
- A audiência deve observar em silêncio e ajudar apenas quando solicitada pela dupla no comando.
***/
var host_images = "https://raw.github.com/abner/jogocartas/master/images/";
var images = [
{ id:'boy', filename: 'Character%20Boy.png' },
{ id: 'bug', filename: 'Enemy%20Bug.png'},
{ id: 'gem-blue', filename: 'Gem%20Blue.png'},
{ id: 'gem-green', filename: 'Gem%20Green.png'},
{ id: 'gem-orange', filename: 'Gem%20Orange.png'},
{ id: 'rock', filename: 'Rock.png'}
];
var deck = [];
var selecionada = -1;
//for para ilustrar como iterar no array
for(index in images) {
console.log(images[index].id);
console.log(images[index].filename);
}
function obterUrlImagem(imagem) {
...