Qual a melhor forma de modelar esta aplicação ?
Estou fazendo um jogo em que, a princípio, eu tenho um mapa onde o jogador começa com um quadrado (setor) selecionado aleatoriamente pelo jogo e clicando em qualquer quadrado adjacente ao que ele possui, ele "pega" esse novo quadrado. Em seguida ele pode clicar em qualquer quadrado adjacente aos que ele já pegou e assim por diante. Os quadrados do jogador vão ficar em outra cor. Levando em conta que isso é só o início. Ainda vou adicionar muito mais elementos. Estou em dúvida de qual a melhor forma de fazer isso, ou seja a mais simples e organizada de montar o script. Eu gostaria que passassem um pouco da sua experiência em relação a isso. Já tenho o seguinte código.
<html>
<head>
<style>
.setor{
margin: 0px;
padding: 0px;
float: left;
width: 40px;
height: 40px;
border: solid 1px lightblue;
background-color: lightgreen;
}
</style>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="mapa">
</div>
</body>
</html>
$( document ).ready(function() {
init();
});
function init(){
var largura = 10;
var altura = 10;
for(i=0; i<altura; i++){
for(j=0; j<largura; j++){
var html = "<div class=\"setor\" id=\"x" + j + "y" + i + "\"></div>";
$("#mapa").append(html);
}
getSetor(0,i).css("clear", "left");
}
initPosX = Math.floor((Math.random() * largura));
initPosY = Math.floor((Math.random() * altura));
console.log(initPosX);
console.log(initPosY);
getSetor(initPosX, initPosY).css("background-color", "red");
}
function getSetor(X, Y){
return $("#x" + X + "y" + Y );
}
/*function Setor(x, y){
this.x = x;
this.y = y;
var html = "<div class=\"setor\" id=\"x" + x + "y" + y + "\"></div>";
$("#mapa").append(html);Discussão (0)
Carregando comentários...