```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>楽しい図形の遊び場</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.animate {
animation: bounce 1s;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: center; width: 400px; height: 400px; border: 2px solid #000; position: relative; user-select: none;">
<div style="margin-bottom: 10px;">
<button onclick="createShape('circle')">🔴</button>
<button onclick="createShape('triangle')">🔺</button>
<button onclick="createShape('square')">🟩</button>
<button onclick="createShape('star')">⭐</button>
</div>
<div style="margin-bottom: 10px;">
<button onclick="setSize(20)">小</button>
<button onclick="setSize(30)">中小</button>
<button onclick="setSize(40)">中</button>
<button onclick="setSize(50)">中大</button>
<button onclick="setSize(60)">大</button>
</div>
<div id="board" style="width: 100%; height: calc(100% - 100px); position: relative; overflow: hidden;">
</div>
</div>
<script>
let currentSize = 30;
let currentShape = 'circle';
function createShape(shape) {
currentShape = shape;
const shapeElem = document.createElement('div');
shapeElem.className = 'shape animate';
shapeElem.style.position = 'absolute';
shapeElem.style.width = `${currentSize}px`;
shapeElem.style.height = `${currentSize}px`;
shapeElem.style.cursor = 'move';
shapeElem.style.top = `${Math.random() * 80}%`;
shapeElem.style.left = `${Math.random() * 80}%`;
shapeElem.draggable = true;
switch(shape) {
case 'circle':
shapeElem.style.backgroundColor = 'red';
shapeElem.style.borderRadius = '50%';
break;
case 'triangle':
shapeElem.style.width = 0;
shapeElem.style.height = 0;
shapeElem.style.borderLeft = `${currentSize / 2}px solid transparent`;
shapeElem.style.borderRight = `${currentSize / 2}px solid transparent`;
shapeElem.style.borderBottom = `${currentSize}px solid blue`;
break;
case 'square':
shapeElem.style.backgroundColor = 'green';
break;
case 'star':
shapeElem.innerHTML = '⭐';
shapeElem.style.fontSize = `${currentSize}px`;
shapeElem.style.color = 'orange';
break;
}
shapeElem.onclick = function() {
this.classList.toggle('animate');
};
shapeElem.ondragstart = function(event) {
event.dataTransfer.setData('text/plain', null);
const style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData('application/x-moz-node', (parseInt(style.getPropertyValue('left'), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue('top'), 10) - event.clientY));
};
document.getElementById('board').appendChild(shapeElem);
}
function setSize(size) {
currentSize = size;
}
document.getElementById('board').ondragover = function(event) {
event.preventDefault();
};
document.getElementById('board').ondrop = function(event) {
const offset = event.dataTransfer.getData('application/x-moz-node').split(',');
const element = event.target;
if (element && element.classList.contains('shape')) {
element.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
element.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
}
event.preventDefault();
};
</script>
</body>
</html>
```
