SITE TOP  SNAP25  ゲームの作り方に関する解説・ソースのダウンロード

SNAP25 - ゲームの作り方に関する解説・ソースのダウンロード

SNAP25 はJavaScriptを使って記述されたゲームです。ただし、オリジナルの神経衰弱ゲームを公開するために、JavaScriptの知識は必要としません。ゲームで使用するJPEGファイルを26個、画像の説明に使うHTMLファイルを13個、後はメニュー画面を用意して頂くだけで公開の準備は完了します。

ここでは、一番簡単な作成方法を説明していきますが、皆様のアイデアとセンスで素晴らしい神経衰弱ゲームに仕上げて頂ければと思います。なお、JavaScriptを記述できる方はソースに変更を加えて頂いて構いませんが、変更したJavaScriptに関してのお問い合わせはお受けできないことをご了承下さい。

さぁ、以下の手順に従って、準備を進めましょう!

もし分かりにくい点がありましたら、まずは FAQ を参照してみて下さい。それでも不明な点があれば、遠慮なく作者まで メール でお問い合わせ頂ければと思います。

なお、オリジナルの神経衰弱ゲームの公開にあたっては、著作権表記や私のホームページへのリンク等、いくつかの条件が付くことをご理解下さい。


 ファイルのダウンロード はじめに、必要になるファイルをダウンロードして下さい。ZIP形式で圧縮されていますので、解凍して適当な作業用フォルダに配置します。なお、これ以降の手順で作成するファイルもこのフォルダ配下に保存する必要があります。

  ダウンロード

 画像ファイルの準備 1

 カード画像ファイル(大)
ゲームで使用するカード画像ファイルとして、200×200サイズのJPEGファイルを13個用意します。この画像はゲーム中に2枚のセットができた際、画面左上のインフォメーション画面に表示されます。
(* GIFファイル、PNGファイル等も使用可能です。FAQを参照して下さい。)

適当な大きさの画像を13枚用意して、お好みの画像編集ソフトを使ってそれぞれを200×200サイズに整形して下さい。編集後、1から13の通し番号を付けて、「originalimg」ディレクトリ配下に「*.jpg」というファイル名で保存します。
(例 : 1.jpg、13.jpg)

圧縮率を変更できる編集ソフトをお使いの場合、保存時に70%以上の圧縮を行うことをお勧めします。JPEGファイルの作成法は、FAQも参考にして下さい。

 画像ファイルの準備 2

 カード画像ファイル(小)
同じ元ネタ画像から100×100サイズのJPEGファイルを13個用意します。この画像は神経衰弱のカードとして、画面右のゲーム画面で表示されます。

先程と同じ元ネタの画像を使い、今度は100×100サイズの画像に整形します。上で作成したJPEGファイルと同じ通し番号を付けて、「originalimg」ディレクトリ配下に「*-small.jpg」というファイル名で保存します。
(例 : 1-small.jpg、13-small.jpg)

 HTMLファイルの準備 HTMLファイルを13個用意します。2枚セットになった時に画像の説明メッセージを表示するためのものです。

以下を参考にして画像の説明メッセージを記したファイルを13個作成し、画像と対応する通し番号を付けて、「message」ディレクトリ配下に「chara*.html」というファイル名で保存します。
(例 : chara1.html、chara13.html)

<html><body bgcolor="#000000" text="#dddddd">
 [1] 牡羊座 (3/21 - 4/19)
</body></html>

 タイトルの編集 ページのタイトルは自由に変更してもらって構いません。「index.html」のソースを開き、<title>タグ内を変更するだけです。

「SNAP25」という名前も必ず付けて頂く必要はありません。

 メニュー画面の準備 メニュー画面からゲーム画面「index.html」へのリンクを張ります。
自由にメニュー画面を作成して下さい。メニュー画面は既存のHTMLファイルでも構いません。

メニュー画面には「もりばん作のJavaScriptを利用している」旨の記述と、私のホームページへのリンクをお願いしています。お手数ですが、ご協力をお願い致します。

リンク先は次のURLにお願いしています。
http://hesonogoma.com/


バナー画像をお使い頂ける場合は、次のタグをコピーしてお使い下さい。

<center>
<a href="http://hesonogoma.com/">
JavaScript by もりばんのゲーム工房</a><br>
<a href="http://hesonogoma.com/">
<img src="http://hesonogoma.com/img/banner_1.gif" border="0"
 alt="もりばんのゲーム工房"></a>
</center>


表示は以下のようになります。

JavaScript by もりばんのゲーム工房
もりばんのゲーム工房

 リンクの編集 ゲーム画面からは、「Title」ボタンでメニュー画面に戻れるようにリンクを用意しています。

「info.html」をテキストエディタで開いて、14行目のリンク指定の箇所を適宜編集して下さい。以下の太字部分が編集対象です。

<a href="../snap25/index.html" target="_top"
 onMouseOver="mo(1)" onMouseOut="mt(1)">


 動作確認 準備ができたら、動作を確認してみましょう。「index.html」をクリックしてみて下さい。無事に動作したでしょうか?

うまく動作しない場合は、FAQを参考にして下さい。それでも解決できなければ、お使いのブラウザ(バージョン情報を含めて)と動作状況を明記して メール でご連絡下さい。可能な範囲でサポートさせて頂きます。
(返信には少しお時間を頂くかも知れません。予め御了承下さい。)

 ファイルのアップロード Webサーバに全てのファイルをアップロードしたら、オリジナルの神経衰弱ゲームの完成です!

Web上で公開されましたら、是非ぜひ作者までご一報下さい。ホームページを拝見するととも、「SNAP25」の公式ページからリンクさせて頂きます。