話題のAIチャットchatGPTで「JavaScriptとCSSを使用して、ボールがマウスに追従するアニメーションを作成するための基本的なスケッチ」を書いて貰いました。
最初に「Mousehoverから逃げるボールのプログラムを書いて」とお願いしたら、まさかの最初から画面の角にボールを設置し、マウスを動かした瞬間に画面アウトするという面白い回答をくれました。
<!DOCTYPE html>
<html>
<head>
<title>Mouse Hover Ball</title>
<style>
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
var ball = document.getElementById("ball");
var x = 0;
var y = 0;
document.addEventListener("mousemove",function(event) {
var mouseX = event.clientX;
var mouseY = event.clientY;
if (mouseX < x) {
x += 5;
} else if (mouseX > x + 50) {
x -= 5;
}
if (mouseY < y) {
y += 5;
} else if (mouseY > y + 50) {
y -= 5;
}
ball.style.left = x + "px";
ball.style.top = y + "px";
});
</script>
</body>
</html>
そして何回かやり直しのプログラム書いてとお願いしていたらchatGPTさん
ついに「プログラムは書きません」宣言。
＊＊＊＊＊＊
Q1．○○のプログラム書いてください。
A．申し訳ありませんが、私はプログラムの説明を提供するAIであり、
直接的なプログラミングはできません。
Q2．○○のプログラム書いてください。
A．申し訳ありませんが、私は直接的なプログラミングはできません。
以下にプログラムの例を挙げます。
＊＊＊＊＊＊
途中、コンソールでずっとエラー吐き出し続ける恐ろしいプログラムとかもあり。
何度か問答しながら試行錯誤して最終的に書いて貰ったもの。
画面上をふよふよしている赤い〇の正体です。
<!DOCTYPE html>
<html>
<head>
<style>
#ball {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
var ball = document.getElementById("ball");
document.addEventListener("mousemove", function(event) {
// マウスの現在位置を取得
var mouseX = event.clientX;
var mouseY = event.clientY;
// ボールの現在位置を取得
var ballX = ball.offsetLeft + ball.offsetWidth / 2;
var ballY = ball.offsetTop + ball.offsetHeight / 2;
// ボールがマウスに近づくように移動
var dx = mouseX - ballX;
var dy = mouseY - ballY;
var distance = Math.sqrt(dx * dx + dy * dy);
var speed = 5;
if (distance < speed) {
ball.style.left = mouseX - ball.offsetWidth / 2 + "px";
ball.style.top = mouseY - ball.offsetHeight / 2 + "px";
} else {
ball.style.left = ball.offsetLeft + dx / distance * speed + "px";
ball.style.top = ball.offsetTop + dy / distance * speed + "px";
}
});
</script>
</body>
</html>
プログラミングのテスト問題とかも出題して貰えるみたいなので、時間を見つけて勉強してみたいと思います。
