絵合わせ 9c -ゲーム

 

 

 

 

ホーム へ       サンプルページ   絵合わせ 9c(編集の詳細記述)  eawase9c.htm     ※ : 関連情報 :絵合わせ 1 2 3 4 5 6 7 8 9 9a 9b 9c1 9c2 9c3 9c4 9c5 9c6  □スライドショー14b □ランダム画像2a

画像合わせゲーム、時間を競います。  6x6セル、画像数=18+1個(初期画像)、画像サイズ=100x100 ピクセル、モデル。     DHTML。      画像、 メッセージ、Winサイズなどのカスタマイズはテキストエディターなどで可。    all対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、画像のクリックで。  フルスクリーンの "オン/オフ"は、[F11]キ-で。   画像 などの表示サイズ変更は、[Ctrl]+マウススクロール で。   (IEの、右上の [ツール] - [拡大] -で、また Edgeの右上の [設定] - []ズーム]-でも可。 )

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、 eawase9c.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。     画像保存は、画像を右クリック、”名前を付けて画像を保存”、で。    ※: 変わってしまったファイル名や、*.html 中のパスは要修正。   

 ・ このDHTMLの実装方法は、eawase9c.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法hogehoge.html をテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。       画像変更は、サイズは任意、揃えます。  ここでは同サイズ(≒100x100 ピクセル)画像を準備、画像ファイル名を、x0.jpgx18.jpg に変更、x0.jpgは初期画像。   ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 11.x〜 などで開いて。    更新の確認は [F5]キー を押し、サーバーやブラウザーのキャッシュクリアー、最新データ読み込み(≠再アクセス)で行います。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像も転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 :色記号5〃6スタイルシートリファレンスホームページ開設 入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6XMLDHTML

 

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

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

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

 

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

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

 

 

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

Win幅 高さ (ドラッグ可変)

 

 

 

画像数

 

像ファイル名
7箇所に記述

画像数18の(例)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

列・行数

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Webページからのメッセージ

 

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link REL="SHORTCUT ICON" href="favicon.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:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font { font-size:12px;line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

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

<script language="JavaScript">window.self.resizeTo(700,850)</script><!-- Win幅 高さ -->
<!-- ◆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var pics = new Array();
      <!-- 画像数 -->
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
<!-- 画像ファイル名 x0.jpg〜 の(例)  -->
pics[i].src = 'x' + i + '.jpg ';
}
<!-- 画像数18の(例) -->
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);
var ticker, sec, min, ctr, id, oktoclick, finished;
function init() {
clearTimeout(id);
<!-- 画像数18X2−1  -->
for (i = 0; i <= 35 ;i++) {
user[i] = 0;
}
ticker = 0;
min = 0;
sec = 0;
ctr = 0;
oktoclick = true;
finished = 0;
document.f.b.value = "";
scramble();
runclk();
<!-- 画像数18X2ー1  -->
for (i = 0; i <= 35; i++) {
<!-- 画像ファイル名 x0.jpg〜 の(例)  -->
document.f[('img'+i)].src = "x0.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);
}fa
function scramble() {
<!-- 列・行数ー1  -->
for (z = 0; z < 5; z++) {
<!-- 画像数18X2ー1  -->
for (x = 0; x <= 35; x++) {
<!-- 画像数18X2  -->
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;
<!-- 画像数ファイル名 x0.jpg〜 の(例)  -->
document.f[('img'+but)].src = 'x'+map[but]+'.jpg ';
if (ctr == 0) {
ctr++;
clickarray[0] = but;
oktoclick = true;
} else {
clickarray[1] = but;
ctr = 0;
setTimeout('returntoold()', 600);  // 猶予時間(ms)
}
}
}
function returntoold() {
if ((clickarray[0] == clickarray[1]) && (!user[clickarray[0]])) {
<!-- 画像ファイル名 x0.jpg〜 の(例)  -->
document.f[('img'+clickarray[0])].src = "x.jpg";
oktoclick = true;
} else {
if (map[clickarray[0]] != map[clickarray[1]]) {
if (user[clickarray[0]] == 0) {
<!-- 画像ファイル名 x0.jpg〜 の(例)  -->
document.f[('img'+clickarray[0])].src = "x0.jpg";
}
if (user[clickarray[1]] == 0) {
<!-- 画像ファイル名 x0.jpg〜 の(例)  -->
document.f[('img'+clickarray[1])].src = "x0.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;
}
<!-- 画像数18の(例) -->
if (finished >= 18) {
alert(' \(^。^)/、やりました!。 記録(分:秒)は、'+document.f.b.value+' です。');
init();
} else {
oktoclick = true;
}
}
}
// End -->
</script>
<!-- ◆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
 

 

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

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

 

 

横中央配置

タイトル

 

列・行数

 

 

 

 

 

 

 

 

タイマー位置
タイマー メッセージ(吹き出し)

説明部分の削除

 

<body OnLoad="init()">
<!-- ★ ↑の OnLoad="init()" と、↓ この間をコピー、編集、ペーストします。 ---------- -->
<!--  横中央配置 -->
<center>

<h2><font size="4" color="#A00139">絵合わせ 9c ゲーム</font></h2>
<form name="f">
<table cellpadding="0" cellspacing="0" border="0">
<script language="javascript">
<!-- Begin
<!-- 列・行数ー1  -->
for (r = 0; r <= 5; r++) {
document.write('<tr>');
<!-- 列・行数ー1  -->
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()">');
<!-- 画像ファイル名 x0.jpg〜 の(例) 列・行数  罫線無し -->
document.write('<img src="x0.jpg" name="img'+((6*r)+c)+'" border="0">');
document.write('</a></td>');
}
document.write('</tr>');
}
// End -->
</script>
</table>
<!--  タイマー位置  -->
<div style="position: absolute; top:8px; right:100px;">
<input type="button" value=" " name="b" onClick="init()" title="クリック → 再開するさ。♪└|・.・|┐♪" style="cursor:hand">
</form>
</div>
<!--  横中央配置 -->
</center>

<!-- ★ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

<!--  以下は、説明部分、応用では削除して使用。  -->
 

 

< 補足 >    適時参照あれ!。

 ・ メモ帳によるHTMLソース(タグ)を見ながらの直接編集方法。

ハロー(^. ^)