PHP

PHPでBINGO機能を作ってみた(ドットインストール参考)

index.php
<?php

require_once(__DIR__ . '/function.php');
require_once(__DIR__ . '/Bingo.php');

$bingo = new \MyApp\Bingo();
$nums = $bingo->create();

 ?>

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>BINGO</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="container">
        <table>
          <tr>
            <th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
          </tr>
          <!-- ループ処理 trを回す -->
          <?php  for ($i = 0; $i < 5; $i++) : ?>
          <tr>
            <!-- ループ処理 tdを回す -->
            <?php  for ($j = 0; $j < 5; $j++) : ?>
            <td><?= h($nums[$j][$i]); ?></td>
          <?php endfor; ?>
          </tr>
        <?php endfor; ?>
        </table>
    </div>
  </body>
</html>

config.php
<?php

ini_set('display_errors', 1);


require_once(__DIR__ . '/function.php');
 ?>

Bingo.php
<?php

namespace MyApp;


class Bingo {
  public function create() {
    $nums = [];

    for ($i = 0; $i < 5; $i++) {
      $col = range($i * 15 + 1, $i * 15 + 15 );
      shuffle($col);
      $nums[$i] = array_slice($col, 0, 5);
    }

    $nums[2][2] = "FREE";
    return $nums;
  }
}
 ?>

function.php
<?php

//htmlへ表示する際はエスケープする必要がある(htmlspecialcharsを使う)
function h($s) {
  return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}

 ?>

styles.css
body {
  font-family: Arial, sans-serif;
  text-align: center;
  font-size: 16px;
}

#container {
  margin: 0 auto;
  width: 322px;
}

td, th {
  width: 60px;
  height: 45px;
}

td {
  background: #F06292;
  color: #fff;
}

th {
  color: #F06292;
  font-size: 22px;
}

完成図
スクリーンショット 2018-05-03 9.13.39.png