johmonjin のすべての投稿

音声ファイルの作り方

プログラミング

音声の作り方

ビンゴゲームを作るに当たり、MP3やWAV形式の音声を作るには、テキストを音声に変換してくれるサイトが便利です。今回、Sound of Textを利用させていただきました。

サイトを参照すると上図の①の画面が現れます。Text欄に変換する文言、Voice欄で言語を選択してSubmitをクリックすれば、②の画面が現れます。変換するテキストを確認してDOWNLOADをクリックすると、所定のフォルダにmp3ファイルがダウンロードされます。

テキストの設定例

「リーチ」、「ビンゴ」などの掛け声や感嘆詞音声はサイト上に多く存在し、ダウンロードフリーのものを用意できますが、ユーザーフレンドリーなメッセージは独自に準備します。『カード番号一番さん、ビンゴ完成です。あめでとうございます。』のようなメッセージ音声ファイルを作りました。

音声ファイルの利用例







《音声で意思疎通！》

けさ、ちょっと言い過ぎました。ごめんなさい！


サンプルコード

<!DOCTYPE html>
<html>
<body>
<DIV id="top" style="width:480px; height:400px; font-size:24px;  color:deeppink; border:1px solid green; display:block;">
<audio id="apology" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/09/pardonme.mp3" controls controlslist="nodownload"></audio><BR>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeIePErZuNGrIvnBBjYQoeTFz-DsGHMUV0ady7SMI3UltzSWsChQ" 
width="320" height="307" align="left" border="1">《音声で意思疎通！》<BR><BR>けさ、ちょっと言い過ぎました。ごめんなさい！
</DIV>
</body>
</html>

 

ビンゴゲーム作成部品

プログラミング

ビンゴゲームの部品

ビンゴゲームをJavaScriptで作成するに当たり、様々な機能を分担するパーツから成り立ちます。今回、参加者全員のヒット状態を一覧表に表示するパーツを作成しました。

thやtd要素へのアクセスは独特の方法がありますが、ここではそれぞれにidを付加したオーソドックスな方法を採用しています。

背景色を動的に設定するにはdocument.getElemeniById(‘idxx’).style.backgroundColorに背景色を代入します。

例えば、下の図に示すようにカード番号3番の12組のヒット数を表示しています。G列がビンゴ、5行目がリーチであり、背景色をそれぞれマゼンタ、ディープスカイブルーでそれ以外はヒット回数を表しています。

余談ですがスタイルシートにはbackground-colorプロパティがあり、背景色を指定するにはstyle.background-colorとすべきですが、-（ハイフン）はマイナス演算子と誤解されエラーになります。そのため、ハイフンを省き次の文字を大文字にするのが習わしです。これをマスターする時は悩みましたがかなりの月日が経ちました。

背景色動的設定機能を拡張して右の図のようにサインカーブを描いてみました。サイン値は０～２π間で-1～1の値を採りますが、角度を1～12、サイン値を12組に引き当てています。

背景色を動的に設定する機能を応用した描画

B I N G O 1 2 3 4 5 \ /


サンプルコード

