Question

我为火车做了一个记忆游戏，我有一些问题

我有一张有四张照片和八张卡片的画。如何在八张卡上发送四张图片？

知道每张图片应该发送两次，但不能连续发送？

每张卡代表一种设计
所有卡片都是双重
不能有3次相同的图片

这是我的代码：

JS：

// RULES
var rules = {
			"level":{
					"1":{
						"numberOfCard": 8,
						"time": false,
						"life": false
					},
					"2":{
						"numberOfCard": 16,
						"time": false,
						"life": false
					},
					"3":{
						"numberOfCard": 16,
						"time": 120,
						"life": false
					},
					"4":{
						"numberOfCard": 16,
						"time": 120,
						"life": 16
					}
				}
			}

var pictures = ["http://i.imgur.com/TA0OiA2.jpg", "http://i.imgur.com/sjtxLQM.jpg", "http://i.imgur.com/rYqnVSn.jpg", "http://i.imgur.com/E2XwA5s.jpg"];

$(document).ready(function() {
	
	// Instanciation d'un objet game
	game = new Board(rules);
	$(".square").click(function(){
		let card = game.flipCard( $(this) );	
		console.log(card);
	});
	
});

class Board{
	
	//On object creation
	constructor(){
		let stage = 1;
		this.rules = rules;
		this.initialisation(stage);
	}
	
	initialisation(stage){
		this.generateBoard(rules.level[stage].numberOfCard);
		// Do something after generating the board
	}
	
	shuffleBoard(listOfCards){
		for(let i = 0; i<listOfCards.length; i++){
			// Génère un nombre entre 0 et la longueur de l'array -1
			let random = Math.floor(Math.random() * listOfCards.length);
			
			//Puis intervertis les valeurs
			[listOfCards[i], listOfCards[random]] = [listOfCards[random], listOfCards[i]];
		}
		return listOfCards;
	}
	
	generateBoard(numberOfCards){
		// Crée un array du nombre de carte
		var listOfCards = [];
		
		// Qu'on remplis du nombre de carte nécessaire
		for(let i = 0; i<numberOfCards; i++){
			let id = i+1;
			listOfCards.push(id);
		}
		
		// Puis on l'envois à la fonction shuffle pour le mélange, qui retournera un array mélangé 
		let finalStack = this.shuffleBoard(listOfCards);
		// Enfin on génère les cartes selon l'array reçu
		var html ="";
		for(let i = 0; i<finalStack.length; i++){
			html += "<div class='square square-" + finalStack[i] + "'>";
				//html += "<img src='http://i.imgur.com/TA0OiA2.jpg' alt='' />";
			html += "</div>";
		}
		$(".wrapper").html(html);
	}

	flipCard(card){
		card.addClass('flip');
		return card.attr('class');
	}
}

body, 
.wrapper{
	display: flex;
	align-items: center;
}

body{
	height: 100vh;
	justify-content: center;	
}

.wrapper{
	width: 480px;
    background: grey;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 60px;
}

.square{
	width: 100px;
    height: 100px;
    margin: 9px 0;
    background: green;
	transition: all .4s ease-in-out;
}

.flip{
	transform: rotateY(-180deg);
	background: red;
}

img {
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="board">
<section class="wrapper"></section>
</body>

非常感谢

以两倍数量的项目发送数组

0 个答案: