Trong phần 2, người dùng sẽ được học cách sử dụng Vue.js để lập trình một trò chơi đơn giản.
Chào mừng các bạn đến với phần 2 của series học lập trình Vue.js! Trong phần này, chúng ta sẽ học cách sử dụng Vue.js để lập trình một trò chơi đơn giản. Chúng ta sẽ bắt đầu với việc tạo ra một giao diện người dùng đơn giản, sau đó thêm các tính năng để cho phép người dùng tương tác với trò chơi của chúng ta.
Lập trình game là một trong những ứng dụng thú vị của Vue.js, vì nó yêu cầu chúng ta phải sử dụng nhiều tính năng của framework như quản lý trạng thái, thao tác với DOM và xử lý sự kiện. Chúng ta sẽ học cách sử dụng các tính năng này để tạo ra một trò chơi hoàn chỉnh.
Chúng ta sẽ đi từng bước một để giải thích từng khái niệm và cách sử dụng chúng.
Trước tiên bạn tải file tài nguyên ở đây. Sau đó mở thư mục starter để xem cấu trúc của nó, mình đã thiết kế giao diện của nó. Chúng ta sẽ cùng phân tích qua.
Phân tích dự án
Đây là giao diện chính của chúng ta, với phần header và phần hiển thị thông tin chính bao gồm 2 phần Chẵn và Lẻ. Phần Tổng ăn là điểm số mà bạn nhận được sau khi ăn được từ bên thua, còn phần số ở dưới là phần tiền đặt cược. Chúng ta có 2 ô input ở hai bên để đặt cược số điểm, ở giữa là số thời gian đếm ngược đến khi công bố kết quả.
Kéo xuống dưới là nút đặt cược để đặt cược số điểm bạn đã nhập. Cuối cùng là hiển thị lịch sử ăn cược sau mỗi phiên. Giờ chúng ta có thể bắt tay vào code được rồi .
Xây dựng biến khởi tạo lưu giá trị
Đầu tiên là trong file app.js, chúng ta cần khởi tạo các biến lưu trữ các giá trị như thời gian, tổng chẵn ăn , tổng lẻ ăn, số tiền cược của hai bên cũng như số tiền nhập, cuối cùng là một hàm lưu trữ lịch sử ăn cược
app.js
- data() {
- return {
- time: 30,
- sumChan : 0,
- sumLe: 0,
- chan: 0,
- le:0,
- setChan:0,
- setLe:0,
- logs:[]
- }
- },
Tiếp theo, mình sẽ hiển thị các biến này tại file index.html trong thẻ section
- <section id=“” class=“container”>
- <h2></h2>
- <div class=“main”>
- <div>
- <h1 class=“t”>Chẵn</h1>
- <h3>Tổng ăn : {{sumChan}}</h3>
- <h4>{{chan}}</h4>
- <img src=“xx.png” alt=“”>
- </div>
- <div>
- <h1>{{time}}s</h1>
- </div>
- <div>
- <h1 class=“x”>Lẻ</h1>
- <h3>Tổng ăn : {{sumLe}}</h3>
- <h4>{{le}}</h4>
- <img src=“xx.png” alt=“”>
- </div>
- </div>
- </section>
Tiếp theo là hiển thị các thông số nhập vào trong section có id là “controls”
- <section id=“controls”>
- <div class=“l”>
- <input type=“number” min=“0” v-model=“setChan”>
- <button>Đặt cược</button>
- </div>
- <div class=“l”>
- <input type=“number” min=“0” v-model=“setLe”>
- <button>Đặt cược</button>
- </div>
- </section>
Cuối cùng là hiển thị lịch sử ăn cược
- <section id=“log” class=“container”>
- <h2>Lịch sử ăn cược</h2>
- <ul>
- <li v-for=“log in logs”>{{ log }}</li>
- </ul>
- </section>
Xây dựng các sự kiện
Các sự kiện sẽ được xây dựng trong hai hàm là mounted() và methods(). Đầu tiên, viết hàm giúp hiển thị lịch sử ăn cược trả về sau mỗi phiên trong methods
- setLog(W, money){
- return `${W} ăn ${money}`;
- },
Viết hàm xử lý thời gian, sau khi hết 30s sẽ in ra bên thắng cược trong hàm mounted
- mounted(){
- setInterval(this.timeSub,1000);
- },
Viết hàm xử lý nhập dữ liệu điểm cược
- leftBtn(){
- this.chan += this.setChan;
- this.setChan = “”;
- },
- rightBtn(){
- this.le += this.setLe;
- this.setLe = “”;
- }
Viết hàm xử lý khi kết thúc thời gian, trả về kết quả cược
- timeSub(){
- if(this.time == 0){
- this.time = 30;
- if(Math.floor(Math.random()*10) <= 5){
- alert(“Chẵn ăn”);
- this.logs.push(this.setLog(“Chẵn”, this.chan*95+this.chan));
- this.sumChan += this.chan*95+this.chan;
- }else{
- alert(“Lẻ ăn”);
- this.logs.push(this.setLog(“Lẻ”, this.le*95+this.le));
- this.sumChan += this.le*95+this.le;
- }
- this.chan = 0;
- this.le = 0;
- }else{
- this.time–;
- }
- },
Khởi tạo các sự kiện tại file index.html. Khởi tạo thời gian
- <div>
- <h1 class=”t”>Chẵn</h1>
- <h3>Tổng ăn : {{sumChan}}</h3>
- <h4>{{chan}}</h4>
- <img src=”xx.png” alt=””>
- </div>
- <div>
- <h1 @change=”timeSub”>{{time}}s</h1>
- </div>
Khởi tạo các nút đặt cược số điểm và in ra lịch sử đặt cược
- <section id=”controls”>
- <div class=”l”>
- <input type=”number” min=”0″ v-model=”setChan”>
- <button @click=”leftBtn”>Đặt cược</button>
- </div>
- <div class=”l”>
- <input type=”number” min=”0″ v-model=”setLe”>
- <button @click=”rightBtn”>Đặt cược</button>
- </div>
- </section>
- <section id=”log” class=”container”>
- <h2>Lịch sử ăn cược</h2>
- <ul>
- <li v-for=”log in logs”>{{ log }}</li>
- </ul>
- </section>
Vậy là đã xong toàn bộ mã , bạn hãy chạy thử để kiểm tra nhé.
Deploy trên Netlify
Bạn có thể deploy nhanh trên Netlify. Kéo thả folder vào đây
Vậy là chúng ta đã triển khai thành công
Chúc mừng bạn đã hoàn thành series học lập trình VueJS qua game chẵn lẻ! Mình hy vọng rằng bạn đã học được nhiều điều mới và tận dụng kiến thức đó để phát triển các ứng dụng web sáng tạo và chuyên nghiệp.
Việc học lập trình không bao giờ kết thúc, người dùng nên tiếp tục tìm hiểu và phát triển kỹ năng. Nếu bạn cần bất kỳ trợ giúp nào trong quá trình học tập và phát triển, hãy liên hệ với cộng đồng lập trình viên VueJS hoặc các nguồn tài nguyên trực tuyến khác để được hỗ trợ.
Giảng viên Nguyễn Thị Loan
Bộ môn Công nghệ thông tin
Trường Cao đẳng FPT Polytechnic cơ sở Hà Nội
