新年明けましておめでとうございます。
今年もよろしくお願い致します。
[toc]
さて、本日はタイトル通り、PHPスクリプトでBINGOゲームの土台
となる「シート」を作って、繰り返しみんなで遊ぶ方法をご紹介します！
プログラミングに興味を持って頂くきっかけになればいいな♭と思います。
コミュニケーションは相手がいてこそ！
PHPやJavaScriptなど、サーバーサイドの言語もわかる様になると
嬉しいことが増えます。楽しいことが増えます♫
以前からやってきた、HTMLにちょこちょこっと
PHPスクリプトを追加すると完成してしまいます！
もしも作れなかったとしてもあなたにはなんの損もありません。
すでに作ったシートを利用して遊んで頂だければ、私も幸いです。
ビンゴシートの番号をPHPスクリプトで生成する
今回もドットインストールで教わってきたので、デモページとともに解説していきたいと思います。
用意するファイルはたったの2ファイル！
HTMLファイルとCSSファイルです。
正確には、HTMLファイルの中にPHPファイルを組み込んで作ります。
HTMLに書くソースは本当に必要なものだけです。
分かりにくければ、今までに作ってきたものを応用すると理解しやすいと思います。
CSSの量も知れています。
JavaScriptは慣れない方には難しく感じるかも知れませんが、
３０数行なので挫折するほどでもありません。
私の書いたソースを載せておくので、参考にしていただけると幸いです。
とてもシンプルなプログラムです。
最初に台紙となる部分をHTMLで書いて、
バランスや色などをCSSで整えていきます。（ファイル名 ： bingo.css）
ビンゴゲームで使う数字をPHPで書きます。
CSSをリンクさせる場所もPHPを書く場所も決まっていますので、
ルールは守る必要があります。
とりあえずまずは書いてみましょう！
ちなみに全角スペースは、エラーを引き起こしますので
必ず最後に、入っていないかどうかを確認してください！
PHPをHTMLファイルに記述しよう
ではまず、bingosheet.phpを作ります。
みなさんお馴染みのHTMLとはどんなものか、覚えていない人は
いないと思いますが念のため。(こういうやつです ↓ ）
<!DOCTYPE html>
<html lang="ja">
<head>
<meata charset="utf-8">
<title>BINGO!</title>
<link rel="stylesheet" href="css/bingo.css">
</head>〜
ビンゴシートの枠となる表も、HTMLで書きます。
（このHTMLを書く場所は、今回はPHPの下です。）
肝心のPHP部分は、最初に書きます。
以下が実際のコードです。
<?php <!-- ここから PHPスクリプト -->
/* $nums[][] ＊ここはdotinstallの説明の通り、
bingoゲーム作成のためのメモです
B:$nums[0]1-15
I:$nums[1]16-30
..
O:$nums[4]
$nums[$i] 15+1~ $i * 15+15
*/ ＊ここまではdotinstallの説明の通り、
bingoゲーム作成のためのメモで必須ではありません)
$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";
//var_dump($nums);
＊ここはPHPはサーバーサイドスクリプトなので、
ローカル開発環境がある人のための記述です
//exit;
function h($s) {
return htmlspecialchars
($s, ENT_QUOTES, 'UTF-8');
}
?> <!-- ここまで PHPスクリプト -->
<!-- ここから htmlスクリプト -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meata charset="utf-8">
<title>BINGO!</title>
<link rel="stylesheet"
href="css/bingo.css">
</head>
<body>
<div id="container">
<table>
<tr>
<th>B</th>
<th>I</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<?php
for ($i = 0; $i < 5; $i++) : ?>
＊phpスクリプトを表の中に組み込み開始
<tr>
<?php
for ($j = 0; $j < 5; $j++) : ?>
＊phpスクリプトを表の中に組み込む
<td><?= h($nums[$j][$i]); ?></td>
＊phpスクリプトを表の中に組み込む
<?php endfor; ?> ＊phpスクリプト終了
</tr>
<?php endfor; ?> ＊phpスクリプト終了
</table>
</div>
</body>
</html> <!-- ここまでhtmlスクリプト -->
下部にドットインストールのレッスンのリンクがります。
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: #9999CC;color: #FFF;}th {color: #000;font-size: 22px;}
難しく考えると負けなので、難しく考えずに
コピペでもいいのでやってみることが大切です！
ヘッダー部分にリンクさせる
書けたファイル：CSSを ヘッダー部分に記述します。
<link href="../css/bingo.css" rel="stylesheet">
保存を忘れずに。
フォルダ構成の理解とサーバーへのアップロード
今回のフォルダ構成は bingosheet.php + bingo.css の２つだけですが
cssファイルは、分かりやすいようにフォルダを作成して、
その中に入れて作りました。（下図）
参考サイト： ビンゴシートを作ってみよう
初心者の方の為のプレゼント
上手くいかなかった場合は、責任をとります♫
こちらからダウンロードしてください。http://yukycohamabe.ciao.jp/AdminArtist/guestbook/bingosheet.zip
ユーザーの声 １
ビンゴゲームって、会社の忘年会でいつもあるけど
みんなでやると結構楽しいんだよね。
出し物がないときは、これを利用するべきね！
ユーザーの声 2
老若男女問わずにイベントで盛り上がれるのが
ビンゴゲームなんだよね。
目に見える単純さって、複雑な人生には必要よね。
単純な人生も大事だよって思えるのよね♫
ユーザーの声 3
みんなで簡単に遊べるから、いいね。
ムードが悪い時なんかによくやるんだよ。
チームワークは大事だからね。
気分転換に使っているよ。
友達を誘って遊ぶ♫
遊び方
完成したら、次はプリントアウトして早速お友達と遊んでみましょう。
それを自分の分とお友達の分を用意して配り、
ジャンケンでどちらからスタートするか決めましょう。
勝った方から、好きな数字に一つずつ丸をしていきます。
そして５つの数字を先に並べた方（縦でも横でも斜めでも OK ）が勝ちになります♩
ビンゴシートはPHPで作ったら、一生使えます。
頭の体操にもなって、とっても楽しいですよ♫
何回も使ってみてくださいね！
最後までお読み頂きありがとうございました。