<Div id="wrapper" style="width:180px; font-size:20px; background:aliceblue;">
<table id="status" style="text-align:center; border-collapse:collapse; width:20px; font-size:14px;" border=1>
<tr><th>  </th><th bgcolor="pink">B</th><th bgcolor="pink">I</th><th bgcolor="pink">N</th><th bgcolor="pink">G</th><th bgcolor="pink">O</th>
<th bgcolor="lime">1</th><th bgcolor="lime">2</th><th bgcolor="lime">3</th><th bgcolor="lime">4</th><th bgcolor="lime">5</th>
<th bgcolor="yellow"><span style="font-family:Arial;">&#x5c;</span></th><th bgcolor="peachpuff">/</th></tr>
</table>
</Div>
<script type="text/javascript" charset="utf-8">
var v, w, x;
var table = document.getElementById('status');				// table要素を生成
for (var i = 1; i <= 12; i++) {								// tr部分のループ
    var tr = document.createElement('tr');					// tr要素を生成
    for (var j = 0; j < 13; j++) {							// th・td部分のループ
      x='n'+letter2(i)+letter2(j);							// id作成
      if(j==0)	{v='th';w=i;}								// th table-header
      else		{v='td';w=0;}								// td table-data
      var td = document.createElement(v);					// th・td要素を生成
      td.id = x;											// th・td要素にidを付ける
      td.textContent = w;									// th・td要素内にテキストを追加
      tr.appendChild(td);									// th・td要素をtr要素の子要素に追加
    }
    table.appendChild(tr);									// tr要素をtable要素の子要素に追加
}
document.getElementById('wrapper').appendChild(table);		// 生成したtable要素を追加する

    document.getElementById('n0301').innerHTML = 2;
    document.getElementById('n0302').innerHTML = 0;
    document.getElementById('n0303').innerHTML = 1;
    document.getElementById('n0304').innerHTML = 5;
    document.getElementById('n0304').style.backgroundColor = "magenta";
    document.getElementById('n0305').innerHTML = 3;
    document.getElementById('n0306').innerHTML = 2;
    document.getElementById('n0307').innerHTML = 0;
    document.getElementById('n0308').innerHTML = 0;
    document.getElementById('n0309').innerHTML = 1;
    document.getElementById('n0310').innerHTML = 4;
    document.getElementById('n0310').style.backgroundColor = "deepskyblue";
    document.getElementById('n0311').innerHTML = 3;
    document.getElementById('n0312').innerHTML = 2;

function letter2(num) {return ('0' + num ).slice(-2);} <!-- send '01' -->
</script>

 

サバイバル生活になじむ

ものづくり筆耕ブログ

自然に根付いた生活

台風15号による千葉県の災害復旧が思うように進んでいないと報道されています。最近、温暖化の影響か台風でなくともちょっとした暴風雨で大きな災害が起きます。

現代住民は文化的な生活に慣れ過ぎて普段と異なる生活には耐えがたくなっています。

電気、水道、ガスなどのインフラが一つでも欠落すると生きていけないと嘆きます。衣食住が自給自足で回っているわけではないので致し方ありません。

サバイバルの知識が備わっていないのです。トイレが水洗になり清潔になって蚊やハエなどが発生しなくなり伝染病が蔓延することもなくなりましたが、急激な文化的生活の定着は脆さを内包しています。

2011.3.11の東日本大震災の経験が大して活かされていないようです。電気がなくてもしばらくは生活できるようにとは現実、難しいです。

コンロや七輪の扱い方をできる人は少ないです。キャンプ生活などのリクレーションは遠くなり、カセットガスボンベを使った料理をできる人は多くありません。

国土強靱化担当大臣が存在するのにサバイバル人材が育たないのは残念です。一億総右習えのもと、自給自足を目指す人を変わった人間などと評する風潮では難しいでしょう。

多彩な価値観の尊重を！

ビンゴカードの作り方3

プログラミング

再利用などについて

動作や行動について何度も繰り返して利用されるのが一般的です。そのため大きな組織では分厚いマニュアルが用意されています。ソフトウェアやプログラミングにおいても繰り返し利用されることがほとんどです。

そのためには、切れ目にはきちんとした管理がなされなければなりません。お店のレジスターでは購入者ごとに買い物額が累計されるので、開始時には合計値を0にしますが、その前に一日の売り上げや支店ごとの売り上げ管理のために累計加算がなされます。

下記のサンプルはsumというグローバル変数を利用する前にリセットすべきであることを示しています。これに対しsumationという関数のローカル変数totalは毎回、利用される直前にクリアされます。

<script>
var sum=0;							//グローバル変数
for(var i=0; i<=10; ++i) sum+=i;
alert("SUM10="+sum);				//55
for(var i=0; i<=20; ++i)	sum+=i;
alert("SUM20="+sum);				//265
sumation(10);						//55
sumation(20);						//210

function sumation(n){				//総計算出
var total=0;						//ローカル変数
  for(var i=0; i<=n; ++i) total+=i;
  alert("N="+n+" TATOL=" + total);	//10 55, 20 210
}
</script>

このビンゴ運用研究システムでは、複数のビンゴカードを作成するに当たり、1回目、2回目とプログラムコードを再利用（リユース, reuse）するために、ヒットした回数をリセットしたり、画面を初期状態に戻さなければなりません。

この処理を再利用処理と呼ぶことがあります。再利用処理を含むシステムは通りいっぺんのことを成し遂げ終了するシステムよりも複雑・難解になります。

多人数で起きる事象の研究

ビンゴは２～３人で行うものではありません。ある程度の人数がそろわないと著しく面白みを欠きます。パソコンやスマホ画面は小さく参加者全員のカードを表示することは難しいですが、特定者を選択して時分割に表示することは容易です。

複数人数で起きる事象を独りビンゴを重ねて行うことでおおむね実態に近い体験が可能です。

また、このシステムはビンゴカードを紙で配布しないで参加者のスマホに送付する方式を目指しています。

並びステータス監視を改良

並びは縦5組、横5組、斜め2組の合計12組を制御します。25ポジションがどの組に属するかを制御するには下図に示しテーブルを使うように改訂しました。

テーブルの数値3は縦横、7は縦横左斜め、11は縦横右斜め、15は縦横左斜め右斜めに属します。縦はB～O列、横は一～五行、左斜めは＼斜、右斜めは／斜でできごと欄に表示されます。

例えばG列二行に位置する数字にヒットした場合、左のテーブルを参照すると11を得ます。11は縦横右斜めの3組に関与し、横はc4（G列）、縦はc6（二行）を、右斜めはc11（／斜）をカウントアップします。

左の制御テーブルを使用すればカウントすべき組の扱いが簡潔になります。

改良されたビンゴゲーム

ビンゴマシンのボールを入れた籠をクリックしてスタートです。

🎑動作の説明

  1. ビンゴマシンのボールを入れた籠をクリックすると籠が回転し始めビンゴ番号が2秒間隔で確定します。

  2. 選ばれたビンゴ番号がビンゴカードの中にあればヒットになり該当する組の通算回数をカウントアップしピッという確定音が鳴ります。
  3. ヒットしたボールの色がシアンから薄い赤に変化しビンゴカードに穴をあけた状態に変化します。
  4. カウントアップされた値は縦横斜めの所定位置に累計値が表示されます。4でリーチ、5でビンゴ状態です。該当表示欄にできごととして表示されアナウンスが流れます。
  5. ビンゴカードの中に無ければブッという音が鳴ります。
  6. ビンゴが完成し「おめでとう」がアナウンスされビンゴ籠が停止したら、再びビンゴ籠をクリックすると次のビンゴカードを発行することができます。

次回の予定

次回は音声の作り方や設定について語る予定です。

追加説明

サンプルコードの全貌は故あって非公開です。ANDビット演算（たとえばa = b & c;）の文法エラーを解決できずやむを得ず、a = ((a | b) ^ a) ^ b;と代替していることが一因です。

 

ビンゴカードの作り方2

プログラミング

当ブログのスタンス

当ブログでは電子福引き器への応用や万華鏡と万葉を彩る恋歌などユニークなゲームを発表してきましたが、完成されたゲームそのものよりもゲームの作り方に重きをおいてきました。

ビンゴゲームについてもグループの懇親会で即、使えそうなゲームではありません。

本格的なビンゴゲームを設計、開発するための指針を語っています。

今回は一人ビンゴゲームのような雰囲気に近く、コンピューターが作り出したビンゴカードを、ビンゴマシンに見立てた乱数生成器によって確定されたビンゴ番号がリーチ、ビンゴ状態になるのを見届けるゲームです。

