[TUT] Hướng dẫn làm jQuery game [What was the last fruit ?] 31-7

Giao diện chính khi chơi game.

Xin chào các bạn  ! đây là lần đầu tiên mình viết TUT hướng dẫn như thế này.. văn mình dỡ + câu cú lộn xộn.. mong mọi người thông cảm trước..

Link game : http://js.caosugiong.com/last-fruit/

1 - Giới thiệu về game :
Gameplay khá đơn giản.. chỉ cần nhìn và nhớ loại trái cây hiện ra trước đó... chọn vào đúng loại ở bên dưới, đồng thời nhớ luôn loại trái cây đang hiển thị... cứ như vậy nhớ + click.. thử xem bạn chơi được tối đa bao nhiêu điểm ????


Game hỗ trợ Localstorage[html5] nên highscore của bạn sẽ lưu luôn ở đó...

Sử dụng animation từ  [animated.css] ở link sau đây ..rất mượt và thú vị.. http://daneden.github.io/animate.css/

Tất nhiên jQuery + jQuery mobile [cảm ứng]

2 - Bắt đầu nào...

Đầu tiên là sườn HTML cho game của chúng ta.. phần này yêu cầu bạn phải nắm trước kiến thức HTML và 1 chút CSS để thiết kế giao diện game này..

<div class="wrap">
<h3 class="start"></h3>
<div class="fruit-show">
</div>
<div class="point-board">
<b>
 <span class="point">0</span> pts  - Highscore : <span class="high">0</span> pts
</b>
</div>
<div class="time"><img src="" alt=""></div>
<div class="clear"></div>
<div class="fruit-choice">

Tiếp theo mình sẽ giải thích từng chức năng của code bên dưới

Đầu tiên :

var hs = localStorage.getItem("highScore");
$(document).ready(function(){
    $(".high").html(hs);
})
var end; // biến gọi gameover dùng setTimeout
var score = 0; // điểm
var step = 0; // đếm bước nhảy để kiểm tra xem đúng/sai
var n;
var last; // biến chứa giá trị của mảng qF
var aF = ['chanh','dao','dau','dua','nho','tao','xoai']; // 2 mảng aF và qF chứa tên quả, tên ảnh nằm trong thư mục /img/
var qF = ['chanh','dao','dau','dua','nho','tao','xoai'];
var ans = []; // khi user chọn thì đáp án sẽ push vào đây.. để mình kiểm tra..

Dùng var để khai báo các biến...

 - Khi người dùng click/tap vào .start thì sẽ chạy function start();
Function Start();

$(".start").tap(function(){
    $(this).addClass("animated zoomOutUp");
    start();
})
function start(){
    n = (Math.floor(Math.random()*6)+1);
    ans.push(qF[n]);
    $(".fruit-show").html("<img class='q' src='img/"+qF[n]+".png'>");
    $(".q").addClass("animated flipInY");
    setTimeout(core,3000);
}

* Khi click vào class start thì class start sẽ addClass [Thêm class] vào chính nó với class name là : "animated zoomOutUp". function này có tác dụng thêm animated vào class start làm nó sinh động hơn.. :D

** function start();
-Ta đếm bên trong mảng qF có 6 giá trị.. muốn lấy 1 giá trị ngẫu nhiên thì ta dùng
n = (Math.floor(Math.random()*6)+1);
để lấy 1 số ngẫu nhiên từ 0 - 6.. rồi dùng val này để xác định vị trí (index) của mảng qF..

vd : nếu n = 2 => qF[2] console.log(qF[2]) == dau ... đếm từ 0  và 2 là vị trí của Dâu...

-Sau khi có được n ta xét tiếp đến dòng : ans.push(qF[n]);
Bạn đã biết ans[] là mãng chứa đáp án... khi đó ans sẽ được gán giá trị là qF[n] vào như vd bên trên thì ans[] sẽ chứa "dau"...

 - Tiếp theo : $(".fruit-show").html("<img class='q' src='img/"+qF[n]+".png'>");
Ta thêm nội dung vào .fruit-show bằng tag html("nội dung muốn nhét vào :D");...
Mình thêm tag HTML img .. với class là [q] src='img/"+qF[n]+".png'>
Theo vd thì qF[2] => src = "img/dau.png" sẽ load ảnh đó lên.. và đổ vào .fruit-show...

-$(".q").addClass("animated flipInY"); Thêm animated ...

- Cuối cùng : setTimeout(core,3000);
Dùng setTimeout để gọi function core(); sau 3000ms ~ 3 giây...để người chơi nhớ loại trái cây đầu tiên...
và gọi core() cho core() load trái cây tiếp theo...

Function Core();

function core(){
   
    $(".q").addClass("animated flipOutY");
    n = (Math.floor(Math.random()*6)+1);
    ans.push(qF[n]);
    $(".fruit-show").html("<img class='q' src='img/"+qF[n]+".png'>");
    $(".q").addClass("animated flipInY");
    ask();
    step++;

}

Nếu bạn để ý sẽ thấy core() không khác gì start() là mấy... vì core() chỉ lặp đi lặp lại như start()... chỉ khác ở vài điểm :
- Gọi thêm ask(); // hiện list trái cây bên dưới cho người dùng chọn..
- Biến step ++... // Bên trên mình khai báo step = 0 .. khi step++ <=> với step = step + 1; xác định vị trị của mảng hiện tại để kiểm tra xem user có chọn đúng loại trái cây trước đó hay không ....

Function Ask();

function ask(){

    $(".fruit-choice").html('');
    shuffle(aF);
    for(var i = 0; i < 7; i++){
        $(".fruit-choice").append("<img class='a' data-value='"+aF[i]+"' src='img/"+aF[i]+".png'>");
    }

    $(".time img").attr("src",'count.gif');
    end = setTimeout(function(){
        $(".time img").attr("src",'null');
        over();
    },3000);
}

* Vài điêm mới ở function này :
- shuffle(aF) // Mình có tìm được function đảo mãng ngẫu nhiên và mình sẽ đề cập nó ở bên dưới... tác dụng chính của câu lệnh này là đảo nội dung bên trong mãng aF thành ra ngẫu nhiên.. không còn theo vị trí ban đầu nữa... vd ta có mãng : 1,2,3,4... sau khi shuffle thì mãng sẽ là : 2,3,1,4 ... và cứ như thế mỗi khi gọi Ask() thì mãng aF lại bị đảo lộn... kết quả là list trái cây người dùng click vào sẽ bị đảo lộn vị trí...

- Dùng vòng lặp for để đổ data vào .fruit-choice

- Mình dùng append() để đẩy nội dung xuống phía dưới... vd ta có:

.a
.b
.c
Ta dùng append(".d")..thì ta sẽ được
.a
.b
.c
.d  <-- nằm cuối..

Phần này chỉ là phụ.. để tạo thêm time cho game.. mình để setTimeout 3giây .. sau 3 giây thì gameover... nếu click sai cũng over() ...

$(".time img").attr("src",'count.gif');
    end = setTimeout(function(){
        $(".time img").attr("src",'null');
        over();
    },3000);

Mình tạm ngưng ở đây - từ từ mình sẽ update tiếp.. ... nếu có gì thắc mắc có thể ask mình trên fb.. rất vui lòng được giúp đỡ các bạn...ở đây mình nói hơi chung chung nên có thể các bạn khó hiểu.. nhưng bắt tay vào thực hành các phương pháp trên thì các bạn có thể làm những game đơn giản kiểu như vậy... rất dễ phải không ? hẹn gặp lại...