BINGOゲームの作り方(PHP)

新年明けましておめでとうございます。

今年もよろしくお願い致します。

[toc]

さて、本日はタイトル通り、PHPスクリプトでBINGOゲームの土台

となる「シート」を作って、繰り返しみんなで遊ぶ方法をご紹介します!

プログラミングに興味を持って頂くきっかけになればいいな♭と思います。

コミュニケーションは相手がいてこそ!

PHPやJavaScriptなど、サーバーサイドの言語もわかる様になると

嬉しいことが増えます。楽しいことが増えます

以前からやってきた、HTMLにちょこちょこっと

PHPスクリプトを追加すると完成してしまいます!

もしも作れなかったとしてもあなたにはなんの損もありません。

すでに作ったシートを利用して遊んで頂だければ、私も幸いです。

 

ビンゴシートの番号をPHPスクリプトで生成する

今回もドットインストールで教わってきたので、デモページとともに解説していきたいと思います。

用意するファイルはたったの2ファイル!

HTMLファイルとCSSファイルです。

正確には、HTMLファイルの中にPHPファイルを組み込んで作ります。

HTMLに書くソースは本当に必要なものだけです。

分かりにくければ、今までに作ってきたものを応用すると理解しやすいと思います。

CSSの量も知れています。

JavaScriptは慣れない方には難しく感じるかも知れませんが、

30数行なので挫折するほどでもありません。

私の書いたソースを載せておくので、参考にしていただけると幸いです。

とてもシンプルなプログラムです。

 
bingo

 

 

最初に台紙となる部分を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  の2つだけですが

cssファイルは、分かりやすいようにフォルダを作成して、

その中に入れて作りました。(下図)

サンプルデモはここをクリック

参考サイト: ビンゴシートを作ってみよう

 

初心者の方の為のプレゼント

上手くいかなかった場合は、責任をとります♫

こちらからダウンロードしてください。http://yukycohamabe.ciao.jp/AdminArtist/guestbook/bingosheet.zip

BINGOゲームの作り方(PHP)
ユーザーの声 1

ビンゴゲームって、会社の忘年会でいつもあるけど

みんなでやると結構楽しいんだよね。

出し物がないときは、これを利用するべきね!

BINGOゲームの作り方(PHP)
ユーザーの声 2

老若男女問わずにイベントで盛り上がれるのが

ビンゴゲームなんだよね。

目に見える単純さって、複雑な人生には必要よね。

単純な人生も大事だよって思えるのよね♫

BINGOゲームの作り方(PHP)
ユーザーの声  3

みんなで簡単に遊べるから、いいね。

ムードが悪い時なんかによくやるんだよ。

チームワークは大事だからね。

気分転換に使っているよ。

友達を誘って遊ぶ♫

遊び方

完成したら、次はプリントアウトして早速お友達と遊んでみましょう。

それを自分の分とお友達の分を用意して配り、

ジャンケンでどちらからスタートするか決めましょう。

勝った方から、好きな数字に一つずつ丸をしていきます。

そして5つの数字を先に並べた方(縦でも横でも斜めでも OK )が勝ちになります♩

 

ビンゴシートはPHPで作ったら、一生使えます。

頭の体操にもなって、とっても楽しいですよ♫ 

何回も使ってみてくださいね!


最後までお読み頂きありがとうございました。

 

Liked Liked
No Comments