Cách tạo ra các đối tượng chuyển động bằng JavaScript

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Cách tạo ra các đối tượng chuyển động bằng JavaScript

Chắc hẳn các bạn cũng đã biết DOM qua những bài trước và bạn cũng đã biết cách chọn một phần tử DOM, bây giờ chúng ta tạo ra sự chuyển động cho nó. Bắt đầu bạn thử tạo một hình vuông và cho nó di chuyển bằng cách sử dụng JS.
Mã:
<style>
    #container {
        width: 200px;
        height: 200px;
        background: green;
        position: relative;
    }
    #box {
        width: 50px;
        height: 50px;
        background: red;
        position: absolute;
    }
</style>
<div id="container">
    <div id="box"> </div>
</div>

screenshot_1590718840.png

Ví dụ trên có sử dụng CSS để định dạng, nên bạn cần biết cơ bản về CSS

Phần tử box được chứa bên trong phần tử container. Chú ý mối quan hệ vị trí: đối với container là relative còn với box là absolute. Điều này giúp tạo ra sự di chuyển có liên hệ với container.

Tạo ra sự chuyển động của box : giờ ta làm các bước để box di chuyển từ trái qua phải

Để tạo ra các đối tượng chuyển động, bạn cần thay đổi thuộc tính của phần tử cứ mỗi một khoảng thời gian ngắn nào đó. Bạn có thể sử dụng hàm setInterval() để tạo ra hành động lặp lại (thay đổi thuộc tính phần tử) sau mỗi khoảng thời gian tính bằng mili giây xác đinh.

Ví dụ:
Mã:
var t = setInterval(move, 500);

Đoạn code trên tạo ra một timer, nó gọi hàm move() sau mỗi 500 mili giây, việc của bạn là định nghĩa hàm move() cho phù hợp:
Mã:
<script>
    // vị trí bắt đầu
    var pos = 0;
    //lấy hộp box
    var box = document.getElementById("box");
    
    function move() {
      pos += 1;
      box.style.left = pos+"px"; //px = pixels
    }
</script>

Hàm move() mỗi lần gọi sẽ thay đổi box.style.left thêm 1.

Để dừng quá trình chuyển động (không thay đổi box.style.left) sau mỗi khoảng thời gian nữa bạn hãy gọi hàm clearInterval()

Ví dụ kiểm tra nếu tọa độ left trên 150 thì dừng lại:
Mã:
function move() {
  if(pos >= 150) {
    clearInterval(t);
  }
  else {
    pos += 1;
    box.style.left = pos+"px";
  }
}

Đoạn mã hoàn chỉnh để tạo ra sự di chuyển từ trái qua phải của box, bạn chạy thử nó và xem kết quả:
Mã:
<style>
    #container {
        width: 200px;
        height: 200px;
        background: green;
        position: relative;
    }
    #box {
        width: 50px;
        height: 50px;
        background: red;
        position: absolute;
    }
</style>
<div id="container">
    <div id="box"> </div>
</div>
var pos = 0;
//our box element
var box = document.getElementById("box");
var t = setInterval(move, 10);

function move() {
  if(pos >= 150) {
    clearInterval(t);
  }
  else {
    pos += 1;
    box.style.left = pos+"px";
  }
}

Di chuyển qua lại
Sửa mã hàm move() sau để giá trị pos nhận từ 0 - 150, nếu đến 150 quay lại giảm về 0 ...
Mã:
<script>
    var tanggiam = 1;
    var pos = 0;
    var box = document.getElementById("box");
    var t = setInterval(move, 10);

    function move() {
        if ((pos > 150) || (pos <0)) {
            tanggiam = (-tanggiam);
        }

        pos += tanggiam;
        box.style.left = pos+"px";

    }
</script>

Chạy code hoàn chỉnh sau:
Mã:
<html>
    <head>
        
    <style>
        #container {
        width: 200px;
        height: 200px;
        background: green;
        position: relative;
        }
        #box {
        width: 50px;
        height: 50px;
        background: red;
        position: absolute;
        }
    </style>
    
    </head>
    <body>
        <div id="container">
            <div id="box"> </div>
        </div>
        <script>
            var tanggiam = 1;
            var pos = 0;
            var box = document.getElementById("box");
            var t = setInterval(move, 10);
        
            function move() {
                if ((pos > 150) || (pos <0)) {
                    tanggiam = (-tanggiam);
                }
        
                pos += tanggiam;
                box.style.left = pos+"px";
        
            }
        </script>
    </body>
</html>
<script>
    var tanggiam = 1;
    var pos = 0;
    var box = document.getElementById("box");
    var t = setInterval(move, 10);

    function move() {
        if ((pos > 150) || (pos <0)) {
            tanggiam = (-tanggiam);
        }

        pos += tanggiam;
        box.style.left = pos+"px";

    }
</script>

1.gif

Chúc các bạn thành công.


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom