Rumah > Artikel > hujung hadapan web > Bagaimana untuk membina bola yang melantun menggunakan HTML dan JavaScript?
Bagaimana untuk membina bola yang melantun menggunakan HTML dan JavaScript?
- PHPzke hadapan
- 2023-09-01 18:49:07747semak imbas
Kami akan mencipta elemen kanvas dalam dokumen HTML menggunakan tag kanvas. Seterusnya, kami akan menggunakan JavaScript untuk melukis bulatan pada kanvas dan menetapkan kedudukan dan halaju awalnya. Akhir sekali, kita boleh menggunakan JavaScript untuk mengemas kini kedudukan bulatan secara berterusan berdasarkan kelajuannya dan menambah pengesanan perlanggaran untuk menukar kelajuan apabila bulatan mencecah tepi kanvas.
Kaedah
Untuk membina bola melantun menggunakan HTML dan JavaScript anda perlu melakukan perkara berikut -
Buat fail HTML dengan elemen kanvas di mana bola akan dilukis.
Buat bentuk sfera (cth. bulatan) pada kanvas menggunakan JavaScript.
Gunakan JavaScript untuk menggerakkan bola ke atas kanvas dan buat ia melantun apabila ia sampai ke tepi.
Gunakan JavaScript untuk mengesan apabila bola terkena tepi dan menukar arahnya dengan sewajarnya.
Gayakan bola dan kanvas atas permintaan menggunakan CSS.
Contoh
ialah:Contoh
Berikut ialah contoh bola melantun yang berfungsi menggunakan HTML + CSS dan JavaScript tulen -
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball with JavaScript</title>
<style>
#ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 25px;
position: absolute;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
const ball = document.getElementById("ball");
let x = 0;
let y = 0;
let xSpeed = 5;
let ySpeed = 5;
function animate() {
x += xSpeed;
y += ySpeed;
if (x + 50 > window.innerWidth || x < 0) {
xSpeed = -xSpeed;
}
if (y + 50 > window.innerHeight || y < 0) {
ySpeed = -ySpeed;
}
ball.style.left = x + "px";
ball.style.top = y + "px";
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Terjemahan bahasa Cina bagi Penjelasan
ialah:Penjelasan
Fail HTML mencipta elemen div dengan id "bola", yang akan digunakan sebagai bola yang melantun.
Fail CSS menetapkan bola sebagai bulatan merah dengan lebar dan ketinggian 50 piksel.
Dalam fail JavaScript, kami mula-mula menggunakan document.getElementById("ball") untuk mendapatkan elemen bola daripada HTML.
Kemudian kami menetapkan beberapa pembolehubah untuk kedudukan x dan y bola dan halaju x dan y.
Dalam fungsi animate(), kami mengemas kini kedudukan x dan y bola dengan menambahkan halaju x dan y pada kedudukan bola.
Kami juga menyemak sama ada bola terkena tepi skrin, jika ya kami terbalikkan halaju x atau y supaya bola melantun semula.
Akhir sekali, kami menetapkan sifat CSS kiri dan atas bola kepada kedudukan x dan y baharu, dan menggunakan requestAnimationFrame(animate) untuk terus memanggil fungsi animasi untuk mencipta kesan animasi bola yang melantun.
Ini hanyalah contoh asas, anda boleh menambah lebih banyak ciri seperti menukar saiz bola, warna, menetapkan kedudukan awal bola atau menambah lebih banyak bola.
Atas ialah kandungan terperinci Bagaimana untuk membina bola yang melantun menggunakan HTML dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!