すごろくゲーム
6がでるまで駒を進めよう!
以下が、HTMLとJavaScriptを用いた「すごろくゲーム」の実装例です。evalや他サイトへの遷移、リダイレクトなどのセキュリティ脆弱性を含まないように注意して実装しました。
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>すごろくゲーム</title>
</head>
<body>
<h1>すごろくゲーム</h1>
<p>6がでるまで駒を進めよう!</p>
<div id="board"></div>
<button id="start">スタート</button>
<script>
var board = document.getElementById('board');
var startButton = document.getElementById('start');
var position = 0;
var isGameStarted = false;
// ボードを作成する
for (var i = 0; i < 30; i++) {
var square = document.createElement('div');
square.classList.add('square');
if (i === position) {
var piece = document.createElement('div');
piece.classList.add('piece');
square.appendChild(piece);
}
board.appendChild(square);
}
// ダイスを投げる
var rollDice = function() {
var dice = Math.floor(Math.random() * 6) + 1;
console.log('dice:', dice);
if (dice === 6) {
alert('すごいろく!ゲームクリア!');
position = 0;
updateBoard();
isGameStarted = false;
} else {
position += dice;
position = Math.min(position, 29);
updateBoard();
}
}
// ボードを更新する
var updateBoard = function() {
var squares = board.getElementsByClassName('square');
for (var i = 0; i < squares.length; i++) {
var square = squares[i];
square.innerHTML = '';
square.classList.remove('active');
if (i === position) {
var piece = document.createElement('div');
piece.classList.add('piece');
square.appendChild(piece);
square.classList.add('active');
}
}
}
// スタートボタンをクリックしたらゲームをスタートする
startButton.addEventListener('click', function() {
if (!isGameStarted) {
console.log('Game start!');
isGameStarted = true;
rollDice();
}
});
</script>
<style>
.square {
display: inline-block;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 1px solid #999;
}
.piece {
width: 30px;
height: 30px;
margin: 10px;
border-radius: 50%;
background-color: blue;
}
.active {
background-color: yellow;
}
</style>
</body>
</html>
```
ジョークとして、「6が出たら『成功しました!今日も素晴らしい一日を過ごしましょう!』とSiriが言ってくれる」という機能を追加するなど、遊び心を加えてもよいでしょう。