前回に述べましたが、如何にビンゴカードを作るか、そして、リーチ・ビンゴ状態を如何に把握するかに腐心しています。

ビンゴカードの作り方のおさらい

ビンゴマシンに直接、触ったことはありませんが想像で話を進めます。

ビンゴマシンも様々な形態があるようですが、ここでは左上の図のような籠に右図に示したような1～75の番号が付いているボールを入れて回転させ、ビンゴ番号を決定する仕組みを電子的に実現させます。

一度、出目として出たボールは二度と使われることがないため、ゲームが収束方向に向かいやすくなります。

並びのステータスの監視

ビンゴカードの作り方に加えて重要なのが、並びのリーチ、ビンゴ状態の把握です。並びは縦5組、横5組、斜め2組の合計12組を制御します。

一つのボールは縦と横の最低2組に関与し、左たすき掛けと右たすき掛けのどちらかを加えた3組、両たすき掛けを加えた4組まで存在します。

もっとも高い景品が期待されるのは、N列、三行、左たすき掛け、右たすき掛けが同時にリーチ状態で最後のど真ん中のN列三行にヒットすれば、シングル、ダブル、トリプルを超えてクアドラプルのビンゴ完成です。こうなれば2倍、4倍、8倍返しの褒賞になることでしょう。

今回は、複雑さを解消するためにシングルビンゴの完成でゲーム終了としています。これまでの原理を理解すれば、最終仕様を実現することは難しくないでしょう。

ビンゴゲーム理解のために

本格的なビンゴゲームを作成するために、自動的にシミュレーション動作を行うゲームを取り上げます。ビンゴボールの集まりをクリックしてスタートです。ビンゴの完成でゲームは終了します。リーチとビンゴのできごとを音声でアナウンスします。

🍀動作の説明

  1. ビンゴボール集団画像をクリックするとビンゴ番号が2秒間隔で確定していきます。この画像は次のクリックまで回転し続け、回転後のクリックで停止し動作は中断し再度のクリックでゲームは継続します。

  2. ビンゴ番号がビンゴカードの中にあればヒットになり該当する組の通算回数をカウントアップしピッという確定音が鳴ります。ヒットしたボールの色がシアンから薄い赤に変化しビンゴカードに穴をあけた状態に変化します。
  3. ビンゴカードの中に無ければポッという音が鳴るだけです。この状態が何度も繰り返されることがありますが、実際は複数のカードを対象にするので本番ではもっと少ない回数になるので問題はないでしょう。

  4. ヒットして、縦横斜めの該当する組が通算回数4回のとき、該当組み名とリーチが表示・アナウンスされます。

  5. 次にビンゴ番号が更新されたら同様にヒットの確認が行われてビンゴ完成ではおめでとうと祝福のアナウンスが流れます。
  6. リーチが起きた順にビンゴが完成するとは限りません。
  7. ひとつの番号が複数の組に関与している場合、リーチやビンゴが重複することがありますが、前述のとおり、ひとつに省略しています。

次回の予定

次回は内部動作を把握できるような機能を付けてみます。

 

「500 Internal Server Error」で悩んだら

ものづくり筆耕ブログ

・htaccessの編集ミス

久しぶりに「500 Internal Server Error」が発生しました。.htaccessファイルを編集した直後に起きたので編集ミスを疑いました。かつては生命に関わるほどの大事故を起こしたようにアタフタしたことがありました。

以前に復旧を急ぐあまり確信を持てぬままに行動に移して大やけどしたことがありました。ブログの内部を更新する場合、サーバーにログインしなければなりませんが、WEBの通信環境を変更するにあたり、いつもと違うパソコンからログインしようとしたりした時には、ロック状態になることがあります。

これは繰り返しの攻撃から保護するものであり、やむを得ぬ仕儀です。上記の図でCGIに関する記事は、許可を得ずにブログの内部を更新しているという状況です。

落ちついた行動

ブログの内部更新のみならず、ブログの閲覧もできない現象にはびっくりするものですが、今回はレンタルサーバーのFTPにより.htaccsessを確認したところ、ファイルの内容が明らかに異なっていたので正しい形式に直し、ブログが正常に復旧しました。

内部ファイルを更新する場合、元のファイルをバックアップするという基本を端折ったのが躓きの始まりでした。初心忘れるべからずを守るべきでした。反省！

ビンゴカードの作り方

プログラミング

ビンゴゲームとは


ビンゴゲームとは正方形、多くは5ｘ5＝25個の桝目に数字を書き込んだカードを、ゲーム参加者に配布しておき、ゲーム進行者が回すビンゴマシンの出目（でめ）に一致した箇所に穴をあけ、縦横斜めの5桝を打ち抜いたらビンゴと言って勝者になり、用意した景品を取得するゲームです。

ビンゴゲームは懇親会などのアトラクションに採用され、ゲーム機材は通販で購入することができます。4つ並んだ状態をリーチと称し5つ目を待望するワクワク感を惹起します。

ここではビンゴゲームを何回かに分けてプログラミングを解説します。調査を進めていくとビンゴゲームを作るには参加者に配るビンゴカードを如何に作るかに帰着するとの結論を得ました。

ビンゴカードの特徴

ここでは5ｘ5のビンゴカードについて語ります。当方は豊富なビンゴゲーム体験者ではありませんが、平穏で退屈な生活に刺激をもたらす射幸心などについては一通りの心得を持っているので、ウィナーが同時に複数出るようなことがないように配慮してあります。

右図の横並びは上から一行、二行、三行、四行、五行と、縦列を左からB列、I列、N列、G列、O列と呼ぶことにし、現れる5個の数字を

B列 I列 N列 G列 O列
1～15 16～30 31～45 46～60 61～75

に設定します。どの列も同じ数字は現れません。ゲーム参加者は8~15名ほどが望ましく、25桝すべての値が同じでなければ他者のカードの一部が同値であっても問題は起きません。

今回は複雑さを削除するため、たった一枚のビンゴカードを作成します。

サンプルビンゴカード

当記事を参照すれば一枚のビンゴカードが出来上がります。番号は乱数を用いて決定されるので毎回、異なります。よって、2枚目、3枚目のカードを作るにはブラウザの再読み込み（🔄）ボタンをクリックします。




BINGO ©TacM,2019 Ver0.01



 

次回の予定

次回はビンゴマシンを使って発表された番号が、配布されたビンゴカードに一致するかどうかをチェックするコードを拡張する予定です。

 

暑かった夏に別れを

ものづくり筆耕ブログ

夏休みの総括

梅雨さむが続き、待ち焦がれた夏もあっという間に過ぎ去ろうとしています。猛暑もお盆までです。お盆を過ぎると土用波が立ち込めて海水浴は注意するようにとの言い伝えがあります。

長い休みには『ノルマ』が課されます。宿題を急ピッチで消化していることでしょうか。自由研究はまとまったでしょうか。今年は9月1日が日曜日なので2学期の始業式は2日になり一日、長い夏休みになっています。

以前に《電子絵日記》の作り方をブログに載せたことがあります。小学校で宿題として《電子絵日記》を課している学校はどの程度あるでしょうか。作り方の一例を以下に挙げます。

電子絵日記の一例




夏休み2019自由研究　参照音楽＝『花火』作詞：井上赳、作曲：下総皖一



夏休み・自由研究

題名《夏祭り》

「ドッカーン！ドッカーン！」

これは、夏祭りの花火の音です。

毎年、祭りの最後に打ち上げ花火があります。

きれいな花火がいくつも上がるので、

わたしは花火が大好きです。



今年の夏祭りは、おじいちゃんと弟と行きました。

