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;
}