JavaScript - Building an app - Bringing it All Together(object design, methods(functions))

Head First JavaScript Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web browser)

Head First JavaScript Programming (Eric T. Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)の Chapter 8.(Building an app - Bringing it All Together)の SHIP MAGNETS(No. 5066)を取り組んでみる。

SHIP MAGNETS(No. 5066)

コード(Emacs)

HTML5

<link rel="stylesheet" href="sample2.css">
<div id="board">
  <div id="messageArea"></div>
  <table>
    <tr>
      <td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td><td id="04"></td><td id="05"></td><td id="06"></td>
    </tr>
    <tr>
      <td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td><td id="14"></td><td id="15"></td><td id="16"></td>
    </tr>
    <tr>
      <td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td><td id="24"></td><td id="25"></td><td id="26"></td>
    </tr>
    <tr>
      <td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td><td id="34"></td><td id="35"></td><td id="36"></td>
    </tr>
    <tr>
      <td id="40"></td><td id="41"></td><td id="42"></td><td id="43"></td><td id="44"></td><td id="45"></td><td id="46"></td>
    </tr>
    <tr>
      <td id="50"></td><td id="51"></td><td id="52"></td><td id="53"></td><td id="54"></td><td id="55"></td><td id="56"></td>
    </tr>
    <tr>
      <td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td><td id="64"></td><td id="65"></td><td id="66"></td>
    </tr>
  </table>
  <div id="form0">
    <input id="input0" type="text" id="guessInput0" placeholder="A0">
    <button id="fireButton">Fire!</button>
  </div>
</div>

<pre id="output0"></pre>
<button id="run0">run</button>
<button id="clear0">clear</button>

<script src="sample2.js"></script>

CSS

div#board {
    position: relative;
    width: 600px;
    height: 506px;
    margin: auto;
    background: url('https://h0mria.by3302.livefilestore.com/y4m7Zbv2DUiSSrWMTMncTHf5ZNcfRhRE_ouivJkKIHIK7ruHT1N36LRAEpcJLAeI5srxwKFCTbr0fCYh4KEqYG9I55FEH5v6XUQHp10yrI-gXJZcZw0f_Cmgvz7SA8krGhubeWOrGFRrIBu7ow-ClK0brDE0N5O2TedlHIdFVEPsbmW3dtfUuxbJ8Esf5sd6v7w0TPrpihmeK7I76pkpm2j3Q?width=600&height=506&cropmode=none') no-repeat;
}
div#messageArea {
    position: absolute;
    top: 0px;
    left: 0px;
    color: rgb(83, 175, 19);
}
table {
    position: absolute;
    left: 101px;
    top: 57px;
    border-spacing: 0px;
}
td {
    width: 55px;
    height: 55px;
}
#form0 {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 4px;
    background-color: rgb(83, 175, 19);
}
#input0 #fireButton {
    background-color: rgb(152, 207, 113);
    border-color: rgb(83, 175, 19);
    font-size: 1em;
}
.hit {
    background: url('https://eumria.by3302.livefilestore.com/y4mXvI7_xGgS48KGpjAPqgz8o29TmRPnGdqdF8cAdQReB9YwfXvMQU_oIbhzhNrNbVqkq8qtWbarfCyYIG8ASoNxo3-VAzXn_2ARyGMgcwxrpEIqEzbi1xMkHEStkueNNDTMzW-vyvTKQkuo4VD7byJDjfLYgr9GaTJJhKbhL9NZBlaUkGq5kTXDiY0OQognrgHpB0LrrWOwcNq6BgTtn7a4A?width=52&height=13&cropmode=none') no-repeat center center;
}
.miss {
    background: url('https://iemria.by3302.livefilestore.com/y4mDWSs9SA9mMyB3gz0oiSoZ31vPpkmj9CuvUATZdyEn27bPrmCXcI5J1Q6bLJi3gjzD5jLhRvAYHtBkFtiU-hKhWT-9z8I37z1g0A5fpr_4ggeDy4rEE2SwZfBaTO2lHSDffnZp5A7xP4no8R-nQMsWJBjrrb4bn_EJoIWb-Y0v18y5EA9g8PwglENyTQpc76pj9N44QjwiacLM1f69oriQg?width=46&height=19&cropmode=none') no-repeat center center;
}

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0'),
    p = (x) => pre0.textContent += x + '\n';

let view = {
    displayMessage : (msg) => {
        let messageArea = document.querySelector('#messageArea0');
        messageArea.textContent = msg;
    },
    displayHit: (loc) => {
        let cell = document.getElementById(loc);
        cell.setAttribute('class', 'hit');
    },
    displayMiss: (loc) => {
        let cell = document.getElementById(loc);
        cell.setAttribute('class', 'miss');
    }
};

let moves = ['A6', 'B3', 'C4', 'D1', 'B0', 'D4', 'F0', 'A1', 'C6', 'B1', 'B2',
             'E4', 'B6'];

let an = {A:0, B:1, C:2, D:3, E:4, F:5, G:6};

let ships = [{locations: ['06', '16', '26'], hits: ['hit', 'hit', 'hit']},
             {locations: ['24', '34', '44'], hits: ['hit', 'hit', 'hit']},
             {locations: ['10', '11', '12'], hits: ['hit', 'hit', 'hit']}];

let output = () => {
    moves.forEach((loc) => {
        let loc0 = `${an[loc[0]]}${loc[1]}`;
        if (ships.some((ship) => ship.locations.some((loc) => loc === loc0))) {
            view.displayHit(loc0);
        } else {
            view.displayMiss(loc0);
        }
    });
};
let clear = () => {
    moves.forEach((loc) => {
        let loc0 = `${an[loc[0]]}${loc[1]}`,
            cell = document.getElementById(loc0);
        cell.removeAttribute('class');
    });
};


btn0.onclick = output;
btn1.onclick = clear;

output();