以下が、要望に基づいた実装例です。JavaScriptのevalを使用していないため、安全なコードとなっています。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドット絵の棒アプリ</title>
<style>
#board {
background-color: #f0f0f0;
border: 1px solid #ccc;
height: 500px;
margin: 10px auto;
position: relative;
width: 500px;
}
#stick {
background-color: black;
height: 20px;
position: absolute;
top: 480px;
width: 1px;
}
</style>
</head>
<body>
<div id="board">
<div id="stick"></div>
</div>
<button id="btn-red">赤いボタン</button>
<button id="btn-blue">青いボタン</button>
<script>
const stick = document.getElementById('stick');
const btnRed = document.getElementById('btn-red');
const btnBlue = document.getElementById('btn-blue');
let stickHeight = 20;
btnRed.addEventListener('click', () => {
stickHeight = Math.min(stickHeight + 10, 490);
branchSticks(stickHeight);
});
btnBlue.addEventListener('click', () => {
stickHeight = 20;
branchSticks(stickHeight);
});
function branchSticks(height) {
const numBranches = Math.floor(Math.random() * 5) + 1;
let width = 1;
let left = 250;
stick.style.height = height + 'px';
for (let i = 1; i <= numBranches; i++) {
const branchWidth = Math.floor(Math.random() * 10) + 1;
const branchLength = Math.floor(Math.random() * 50) + 10;
const branchAngle = (360 / numBranches) * i;
const branchLeft = left - ((branchWidth - 1) / 2);
const branch = document.createElement('div');
branch.classList.add('branch');
branch.style.width = branchWidth + 'px';
branch.style.height = branchLength + 'px';
branch.style.transform = `rotate(${branchAngle}deg)`;
branch.style.left = branchLeft + 'px';
branch.style.top = (height - branchLength) + 'px';
stick.appendChild(branch);
width = Math.max(width, branchLeft + branchWidth);
}
stick.style.width = width + 'px';
}
</script>
</body>
</html>
```
このアプリは、赤いボタンをクリックすると棒の高さが10pxずつ伸び、枝分かれして成長していきます。枝分かれする本数はランダムで、1本から5本までです。枝の長さや角度もランダムなので、どんな形になるか楽しみです。青いボタンをクリックすると最初の状態に戻ります。
「エアプレーン」と言いながら、クリアファイルに貼った紙をスーっと取り去る遊び、知ってる? あれと同じように、赤いボタンをクリックするたびに枝が増えていく感じですね!