2018
01.13

ビンゴシートを作って、みんなでゲームを楽しむ方法♩

PHP

新年明けましておめでとうございます。
今年もよろしくお願い致します。

さて、本日はタイトル通り、PHPスクリプトでBINGOゲームの土台となる「シート」を作って、みんなで遊ぶ方法をご紹介します!

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

コミュニケーションは相手がいないと成り立たないのと同じで、HTMLばっかりやっていても埒があきません。PHPやJSなど、サーバーサイドの言語を取り入れないとコミュニケーションできません。

以前からやってきたHTMLにちょこちょこっとPHPスクリプトを記述することで、PHPを使う楽しさが解っていただけると思います!

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

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

 

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

 

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

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

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

HTMLに書くソースは本当に必要なものだけです。分かりにくければ、今までに作ってきたものを応用すると理解しやすいと思います。

CSSも知れています。JavaScriptは慣れない方には難しく感じるかも知れませんが、30数行なので挫折するほどでもありません。私の書いたソースを載せておくので、参考にしていただけると幸いです。

とてもシンプルなプログラムです。単純にHTMLソースを書いて、CSSファイル: styles.css とphpスクリプトを追加すれば、数字を一瞬で生成してくれるだけのものです!

もちろん書く場所が決まっていますので、ルールは守る必要があります。

CSSはヘッダー部分に記述します。

 

HTML下部に記述します。(こちらの位置は適当でOK!)

PHPをHTMLファイルに記述しよう

*以上の記述はドットインストールの動画を見て書いただけです。ドットインストールの動画を見てもうまくいかなければ、上記のソースを使って頂いても構いません。

 

CSSの中身を記述しよう

 

 

難しく考えると負けなので、難しく考えずに、コピペでもいいのでやってみることが大切です!

 

レンタルサーバーにアップロードしよう

今回のフォルダ構成は index.html + styles.css  の2つだけですが、
cssファイルは、分かりやすいようにフォルダを作成して、その中に入れて作りました。(下図)

サンプルデモ

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

友達を誘って遊ぶ♫

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

スクリーンショットの取り方はご存知ですか?

スマートフォン(iPhone)なら電源ボタンと画面下にあるボタンふたつを同時タッチすることで、データとしてビンゴシートを保存することができます。

それを自分の分とお友達の分を用意して配り、ジャンケンでどちらからスタートするか決めましょう。

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

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

ビンゴシートはPHPで時間をかけて作ったら、一生使えます。

頭の体操にもなって、とっても楽しいですよ♫ 何回も使って見てくださいね!

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

 

【PR】

 

AdminArtist Game 

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。