Touché Coulé

Touché Coulé en JQuery

by Gaelle

HTML

<div id="home">
  <h1>Mon QG</h1>
  <input id="moi" type="text" placeholder="Mon nom">
  <input id="canon" type="text" placeholder="Prochaine torpille en ...">
  <div id="history">
  </div>
</div>

<div id="no-mans-land">
  <code>NO MAN'S LAND</code>
</div>

<div id="enemy">
  <h1>Adversaire</h1>
  <p id="megaphone">> En attente d'un joueur</p>

  <table border="1">
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
    <tr>
      <th>A</th>
      <td id="a1"></td>
      <td id="a2"></td>
      <td id="a3"></td>
      <td id="a4"></td>
      <td id="a5"></td>
      <td id="a6"></td>
      <td id="a7"></td>
      <td id="a8"></td>
      <td id="a9"></td>
    </tr>
    <tr>
      <th>B</th>
      <td id="b1"></td>
      <td id="b2"></td>
      <td id="b3"></td>
      <td id="b4">X</td>
      <td id="b5">X</td>
      <td id="b6">X</td>
      <td id="b7"></td>
      <td id="b8"></td>
      <td id="b9"></td>
    </tr>
    <tr>
      <th>C</th>
      <td id="c1"></td>
      <td id="c2"></td>
      <td id="c3"></td>
      <td id="c4"></td>
      <td id="c5"></td>
      <td id="c6"></td>
      <td id="c7"></td>
      <td id="c8"></td>
      <td id="c9"></td>
    </tr>
    <tr>
      <th>D</th>
      <td id="d1"></td>
      <td id="d2"></td>
      <td id="d3"></td>
      <td id="d4"></td>
      <td id="d5"></td>
      <td id="d6"></td>
      <td id="d7"></td>
      <td id="d8"></td>
      <td id="d9">X</td>
    </tr>
    <tr>
      <th>E</th>
      <td id="e1"></td>
      <td id="e2"></td>
      <td id="e3"></td>
      <td id="e4"></td>
      <td id="e5"></td>
      <td id="e6"></td>
      <td id="e7"></td>
      <td id="e8"></td>
      <td id="e9">X</td>
    </tr>
    <tr>
      <th>F</th>
      <td id="f1"></td>
      <td id="f2"></td>
      <td id="f3"></td>
      <td id="f4"></td>
      <td id="f5"></td>
      <td id="f6"></td>
     ...

CSS

td,
th {
  width: 20px;
  height: 20px;
  color: white;
}

th {
  background-color: black;
}

td {
  background-color: blue;
}

#no-mans-land {
  background-color: green;
  height: 100px;
  margin: 50px 0;
}

.redbg {
  background-color: red;
}

.winbg {
  background-image: url ("http://i.imgur.com/8AV7WZ4.jpg");
}

JavaScript

var boatOne = ["b4", "b5", "b6"];
var boatTwo = ["d9", "e9", "f9"];

// Met à jour le message affiché à l´adversaire à chaque nouvelle
// lettre saisie dans l´input ´Mon nom´
$("#moi").keyup(function(event) {
  var myName = $("#moi").val();
  $("#megaphone").text(promptMessage(myName));
});

// Génère le message diffusé à l´adversaire
function promptMessage(playerName) {
  if (playerName.length > 0) {
    return ">> " + playerName + " va attaquer en ...";
  } else {
    return "> En attente d'un joueur";
  }
};


$("#canon").keypress(function(event) {
	if (event.keyCode == 13) {
  	let torpedo = $('#canon').val().toLowerCase();
  	let roger = '#' + torpedo;
  	$(roger).addClass('redbg');
  	$('#history').text(torpedo);
    console.log(boatOne.indexOf(torpedo));
    if (boatOne.indexOf(torpedo) !== -1) {
    	$('#history').append('<p>TOUCHE</p>');
      boatOne.splice(boatOne.indexOf(torpedo),1);
      console.log(boatOne);
      if (boatOne.length == 0) {
      	$('#history').append('<p>COULE</p>');
      }
    }
    else if (boatTwo.indexOf(torpedo) !== -1) {
    console.log(boatTwo.indexOf(torpedo));
    	$('#history').append('<p>TOUCHE</p>');
      boatTwo.splice(boatTwo.indexOf(torpedo),1);
      console.log(boatTwo);
      if (boatTwo.length == 0) {
      	$('#history').append('<p>COULE</p>');
      }
    }
    else {
    	$('#history').append('<p>PLOUF !</p>');
    }
    if (boatOne.length == 0 && boatTwo.length == 0) {
    	$('#history').append('<p>WIN !</p>');
  	}
  }
});