サンプルページ   絵合わせ 3

絵合わせ 3 -ゲーム

□小Win版

 

 

 

 

 

ホーム へ       サンプルページ   絵合わせ 3  eawase3.htm        □小Win版

”神経衰弱”ゲーム、時間を競います。  絵=草花(75x56pxl)、19個     DHTML。      画像、サイズなどのカスタマイズはテキストエディターなどで可。    all対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。   ※:関連情報 : 情報処理教育センター(素材集) > 春の草花秋の草花

デモは、画像のクリックで。 やり直し再開 などは、タイマーのクリックや、 [F5]キー を押し最新データ読み込みで!。〔”更新”アイコン押さえも、同じ。〕

 

< ご使用方法 >

 ・ 保存eawase3.htme を右クリック、【名前を付けてリンクを保存】 - <保存する場所>: ……、などで。  ※: 変わってしまった、ファイル名や、*.htm 中のパスは要修正。

 ・ ペーストは、eawase3.htme をテキストエディターで開き、ホームページ作成ソフトなどの ”テキストモード で、新しいページや hogehoge.htm(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。   ※: テキストモードコード/HTMLタグ挿入/HTMLメニュー など。

 ・ 編集 : hogehoge.htm に テキストモードでペースト 後は、ホームページ作成ソフトのデザインや通常モード、テキストモード、テキストエディターで編集します。  下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。     画像は 、同サイズ(≒106x807ピクセル)画像を準備、画像ファイル名を、image-0.jpg〜image-18.jpg に変更したもの。   image-0.jpg が初期画に36個表示。 

※: 外部ドメイン(サイト)にアップロートの画像などの使用は、非表示に注意。

 ・ アップロードは、hogehoge.htm と同じホルダーに、使用してる画像をアップロードします。   別ホルダーの場合は、hogehoge.htm の該当パス注意。

 ・ 作動テストは Edge〜 などで開いて。  更新の確認は、ブラウザーなどのキャッシュのクリア後に実施。  (1) [F5]キ- or Ctrl+Rキー を押し、最新データ読み込みで。  完全には、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [プライバシー、検索、サービス] - [閲覧デ-タをクリア] - [クリア-するデ-タの選択] - [v]閲覧の履歴 -[今すくクリア] をクリック。

 ・ 関連情報 : 色記号色記号5〃6フォントスタイルシートリファレンスホームページ開設入門HTMLをテキストエギタ-で編集

 

(*1) eawase3.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

Edgeなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

 

 

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent

お気に入りなどに表示するページ名(≠ファイル名)

 

 

 

画像ファイル名スタイル

 

 

 

 

 

初期画像ファイル名

 

 

 

 

 

 

 

 

 

 

 

 画像ファイル名スタイル

 

 

 

 


 

 

初期画像ファイル名ル

 

初期画像ファイル名


初期画像ファイル名

 

 

 

PCからのメッセージ

 

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="faviconu.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#190049; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
a:active { color:#1F002E; background-color:#C3FEBB; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Lucida Sans Regular; font-size: 12px}
-->
</style>

<base target="_blank">

<title>サンプルページ   絵合わせ 3</title>

<!-- ◆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->

====  この間、説明を省略。  ====

for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'image-' + i + '.jpg';
}
var map=new Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18);
var user = new Array();
var temparray = new Array();
var clickarray = new Array(0, 0);

}====  この間、説明を省略。  ====

scramble();
runclk();
for (i = 0; i <= 35; i++) {
document.f[('img'+i)].src = "image-0.jpg";
}
}
function runclk() {
min = Math.floor(ticker/60);
sec = (ticker-(min*60))+'';
if(sec.length == 1) {sec = "0"+sec};
ticker++;
document.f.b.value = min+":"+sec;
id = setTimeout('runclk()', 1000);
}
function scramble() {
for (z = 0; z < 5; z++) {
for (x = 0; x <= 35; x++) {
temparray[0] = Math.floor(Math.random()*36);
temparray[1] = map[temparray[0]];
temparray[2] = map[x];
map[x] = temparray[1];
map[temparray[0]] = temparray[2];
}
}
}
function showimage(but) {
if (oktoclick) {
oktoclick = false;
document.f[('img'+but)].src = 'image-'+map[but]+'.jpg';
if (ctr == 0) {
ctr++;
clickarray[0] = but;
oktoclick = true;
} else {
clickarray[1] = but;
ctr = 0;
setTimeout('returntoold()', 600);
}
}
}
function returntoold() {
if ((clickarray[0] == clickarray[1]) && (!user[clickarray[0]])) {
document.f[('img'+clickarray[0])].src = "image-0.jpg";
oktoclick = true;
} else {
if (map[clickarray[0]] != map[clickarray[1]]) {
if (user[clickarray[0]] == 0) {
document.f[('img'+clickarray[0])].src = "image-0.jpg";
}
if (user[clickarray[1]] == 0) {
document.f[('img'+clickarray[1])].src = "image-0.jpg";
}
}
if (map[clickarray[0]] == map[clickarray[1]]) {
if (user[clickarray[0]] == 0&&user[clickarray[1]] == 0) { finished++; }
user[clickarray[0]] = 1;
user[clickarray[1]] = 1;
}
if (finished >= 18) {
alert('\^o^/、おめでとう!。時間(分:秒)は'+document.f.b.value+' !');
init();
} else {
oktoclick = true;
}
}
}
// End -->
</script>
<!-- ◆ ---------- ↑ この間をコピー、編集、ペーストします。 ----------

(*2) eawase3.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕
 

 

タイトル色  タイトル

 

 

 

 

初期画像ファイル名

 

 

 

 

時計の吹き出し

 

<body OnLoad="init()">
<!-- ★ ↑の OnLoad="init()" と、↓ この間をコピー、編集、ペーストします。 ---------- -->
<center>
<h2><font size="4" color="#A00139">絵合わせ2  -ゲーム</font></h2>
<form name="f">
<table cellpadding="0" cellspacing="0" border="0">
<script language="javascript">
<!-- Begin
for (r = 0; r <= 5; r++) {
document.write('<tr>');
for (c = 0; c <= 5; c++) {
document.write('<td align="center">');
document.write('<a href="javascript:showimage('+((6*r)+c)+')" onClick="document.f.b.focus()">');
document.write('<img src="image-0.jpg" name="img'+((6*r)+c)+'" border="0">');
document.write('</a></td>');
}
document.write('</tr>');
}
// End -->
</script>
</table>
<div style="position: absolute; top:11px; right:10px;">
<input type="button" value=" " name="b" onClick="init()" title="再開は → クリック、又は[F5]キーで。" style="cursor:hand">
</form>
</div>
</center>
<!-- ★ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
 

ハロー(^. ^)