Bagaimana untuk membina bola yang melantun menggunakan HTML dan JavaScript?-html tutorial-php.cn

Bagaimana untuk membina bola yang melantun menggunakan HTML dan JavaScript?

PHPz

Lepaskan： 2023-09-01 18:49:07

ke hadapan

816 orang telah melayarinya

Bagaimana untuk membina bola yang melantun menggunakan HTML dan JavaScript?

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.

Terjemahan bahasa Cina bagi

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>

Salin selepas log masuk

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!