プログラミング教育
2020年度に小学校でプログラミング教育が必修化になり、プログラミングが授業に導入されます。
一年後に中学校で技術・家庭科でプログラミング教育が拡充され、さらにその一年後に高等学校で「情報Ⅰ」が必修化になり、加えて2024年度の大学入学共通テストに「情報Ⅰ」が国語・数学のような基礎的科目として導入される見通しと言われています。
これまでにも多くの例題を取り上げてきましたが、ちょっぴり高級化が施されたラッキーセブンゲームをお届けします。0～9が印刷されたターンテーブルを回し’7’を引き当てたらファンファーレとともに大当たりとアナウンスされるゲームです。
当たる確率は10％ですがクリックするタイミングを究明すればもっと高い成功率になりそうです。
作成したラッキーセブンゲーム
ころあいをはかり停止ボタンをクリックするとターンテーブルの回転が止まります。7が上部にくると大当たりのファンファーレが鳴り響きます。
ラッキーセブンゲーム ©2018 TacM, Ver0.02
ゲームHTMLコード
<html>
<body onload="revolution();">
<audio id="bg" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/muci_action_r01.mp3" loop></audio>
<audio id="ok" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/1tosho.mp3"></audio>
<audio id="ng" src="https://aidesign.lolipop.jp/wp-content/uploads/2016/01/btn10.mp3"></audio>
<Div id="fig00" style="position:relative; width:480px; height:470px; background:lightcyan; color:darkgreen; font-size:28px; font-weight:bold;">
ラッキーセブンゲーム</span><span style="font-size:14px; color:navy;"> ©2018 TacM, Ver0.02</span>
<img id="ht" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/08/logomark2.png" width=80" height=80" style="position:absolute; left:165px; top:38px; visibility:hidden;">
<img id="f2" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png" style="transform:rotate(-18deg); position:absolute; left:30px; top:120px; width:340px; height:340px">
<a style="position:absolute; left:340px; top:407px" onclick="go()"><img id="ex" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/04/button0.png"></a>
</Div>
<script type="text/javascript" charset="Shift_JIS">
const SPEED=10; //回転速度
var clickCount=degree=endFlag=0; //clickCount:開始/停止, degree:回転角, c:確定番号
function revolution(){ //回転を制御する関数 //-18 -13 -8 -3 2 7
var e=(degree++)%72*5; // 0 5 10 15 20 25 ~ 355
var c=Math.floor(e/36) % 10; //console.log("revolution", e+18, e, c);
document.getElementById("f2").style.transform = "rotate("+(e-18)+"deg)";//回転を制御, console.log("revolution", endFlag, e, c);
if(endFlag==1){ //console.log("終了");
document.getElementById("bg").pause();
if(c==7){document.getElementById("ok").play();document.getElementById("ht").src="https://aidesign.lolipop.jp/wp-content/uploads/2018/08/atari3.png";}
else{document.getElementById("ng").play();document.getElementById("ht").src="https://aidesign.lolipop.jp/wp-content/uploads/2018/08/logomark2.png";}
document.getElementById("ht").style.visibility="visible";
endFlag=0; //次回の準備
}
else if((clickCount % 2)==0) setTimeout('revolution()', SPEED); //回転中ならば継続
}
function go(){ //開始あるいは停止を制御する関数, console.log("回転開始", clickCount);
document.getElementById("ex").src = "https://aidesign.lolipop.jp/wp-content/uploads/2018/04/button" + (++clickCount % 2) + ".png";
if((clickCount % 2)==0){ //停止中から回転開始
document.getElementById("bg").play();
document.getElementById("ht").style.visibility="hidden";
setTimeout('revolution()', SPEED); //console.log("回転開始");
}
else endFlag=1; //console.log("回転停止");
}
</script>
</body>
</html>
参考になる初心者向けプログラミング教育電子書籍
- スラスラわかるHTML&CSSのきほん 1980円 アマゾンキンドル
- 基礎から徹底的に学ぶJavaScript Kindle版 350円 アマゾンキンドル
- スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) 1793円 アマゾンキンドル
- 動作させながらゼロから学べるJavaScript 256円 アマゾンキンドル
- 作りながら学ぶ HTML/CSSデザインの教科書 2800円 アマゾンキンドル
- プログラミングの基本がJavaScriptで学べる本 972円 アマゾンキンドル
さいごに
プログラミング教育は「プログラマーを育てる」ことではありません。「プログラミング的思考を育むもの」です。
保証の限りではありませんがプログラミングに興味を持てば「出世に役立つ」、「お金もうけにつながる」、「異性にモテる」かも知れません。
あらゆるものがコンピューターに制御されている今日、当サンプルが楽しくゲームを作るための一助になればありがたいです。
先ずは、コンピューターの仕組みに詳しい人から枠組みを作ってもらう事です。
秋の到来 
開催の意味
先人の作品を模倣
p5.jsはかなり大きな山と言っても過言ではありません。プログラミングの初歩者にとっては高い垣根です。ここでは中味はともかく、高級電卓を使う感覚で進めてまいります。
