赤丸を青丸が追いかけるアニメーションのコード（正式）
オリジナル：青丸を赤丸が追いかけるアニメーションのコード
<!DOCTYPE html>
<html>
<head>
<style>
#container {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
#circle {
position: absolute;
height: 20px; /* 赤丸のサイズ */
width: 20px; /* 赤丸のサイズ */
background-color: red;
border-radius: 50%;
transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */
z-index: 1; /* 赤丸を前面に表示 */
}
#circle2 {
position: absolute;
height: 20px; /* 青丸のサイズ */
width: 20px; /* 青丸のサイズ */
background-color: blue;
border-radius: 50%;
transition: top 1s, left 1s; /* 連続的な移動 */
z-index: 2; /* 青丸を前面に表示 */
}
#line {
position: absolute;
height: 40px;
width: 1px; /* 縦線の幅 */
background-color: white;
right: -1px; /* 右枠に配置 */
top: calc(50% - 20px); /* 上下中央に配置 */
}
</style>
</head>
<body>
<div id="container">
<div id="circle"></div>
<div id="circle2"></div>
<div id="line"></div> <!-- 縦線を追加 -->
</div>
<script>
var container = document.getElementById('container');
var circle = document.getElementById('circle');
var circle2 = document.getElementById('circle2');
var x = 0;
var y = 0;
function moveCircle() {
x = Math.floor(Math.random() * (container.offsetWidth - circle.offsetWidth));
y = Math.floor(Math.random() * (container.offsetHeight - circle.offsetHeight));
circle.style.left = x + 'px';
circle.style.top = y + 'px';
}
function followCircle() {
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
}
function moveToCenter() {
x = container.offsetWidth - circle.offsetWidth;
y = (container.offsetHeight - circle.offsetHeight) / 2;
circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
circle.style.transition = 'left 2s, top 2s'; // 2秒間に移動
circle.style.left = x - circle.offsetWidth / 2 + 'px';
circle.style.top = y + 'px';
}
function moveToOutside() {
x = container.offsetWidth + circle.offsetWidth;
y = (container.offsetHeight - circle.offsetHeight) / 2;
circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
}
// 最初の位置を設定
moveCircle();
circle2.style.left = (container.offsetWidth - circle2.offsetWidth) + 'px';
circle2.style.top = (container.offsetHeight - circle2.offsetHeight) / 2 + 'px';
var intervalId = setInterval(moveCircle, 1000); // 1秒ごとに赤丸を移動
var intervalId2 = setInterval(followCircle, 1000); // 1秒ごとに青を移動
setTimeout(function() {
clearInterval(intervalId); // ランダムな移動を停止
moveToCenter(); // 20秒後に青丸を右枠中央に移動
}, 20000);
setTimeout(function() {
moveToOutside(); // 21秒後に青丸を枠の外に移動
}, 21000);
</script>
</body>
</html>
<html>
<head>
<style>
#container {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
#circle {
position: absolute;
height: 20px; /* 赤丸のサイズ */
width: 20px; /* 赤丸のサイズ */
background-color: red;
border-radius: 50%;
transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */
z-index: 1; /* 赤丸を前面に表示 */
}
#circle2 {
position: absolute;
height: 20px; /* 青丸のサイズ */
width: 20px; /* 青丸のサイズ */
background-color: blue;
border-radius: 50%;
transition: top 1s, left 1s; /* 連続的な移動 */
z-index: 2; /* 青丸を前面に表示 */
}
#line {
position: absolute;
height: 40px;
width: 1px; /* 縦線の幅 */
background-color: white;
right: -1px; /* 右枠に配置 */
top: calc(50% - 20px); /* 上下中央に配置 */
}
</style>
</head>
<body>
<div id="container">
<div id="circle"></div>
<div id="circle2"></div>
<div id="line"></div> <!-- 縦線を追加 -->
</div>
<script>
var container = document.getElementById('container');
var circle = document.getElementById('circle');
var circle2 = document.getElementById('circle2');
var x = 0;
var y = 0;
function moveCircle() {
x = Math.floor(Math.random() * (container.offsetWidth - circle.offsetWidth));
y = Math.floor(Math.random() * (container.offsetHeight - circle.offsetHeight));
circle.style.left = x + 'px';
circle.style.top = y + 'px';
}
function followCircle() {
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
}
function moveToCenter() {
x = container.offsetWidth - circle.offsetWidth;
y = (container.offsetHeight - circle.offsetHeight) / 2;
circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
circle.style.transition = 'left 2s, top 2s'; // 2秒間に移動
circle.style.left = x - circle.offsetWidth / 2 + 'px';
circle.style.top = y + 'px';
}
function moveToOutside() {
x = container.offsetWidth + circle.offsetWidth;
y = (container.offsetHeight - circle.offsetHeight) / 2;
circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
}
// 最初の位置を設定
moveCircle();
circle2.style.left = (container.offsetWidth - circle2.offsetWidth) + 'px';
circle2.style.top = (container.offsetHeight - circle2.offsetHeight) / 2 + 'px';
var intervalId = setInterval(moveCircle, 1000); // 1秒ごとに赤丸を移動
var intervalId2 = setInterval(followCircle, 1000); // 1秒ごとに青を移動
setTimeout(function() {
clearInterval(intervalId); // ランダムな移動を停止
moveToCenter(); // 20秒後に青丸を右枠中央に移動
}, 20000);
setTimeout(function() {
moveToOutside(); // 21秒後に青丸を枠の外に移動
}, 21000);
</script>
</body>
</html>
以下はCopilotに教わって、非同期処理を同期処理にしたもの。
<!DOCTYPE html>
<html>
<head>
<style>
#container {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
#circle {
position: absolute;
height: 20px; /* 赤丸のサイズ */
width: 20px; /* 赤丸のサイズ */
background-color: red;
border-radius: 50%;
transition: top 1s, left 1s; /* 連続的な移動 */
z-index: 1; /* 赤丸を前面に表示 */
}
#circle2 {
position: absolute;
height: 20px; /* 青丸のサイズ */
width: 20px; /* 青丸のサイズ */
background-color: blue;
border-radius: 50%;
transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */
z-index: 2; /* 青丸を前面に表示 */
}
#line {
position: absolute;
height: 40px;
width: 1px; /* 縦線の幅 */
background-color: white;
right: -1px; /* 右枠に配置 */
top: calc(50% - 20px); /* 上下中央に配置 */
}
</style>
</head>
<body>
<div id="container">
<div id="circle"></div>
<div id="circle2"></div>
<div id="line"></div> <!-- 縦線を追加 -->
</div>
<script>
var container = document.getElementById('container');
var circle = document.getElementById('circle');
var circle2 = document.getElementById('circle2');
var x = 0;
var y = 0;
function moveCircle() {
return new Promise((resolve) => {
x = Math.floor(Math.random() * (container.offsetWidth - circle.offsetWidth));
y = Math.floor(Math.random() * (container.offsetHeight - circle.offsetHeight));
circle.style.left = x + 'px';
circle.style.top = y + 'px';
setTimeout(resolve, 1000); // 1秒後に解決
});
}
function followCircle() {
return new Promise((resolve) => {
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
setTimeout(resolve, 1000); // 1秒後に解決
});
}
function moveToCenter() {
return new Promise((resolve) => {
x = container.offsetWidth - circle.offsetWidth;
y = (container.offsetHeight - circle.offsetHeight) / 2;
circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
circle.style.transition = 'left 2s, top 2s'; // 2秒間に移動
circle.style.left = x - circle.offsetWidth / 2 + 'px';
circle.style.top = y + 'px';
setTimeout(resolve, 2000); // 2秒後に解決
});
}
function moveToOutside() {
return new Promise((resolve) => {
x = container.offsetWidth + circle.offsetWidth;
y = (container.offsetHeight - circle.offsetHeight) / 2;
circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
setTimeout(resolve, 1000); // 1秒後に解決
});
}
async function run() {
// 青丸の初期位置を設定
circle2.style.left = (container.offsetWidth - circle2.offsetWidth) + 'px';
circle2.style.top = (container.offsetHeight - circle2.offsetHeight) / 2 + 'px';
for (let i = 0; i < 20; i++) {
await moveCircle();
await followCircle();
}
await moveToCenter();
await moveToOutside();
}
run();
</script>
</body>
</html>
<html>
<head>
<style>
#container {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
#circle {
position: absolute;
height: 20px; /* 赤丸のサイズ */
width: 20px; /* 赤丸のサイズ */
background-color: red;
border-radius: 50%;
transition: top 1s, left 1s; /* 連続的な移動 */
z-index: 1; /* 赤丸を前面に表示 */
}
#circle2 {
position: absolute;
height: 20px; /* 青丸のサイズ */
width: 20px; /* 青丸のサイズ */
background-color: blue;
border-radius: 50%;
transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */
z-index: 2; /* 青丸を前面に表示 */
}
#line {
position: absolute;
height: 40px;
width: 1px; /* 縦線の幅 */
background-color: white;
right: -1px; /* 右枠に配置 */
top: calc(50% - 20px); /* 上下中央に配置 */
}
</style>
</head>
<body>
<div id="container">
<div id="circle"></div>
<div id="circle2"></div>
<div id="line"></div> <!-- 縦線を追加 -->
</div>
<script>
var container = document.getElementById('container');
var circle = document.getElementById('circle');
var circle2 = document.getElementById('circle2');
var x = 0;
var y = 0;
function moveCircle() {
return new Promise((resolve) => {
x = Math.floor(Math.random() * (container.offsetWidth - circle.offsetWidth));
y = Math.floor(Math.random() * (container.offsetHeight - circle.offsetHeight));
circle.style.left = x + 'px';
circle.style.top = y + 'px';
setTimeout(resolve, 1000); // 1秒後に解決
});
}
function followCircle() {
return new Promise((resolve) => {
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
setTimeout(resolve, 1000); // 1秒後に解決
});
}
function moveToCenter() {
return new Promise((resolve) => {
x = container.offsetWidth - circle.offsetWidth;
y = (container.offsetHeight - circle.offsetHeight) / 2;
circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
circle.style.transition = 'left 2s, top 2s'; // 2秒間に移動
circle.style.left = x - circle.offsetWidth / 2 + 'px';
circle.style.top = y + 'px';
setTimeout(resolve, 2000); // 2秒後に解決
});
}
function moveToOutside() {
return new Promise((resolve) => {
x = container.offsetWidth + circle.offsetWidth;
y = (container.offsetHeight - circle.offsetHeight) / 2;
circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
circle2.style.left = x + 'px';
circle2.style.top = y + 'px';
setTimeout(resolve, 1000); // 1秒後に解決
});
}
async function run() {
// 青丸の初期位置を設定
circle2.style.left = (container.offsetWidth - circle2.offsetWidth) + 'px';
circle2.style.top = (container.offsetHeight - circle2.offsetHeight) / 2 + 'px';
for (let i = 0; i < 20; i++) {
await moveCircle();
await followCircle();
}
await moveToCenter();
await moveToOutside();
}
run();
</script>
</body>
</html>
コメント
コメントを投稿