メダルゲーム
メダルを入れると、ルーレットが回ります。当たりの数字が出たら、メダルを獲得できます。
現在のメダル数: 0
まず、HTMLファイルを作成します。以下のようにHTMLの要素を書き込みます。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メダルゲーム</title>
</head>
<body>
<h1>メダルゲーム</h1>
<p>メダルを入れると、ルーレットが回ります。当たりの数字が出たら、メダルを獲得できます。</p>
<button onclick="start()">スタート</button>
<div id="roulette"></div>
<p>現在のメダル数: <span id="medals">0</span></p>
</body>
<script>
//JavaScriptのコードを書きます
</script>
</html>
```
次に、JavaScriptでゲームの機能を実装します。まずは、ルーレットを回す関数を作成します。
```javascript
function start() {
//1~10のランダムな数字を生成します
var num = Math.floor(Math.random() * 10) + 1;
//ルーレットのHTML要素を取得します
var roulette = document.getElementById("roulette");
//当たりの数字である1~3の場合は、メダルを獲得します
if(num >= 1 && num <= 3){
//現在のメダル数を取得します
var medals = parseInt(document.getElementById("medals").innerHTML);
//獲得したメダル数を表示します
roulette.innerHTML = "<p>当たり！</p>";
document.getElementById("medals").innerHTML = medals + 10;
}else{
//外れの場合は、ルーレットに数字を表示します
roulette.innerHTML = "<p>" + num + "</p>";
}
}
```
このプログラムでは、1~10のランダムな数字を生成し、その数字が1~3の場合は当たりとし、メダルを獲得できます。外れの場合は、生成した数字をルーレットのHTML要素に表示します。
最後に、「現在のメダル数」を表示するためのHTML要素を用意します。start関数内で、現在のメダル数を取得し、獲得したメダル数を加算します。
以上のプログラムで、シンプルなメダルゲームが完成しました。セキュリティ上の問題はありませんが、面白いジョークとして「今回の当たりは、インターネットエクスプローラーを使用している方に贈られます」といったメッセージを表示すると面白いかもしれません。