Tỏ tình crush cùng ứng dụng Do You Love Me

NỘI DUNG BÀI VIẾT

Jingle Bell Jingle Bell, các bạn đã có crush để đi chơi Noel chưa nhỉ? Nếu chưa thì cũng đừng buồn nhé. Hôm nay, mình sẽ hướng dẫn các bạn tỏ tình crush cùng ứng dụng Do You Love Me hoàn toàn đơn giản nhưng lại vô cùng ý nghĩa với những ai đang học IT đúng không nào? Không vòng vo nữa, vào chủ đề chính thôi.

Ứng dụng được xây dựng chỉ với HTML, CSS và JavaScript, rất phù hợp cho những ai mới tập tành học lập trình web.

Bước 1: Tạo file HTML có tên là doyouloveme.html và đặt code trong phần body

Tạo 1 thẻ h1 với id="loveQuestion" cùng câu hỏi. Ở đây, mình đặt là “Làm người yêu anh nhé, babe?”. Các bạn có thể thay đổi theo ý muốn
Tạo 2 thẻ input là các nút bấm với type="button" để lựa chọn

<h1 id="loveQuestion">Làm người yêu anh nhé, babe?</h1>
<input type="button" id="btnYes" value="CÓ"/>
<input type="button" id="btnNo" value="KHÔNG"/>Code language: HTML, XML (xml)

Bước 2: Tạo file JavaScript có tên là script.js

Trong file JavaScript, mình sẽ viết 2 hàm:

Hàm yesClick() đại diện cho nút “YES”
Hàm noHover() đại diện cho nút “NO”

Trong hàm yesClick(), khi người dùng click vào nút “YES” ứng dụng sẽ hiển thị thông báo ra ngoài màn hình bằng phương thức alert():

function yesClick() {
  alert("Tối nay, lên hồ chơi em nhé!");
}Code language: JavaScript (javascript)

Khi người dùng di chuột lên nút “NO” thì nút “NO” sẽ nhảy sang một vị trí khác ngẫu nhiên trên màn hình. Kết quả là người dùng không thể click được chuột vào nút “NO”.

Trong JavaScript, cụ thể là đối tượng Math có phương thức Math.random() giúp ta sinh ra các số ngẫu nhiên. Mình kết hợp cùng với phương thức Math.floor để làm tròn số ngẫu nhiên được sinh ra:

function noHover() {
  var x = Math.floor(Math.random() * window.innerWidth);
  var y = Math.floor(Math.random() * window.innerHeight);
}Code language: JavaScript (javascript)

Đoạn mã trên sẽ sinh ra 2 số nguyên ngẫu nhiên trong đoạn từ 0 đến chiều rộng của trình duyệt và từ 0 đến chiều dài của trình duyệt.

Sau đó, mình sẽ tiến hành đặt lại vị trí cho nút “NO” bằng thuộc tính style có trong DOM:

document.getElementById("btnNo").style.left = x + "px";
document.getElementById("btnNo").style.top = y + "px";Code language: JavaScript (javascript)

Với click ta sẽ bắt nó bằng onclick còn di chuột sẽ là onmouseover trong file HTML:

<input type="button" id="btnYes" value="CÓ" onclick="yesClick()" />
<input type="button" id="btnNo" value="KHÔNG" onmouseover="noHover()" />Code language: HTML, XML (xml)

To tinh crush cung ung dung Do You Love Me 1

Khoan, có gì sai sai nhỉ. Tại sao di chuột vào nút “NO” rồi mà nó vẫn không di chuyển vậy??? À, do là mặc định các phần tử HTML ở trạng thái tĩnh hay còn gọi là static, nghĩa là đặt ở đâu thì nằm ở đó. Để nó có thể di chuyển, ta thêm thuộc tính CSS này vào là xong.

The Violation of Love Languages | Psychology Today

Bước 3: Tạo file CSS có tên là style.css

Thêm thuộc tính position: absolute cho nút “NO”:

#btnNo {
  position: absolute;
}Code language: CSS (css)

OK. Giờ khi di chuột vào nút “NO” là nó có thể chạy nhảy khắp màn hình rồi. Cơ mà xấu quá nhỉ, chỉnh sửa CSS cho nó dễ nhìn hơn nào. Các bạn copy lại đoạn CSS này nhé!

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

#loveQuestion {
  position: absolute;
  left: 220px;
  top: 230px;
  font-size: 80px;
}

