<!DOCTYPE html>
<html>
<head>
<title>ランダム文字入れ替えアプリ</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0;"></div>
<div id="speech-bubble" style="position: absolute; top: 150px; left: 50px; width: 200px; height: 100px; overflow: hidden; text-align: center; font-size: 24px; padding: 10px; border-radius: 50px 20px; border: 3px solid black;"></div>
<script>
function shuffleText(s) {
var arr = s.split(' ');
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr.join(' ');
}
function moveBox() {
var box = document.getElementById('box');
var maxX = document.documentElement.clientWidth - box.offsetWidth;
var maxY = document.documentElement.clientHeight - box.offsetHeight;
var x = Math.floor(Math.random() * maxX);
var y = Math.floor(Math.random() * maxY);
box.style.top = y + 'px';
box.style.left = x + 'px';
}
var intervalId = setInterval(function() {
var input = prompt('文字を入力してください');
var speechBubble = document.getElementById('speech-bubble');
speechBubble.textContent = shuffleText(input);
moveBox();
}, 2000);
</script>
</body>
</html>