出店がたくさんあって、何を買おうか迷いました。

かき氷とたこやきをおじいちゃんが買ってくれました。

たこ焼きは弟といっしょに食べました。

大きなタコが入っていておいしかったです。



金魚すくいを弟がしました。

大きな金魚をすくいたいとねらったけれど、

逃げてしまいました。でも、お店の人が同じ

くらい大きな金魚をくれたのでよかったです。

また来年も夏祭りに行きたいです。




https://manabi-enjoy.com/syogakkouseikatu/archives/2447

絵日記の文は『学びエンジョイ』「小学生の子育てを中心として、

くらしの中で学んだことを伝えていきます！」を引用

絵日記の背景画はそれぞれのフリーサイトを参照



再生ボタンをクリックして開始です。


 ©TacM,2019 Ver0.02






 

 

電子絵日記サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
.markey{
  width: 600px;
  height: 450px;
  overflow: hidden;
}
.balloon3-left-btm {
	position: relative;
	display: inline-block;
	margin: 3px 0px 10px 0px;
	padding: 0 5px;
	width: 360px;
	height: 50px;
	line-height: 60px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	background: orchid;
	border-radius: 15%;
	box-sizing: border-box;
}
.balloon3-left-btm:before{
	content: "";
	position: absolute;
	bottom: -24px;
	left: 20px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid orchid;
	z-index: 0;
	transform: rotate(90deg);
}
</style>
</head>
<body>
<div style="font-size:24px; font-weight:bold; font-family:'ＭＳ 明朝'; margin-left:10px; margin-top:0px;">夏休み2019自由研究<span id='num' style='font-size:14px; color:maroon;'>　参照音楽＝『花火』作詞：井上赳、作曲：下総皖一</span></div>
<DIV id="w0" style="width:600px; height:450px; border:0px blue solid; display:block;">
<img id="w1" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019A.png" style="width:600px; height:450px; opacity:1.0;">
<Div id="w2" class="markey" data-direction="right" style="clear:both; margin-top:-450px; border:0px green solid; background:seashell; opacity:0">
<div id="w3" class="h2vr_30" style="float:left; font-size:18px; margin-top:10px; line-height:1.8em; width:960px; height:500px; color:navy; border:0px red solid;">
<span style="font-size:48px; color:deeppink;">夏休み・自由研究</span><BR>
題名《夏祭り》<BR>
「ドッカーン！ドッカーン！」<BR>
これは、夏祭りの花火の音です。<BR>
毎年、祭りの最後に打ち上げ花火があります。<BR>
きれいな花火がいくつも上がるので、<BR>
わたしは花火が大好きです。<BR>
<BR>
今年の夏祭りは、おじいちゃんと弟と行きました。<BR>
出店がたくさんあって、何を買おうか迷いました。<BR>
かき氷とたこやきをおじいちゃんが買ってくれました。<BR>
たこ焼きは弟といっしょに食べました。<BR>
大きなタコが入っていておいしかったです。<BR>
<BR>
金魚すくいを弟がしました。<BR>
大きな金魚をすくいたいとねらったけれど、<BR>
逃げてしまいました。でも、お店の人が同じ<BR>
くらい大きな金魚をくれたのでよかったです。<BR>
また来年も夏祭りに行きたいです。<BR>
<span style="font-size:14px; color:brown;"<BR>
<BR>
https://manabi-enjoy.com/syogakkouseikatu/archives/2447<BR>
絵日記の文は『学びエンジョイ』「小学生の子育てを中心として、<BR>
くらしの中で学んだことを伝えていきます！」を引用<BR>
絵日記の背景画はそれぞれのフリーサイトを参照</span>
</div>
</Div>
</DIV>
<Div style="width:600px; height:120px; color:navy; border:0px solid red;">
<div class="balloon3-left-btm">再生ボタンをクリックして開始です。</div><BR>
<div style="float:left; width:300px; height:55px; color:yellow; border:0px solid red;">
<audio id="s35" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/08/hanabi.mp3" controls controlslist="nodownload"></audio>
</div>
<div style='float:left; height:55px; font-size:14px; line-height:1.6em; color:navy; border:0px solid gold'>&nbsp;&copy;TacM,2019 Ver0.02</div>
</Div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://aidesign.lolipop.jp/wp-content/uploads/2016/09/jquery.marquee.min_.js"></script>
<script type="text/javascript" charset="utf-8">
var songNum=0;
var evnt = document.getElementById("s35");					//BGMのイベントオブジェクト
var w1Obj = document.getElementById("w1");					//画像オブジェクト
var w2Obj = document.getElementById("w2");					//holizontal-scroll-windowsオブジェクト
  window.onload = function(){								//読み込み完了のイベント関数//console.log('ページ読み込み完了');
	evnt.addEventListener('play', function(){				//プレイイベント//console.log("PLAY/PAUSE", j);console.log("START");
		song();
		jQuery(function () {								//marquee関数
			console.log("jQuery start");
			jQuery('#w2')
			.bind('finished', function(){					//マーキー完了処理
				jQuery('#w2').marquee('destroy');			//.marquee('toggle');
				w1Obj.src = "https://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019A.png";
				w1Obj.style.opacity=1;
				w2Obj.style.opacity=0;
				console.log("markey is completed.");
			}).marquee({duration: 37000})					//50000,38000,35000
		});
	}, true);												//trueで本来のイベント処理を続行させる
	evnt.addEventListener('ended', function(){});			//再生完了を知らせる//再利用を可能にする
  };