input {
  width: 200px;
  font-size: 30px;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
}

#btnYes {
  position: absolute;
  left: 480px;
  top: 450px;
  background-color: #7bd806;
  cursor: pointer;
}

#btnNo {
  position: absolute;
  left: 860px;
  top: 450px;
  background-color: #f4511e;
  transition: 0.3s;
}Code language: CSS (css)

Vị trí của các phần tử chỉ ở mức tương đối vì mình đặt chúng dưới dạng số cụ thể. Các bạn có thể sửa thuộc tính left, top sao cho phù hợp với màn hình chẳng hạn.

Bước 4: Clone hiệu ứng

Đang mùa đông nên có hiệu ứng tuyết rơi thêm vào cũng rất hay, mà mình không rành về Canvas cho lắm nên đi copy trên Google =)). Các bạn thêm thẻ canvas trong file HTML:

<canvas id="canvas"></canvas>
<h1 id="loveQuestion">Làm người yêu anh nhé, babe?</h1>
<input type="button" id="btnYes" value="CÓ" onclick="yesClick()" />
<input type="button" id="btnNo" value="KHÔNG" onmouseover="noHover()" />Code language: HTML, XML (xml)

Và ném cái đoạn JavaScript này lên đầu ở file script.js:

/*
Snow Effect source: https://codepen.io/longzero/pen/Kwdbyj
*/

window.onload = function () {
  //canvas init
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  //canvas dimensions
  var W = window.innerWidth;
  var H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;

  //snowflake particles
  var mp = 25; //max particles
  var particles = [];
  for (var i = 0; i < mp; i++) {
    particles.push({
      x: Math.random() * W, //x-coordinate
      y: Math.random() * H, //y-coordinate
      r: Math.random() * 4 + 1, //radius
      d: Math.random() * mp, //density
    });
  }

  //Lets draw the flakes
  function draw() {
    ctx.clearRect(0, 0, W, H);

    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
    ctx.beginPath();
    for (var i = 0; i < mp; i++) {
      var p = particles[i];
      ctx.moveTo(p.x, p.y);
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
    }
    ctx.fill();
    update();
  }

  //Function to move the snowflakes
  //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
  var angle = 0;
  function update() {
    angle += 0.01;
    for (var i = 0; i < mp; i++) {
      var p = particles[i];
      //Updating X and Y coordinates
      //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
      //Every particle has its own density which can be used to make the downward movement different for each flake
      //Lets make it more random by adding in the radius
      p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
      p.x += Math.sin(angle) * 2;

      //Sending flakes back from the top when it exits
      //Lets make it a bit more organic and let flakes enter from the left and right also.
      if (p.x > W + 5 || p.x < -5 || p.y > H) {
        if (i % 3 > 0) {
          //66.67% of the flakes
          particles[i] = { x: Math.random() * W, y: -10, r: p.r, d: p.d };
        } else {
          //If the flake is exitting from the right
          if (Math.sin(angle) > 0) {
            //Enter from the left
            particles[i] = { x: -5, y: Math.random() * H, r: p.r, d: p.d };
          } else {
            //Enter from the right
            particles[i] = { x: W + 5, y: Math.random() * H, r: p.r, d: p.d };
          }
        }
      }
    }
  }

  //animation loop
  setInterval(draw, 33);
};Code language: JavaScript (javascript)

Và thêm 1 đoạn code CSS nữa:

body {
  background: #6b92b9;
}
canvas {
  display: block;
}Code language: CSS (css)

Tỏ tình crush cùng ứng dụng Do You Love Me

Sau khi hoàn thiện, nếu màn hình của bạn hiển thị như thế này, có nghĩa là bạn đã hoàn thành ứng dụng Do You Love Me rồi. Còn nếu không giống, cũng đừng buồn vì mình để source code ở phần cuối của bài viết.

Kết luận

Chắc hẳn bạn cũng gặt hái được gì đó từ bài viết này rồi phải không, mình sẽ tóm tắt lại một số kiến thức ở trên:

Sử dụng các sự kiện onclick và onmouseover
Sử dụng hàm Math.random() để sinh ra các số ngẫu nhiên
Sử dụng các thuộc tính window.innerHeight và window.innerWidth để lấy chiều cao và chiều rộng của trình duyệt
Sử dụng hàm document.getElementById để lấy về nút “NO”
Sử dụng thuộc tính style.left và style.top để thay đổi vị trí của nút “NO”