function song(){  //https://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019B.png
	w1Obj.src = "https://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019" + "BCDE".substr(songNum,1) + ".png";
	w1Obj.style.opacity = 0.5;
	w2Obj.style.opacity = 1.0;								//console.log("backGround", songNum, w1Obj.src);
	if(++songNum < 4)	setTimeout("song()", 24000);
	else				songNum=0;							//再開用
}
</script>
</html>

 

 

くじ引きで楽しむ

ものづくり筆耕ブログ

運試し

ポイントカードで買い物したり、福引きセールでガラガラを回すときはちょっぴり胸がときめきます。市民生活における小さな息抜きは楽しいものです。

ダーツ、吹き矢、射的などで的めがけて矢を射るゲームは古今東西、多く見かけます。

ここでは、HTML、JavaScriptで小さなゲームを作って夏休みの宿題を盛り上げましょう。

▶ボタンを押下して運試しスタートです。ラッキーセブンを引き当てたらファンファーレが鳴り響きます。

7を出すコツの難易度はそこそこです。サンプルコードを末尾に挙げました。参考にしてください。






©2019 TacM,Ver0.01

🎯


▶

🌸





サンプルコード

<!DOCTYPE html>
<html>
<body>
<Div id="top" style="width:600px; height:600px; border:1px solid blue; font-size:64px; color:mediumvioletred; background-color:lightyellow;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2019/08/kujibiki2.png" width="285" height="150" style="margin-left:150px;">
<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span>
<img id="disc" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png" style="width:360px; height:360px; margin-left:110px; margin-top:15px; transform:rotate(90deg);">
<div style="margin-left:470px; margin-top:-205px; font-size:32px;">&#x1F3AF;</div>						<!-- &#x21e6; -->
<a href="javascript:void(0)" onclick="startStop();return false;" style="text-decoration:none;">
<div id="playstop" style="margin-left:10px; margin-top:130px; font-size:64px;">&#x25b6;</div>
</a>
<div id="luckyNo" style="margin-left:460px; margin-top:-140px; font-size:96px; color:blueviolet;">&#x1F338;</div>
</Div>
<audio id="atari" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/1tosho.mp3"></audio>
<script type="text/javascript" charset="utf-8">
var interval=40;														//回転スピード, 74 ～ 10
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("playstop").innerHTML = "\u23f9\u25b6".substr(k, 1);
	if(k==0){setTimeout('revolution()', interval);document.getElementById("top").style.backgroundColor="lightyellow";}		//停止中から開始
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%36*10+90;											//0 5 10 15 20 ～ 355,   90 ～ 440
	var e=Math.floor((d-72)/36) % 10;									//0 ～ 9
	document.getElementById("luckyNo").innerHTML = e;					//console.log("Degree=", degree, d,e);
	document.getElementById("disc").style.transform="rotate("+d+"deg)";	//回転を制御
	if((clickCount % 2)==0)	setTimeout('revolution()', interval);		//引き続き回転を制御する
	else{																//停止指令を受けた
		if(e==7){document.getElementById("atari").play();document.getElementById("top").style.backgroundColor="hotpink";}	//大当たり
	}
}
</script>
</body>
</html>

　

図の回転と停止

ものづくり筆耕ブログ

もう一つの円形ふちどり

先日、画像を丸く縁どるにおいて、2つの図を重ね合わせることによって丸い画像を描画しましたが、今回はCSSのborder-radiusを使って円形画像を実現しています。cssは別ファイルでなく、HTMLの中にstyle要素を定義しborder-radius属性を設定しています。

回転方法

シーソースイッチ

図を回転するには、transform-rotateを使います。連続して回転するには回転角度を変化させます。そして、一定間隔で等速回転させるには、setTimeout関数を使います。時間にて起動されるイベントにて回転角度を制御します。

回転と停止を制御するには一つのクリックボタンを押下します。このボタンはシーソースイッチと同じ機能を持ち、押すごとに回転と停止が交互に機能します。

スイッチの名称は交互に変化し、メカニックのシーソースイッチの機能ををソフトウェアで実現させています。

図の回転と停止例





rotation©2019 TacM,Ver0.01






サンプルコード

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bordering4 {
	background-image: url("https://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png");/* 表示する画像 */
	background-size:354px 354px;
	border:6px solid navy;												/* 枠線を付加 */
	background-position:-7px -7px;										/* 横長画像の左上を基準に表示 */
	border-radius:50%;													/* 角丸半径を50%にする(=円形にする) */
	width:340px;	height:340px;										/* 縦横を設定 */
}
</style>
</head>
<body>
<Div style="width:600px; height:600px; position:relative; border:1px solid blue; font-size:64px; color:mediumvioletred;">
<div style="position:absolute; left:120px; top:0px;">rotation<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span></div>
<div id="disc" class="bordering4" style="position:absolute; left:120px; top:130px; transform-origin:177px 177px;"></div>
<a style="position:absolute; left:20px; top:470px; width:120px; height:120px;" href="javascript:void(0)" onclick="startStop();return false;">
<img id="gostop" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/startBotton.png" width="120" height="120"></a>
</Div>
<script type="text/javascript" charset="utf-8">
const SPEED=74;															//回転速度, 74 ～ 4, Japanese 30 kei sight-seeing game
var interval=SPEED;														//回転スピード, Japanese ten large tourist spot
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("gostop").src="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/" + (k?"startBotton.png":"pauseBotton.png");
	//console.log("startStop", clickCount, k, document.getElementById("gostop").src);
	if(k==0){															//停止中から回転開始
	  setTimeout('revolution()', interval);								//回転開始
	}
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%72*5;												//0 5 10 15 20 ~ 355
	var e=d-18;															//-18 -13 -8 -3 2 7
	//console.log("Degree=", degree, d);
	document.getElementById("disc").style.transform="rotate("+e+"deg)";	//回転を制御
	if((clickCount % 2)==0){											//回転中ならば継続
		setTimeout('revolution()', interval);							//引き続き回転を制御する
	}
	else{}																//停止指令を受けた状態、revolution()を呼ばなければ自然に停止
}
</script>
</body>
</html>