แนวทางสร้างเกมเรียงคำเป็นประโยคด้วย jQuery อย่างง่าย

เขียนเมื่อ 2 ปีก่อน โดย Ninenik Narkdee
html jquery game

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ html jquery game

ดูแล้ว 2,303 ครั้ง


เนื้อหาบทความนี้ จะมาแนะนำวิธีการสร้างรูปแบบเกมหรือแบบฝึกหัดสำหรับเรียงคำ
ให้เป็นประโยคที่ถูกต้อง โดยจะเป็นแนวทางเบื้องต้น สามารถนำไปประยุกต์ปรับแต่ง
เพิ่มเติมได้
 

รูปแบบการทำงาน

    - นำประโยคที่ต้องการมาแยกเป็นคำ 
    - นำคำที่แยกมาสุ่มลำดับแล้วจัดเรียงเป็นตัวเลือก
    - ผู้เล่นเลือกรายการคำ เพิ่มไปจัดเรียงใหม่
    - ผู้เล่นสามารถยกเลิกการเลือกได้ 
    - เมื่อเลือกจัดเรียงใหม่ครบ ทุกคำเป็นประโยคเรียบร้อยแล้วก็จะไปประโยคต่อไปจนจบเกม
 
แนวทางนี้จะใช้สำหรับการฝึกจำมากกว่า แต่ถ้าต้องการทำเป็นจับเวลาและเก็บคะแนนก็สามารถนำไป
ปรับประยุกต์เพิ่มเติมได้ ถ้าต้องการดูตัวอย่าง เลื่อนไปด้านล่าง ดู demo ได้
 
โค้ดตัวอย่างทั้งหมด จะอธิบายแยกส่วนในด้านล่าง
 

demo.html

 
<!doctype html>
<html lang="th">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" >
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" >
    <style>
        body{
            background: #CCCCCC;
        }
    </style>
</head>
<body>
 
<style>
    ul.target-zone,ul.choice-zone{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        margin-bottom: 10px;
        justify-content: center;
    }
    ul.target-zone li,ul.choice-zone li{
        display: flex;
        min-width: 50px;
        height: 50px;
        width: auto;
        align-content: center;
        justify-content: center;
        margin-right: 10px;
        cursor: pointer;
        line-height: 50px;
    }
    ul.target-zone li{
        border: dashed 2px #37b992;
    }
    ul.target-zone li.filled{
        background: #FFFFFF;
        border: solid 1px #37b992;
    }
    ul.target-zone li.filled.pass{
        background: #84e41a;
        border: solid 1px #37b992;
        color: #FFFFFF;
    }        
    ul.choice-zone li{
        color: #FFFFFF;
        background: #ff9800;
        border: solid 1px #ff5722;
    }
    ul.choice-zone li:hover{
        box-shadow: 0 0.25em 0.25em rgb(0 0 0 / 10%);
    }
    button.btn-game{
        margin: auto;
        display: flex;    
        border-radius:6px;        
        cursor:pointer;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;           
        display: none;
    }
    button.btn-game:focus {
        position:relative;
        outline: none;
        top:1px;
    }    
    #restart{
        box-shadow:inset 0px 1px 0px 0px #f7c5c0;
        background:linear-gradient(to bottom, #fc8d83 5%, #e4685d 100%);
        background-color:#ff9800;
        border:1px solid #ff5722;
        text-shadow:0px 1px 0px #b23e35;
        color:#ffffff;
    }
    #restart:hover{
        background:linear-gradient(to bottom, #e4685d 5%, #fc8d83 100%);
        background-color:#e4685d;
    }
    #nextstep{
        box-shadow: inset 0px 1px 0px 0px #37a561;
        background: linear-gradient(to bottom, #31c372 5%, #44d273 100%);
        background-color: #8bc34a;
        border: 1px solid #37d05d;
        text-shadow: 0px 1px 0px #35b250;
        color:#ffffff;
    }
    #nextstep:hover{
        background: linear-gradient(to bottom, #1fe076 5%, #44d273 100%);
        background-color:#5de47a;
    }     
    #replay{
        box-shadow: inset 0px 1px 0px 0px #378fa5;
        background: linear-gradient(to bottom, #31a6c3 5%, #44c9d2 100%);
        background-color: #4a93c3;
        border: 1px solid #3798d0;
        text-shadow: 0px 1px 0px #3595b2;
        color:#ffffff;
    }
    #replay:hover{
        background: linear-gradient(to bottom, #31a6c3 5%, #44c9d2 100%);
        background-color: #4a93c3;
    }                 
</style>
 
<div class="container mt-5 mx-auto">

<!-- ส่วนสำหรับจัดเรียงเป็นประโยคใหม่ -->
<ul class="target-zone">
</ul>
<hr>
<!-- ส่วนสำหรับคำสุ่ม -->
<ul class="choice-zone">
</ul>  

<!-- ส่วนของปุ่มจัดการ     -->
<button type="button" class="btn-game" id="restart">ลองใหม่</button>
<button type="button" class="btn-game" id="nextstep">ข้อต่อไป</button>
<button type="button" class="btn-game" id="replay">เล่นใหม่อีกครั้ง</button>

</div>


<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {

    var selectSound = new Audio('https://www.ninenik.com/demo/sound/select-sound_2.wav');
    var correctSound = new Audio('https://www.ninenik.com/demo/sound/correct-bell_2.wav');
    var winSound = new Audio('https://www.ninenik.com/demo/sound/winning-sound_2.wav');    

    // ฟังก์ชั่นสำหรับสุ่มคำสำหรับเลือก 
    function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex;
    
        while (currentIndex !== 0) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
    
        return array;
    };

    // array คำที่จะใช้สำหรับเรียงประโยค
    var listConversation = [
        ("See you next time").split(" "),
        ("What's your job?").split(" "),
        ['คุณ','ชื่อ','อะไร']
    ];
    // เริ่มต้นใช้ค่าแรกแถวแรกก่อน ที่ key เท่ากับ 0
    var choiceVal = listConversation[0];

    // ส่วนสำหรับกำหนด element ต่างๆ
    var targetZone = $(".target-zone");
    var choiceZone = $(".choice-zone");
    var targetItem = $(".target-zone li");
    var choiceItem = $(".choice-zone li");
    var btnRestart = $("#restart"); 
    var btnNextstep = $("#nextstep"); 
    var btnReplay = $("#replay");

    // นับลำดับข้อหรือรายการ
    var step = 0;

    // ฟังก์ชั่นเมื่อเริ่มเกม
    function startGame(){
        let ran_choiceVal = []; // ค่าที่จะเก็บตัวเลือก
        targetZone.html("");
        choiceZone.html("");
        choiceZone.data("ans",choiceVal.join(""));
        ran_choiceVal = $.extend([],choiceVal);
        shuffle(ran_choiceVal);
        $.each(ran_choiceVal,function(i,v){
            choiceZone.prepend('<li>'+v+'</li>');
            targetZone.prepend('<li class="unfilled"></li>');          
        });
        btnRestart.hide();
        $(document.body).on("click",".target-zone li",function(){
            if($(this).hasClass("filled")){
                btnRestart.hide();
                let textRemove = $(this).text();
                $(this).toggleClass("filled unfilled")
                .text("").remove();
                targetZone.append('<li class="unfilled"></li>');
                choiceZone.append('<li>'+textRemove+'</li>');
            }
        });         
    }

    function restartGame(){
        startGame();
    }
    function nextstep(){
        step++;        
        if(step==listConversation.length){
            targetZone.html("");
            choiceZone.html("");            
            step = -1;
            btnNextstep.hide();
            btnReplay.css("display","flex");
        }else{
            choiceVal = listConversation[step];
            btnNextstep.hide();
            startGame();
        }
    }
    startGame();

    btnRestart.on("click",function(){
        restartGame();
    });
    btnNextstep.on("click",function(){
        nextstep();
    });    
    btnReplay.on("click",function(){
        btnReplay.hide();
        nextstep();
    });        
    $(document.body).on("click",".choice-zone li",function(){
        selectSound.play();
        targetZone.find(".unfilled:eq(0)")
        .text($(this).text())
        .toggleClass("unfilled filled");
        $(this).remove(); 
        if(choiceZone.find("li").length==0){ 
            let ans = $.trim(targetZone.text().replace(/\s+/g, ''));
            if(ans==choiceZone.data("ans")){
                correctSound.play();    
                targetZone.find("li").toggleClass("pass");
                $(document.body).off("click",".target-zone li");
                btnNextstep.css("display","flex");
            }else{
                btnRestart.css("display","flex");
            }
        }
    });    

});
</script>
<script>
$(function(){

    
});
</script>
</body>
</html>
 
ส่วนที่เราสามารถแก้ไข แล้วนำไปใช้งานได้เลยก็คือ
 
    // array คำที่จะใช้สำหรับเรียงประโยค
    var listConversation = [
        ("See you next time").split(" "),
        ("What's your job?").split(" "),
        ['คุณ','ชื่อ','อะไร']
    ];
 
สามารถกำหนดกี่รายการก็ได้ ในตัวอย่างกำหนดแค่ 3 รายการ สังเกตว่ากรณีภาษาไทย 
เราจำเป็นต้องแยกคำเองแล้วกำหนดเป็น array ส่วนภาษาอังกฤษ เราสามารถใช้ฟังก์ชั่น split() 
เพื่อแยกคำด้วยช่องว่างได้เลย หรือจะแยกแบบกำหนดเองเหมือนภาษาไทยก็ได้ สมมติถ้าต้องการเพิ่ม
ประโยคใหม่ก็จะเป็นประมาณนี้
 
    var listConversation = [
        ("See you next time").split(" "),
        ("What's your job?").split(" "),
        ['คุณ','ชื่อ','อะไร'],
        ['คุณ','สบาย','ดี','ไหม']
    ];
 
หรือถ้าไม่อยากแยกตามตัวอย่าง ก็สามารถพิมพ์ประโยคแบบมีช่องว่าง แล้วใช้คำสั้ง split()  แทนก็ได้
 
    var listConversation = [
        ("See you next time").split(" "),
        ("What's your job?").split(" "),
        ['คุณ','ชื่อ','อะไร'],
        ('คุณ สบาย ดี ไหม').split(" ")
    ];
 
รูปแบบรายการสามารถประยุกต์ดึงข้อมูลจาก ajax หรือฐานข้อมูลก็ได้ เพียงแค่นำมาจัดรูปแบบให้ได้เป็น 
array ของคำเพื่อนำไปใช้งานต่อ
 
ตัวอย่างโค้ดพร้อมคำอธิบาย ศึกษาดูว่า ถ้าเข้าใจการทำงานทั้งหมด แสดงว่ามีความเข้าใจ
เกี่ยวกับคำสั่งต่างๆ ของ jQuery พื้นฐานดีอยู่แล้ว
 
<script type="text/javascript">
jQuery(document).ready(function($) {

    var selectSound = new Audio('https://www.ninenik.com/demo/sound/select-sound_2.wav');
    var correctSound = new Audio('https://www.ninenik.com/demo/sound/correct-bell_2.wav');
    var winSound = new Audio('https://www.ninenik.com/demo/sound/winning-sound_2.wav');    

    // ฟังก์ชั่นสำหรับสุ่มคำสำหรับเลือก 
    function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex;
    
        while (currentIndex !== 0) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
    
        return array;
    };

    // array คำที่จะใช้สำหรับเรียงประโยค
    var listConversation = [
        ("See you next time").split(" "),
        ("What's your job?").split(" "),
        ['คุณ','ชื่อ','อะไร']
    ];
    // เริ่มต้นใช้ค่าแรกแถวแรกก่อน ที่ key เท่ากับ 0
    var choiceVal = listConversation[0];

    // ส่วนสำหรับกำหนด element ต่างๆ
    var targetZone = $(".target-zone");
    var choiceZone = $(".choice-zone");
    var targetItem = $(".target-zone li");
    var choiceItem = $(".choice-zone li");
    var btnRestart = $("#restart"); 
    var btnNextstep = $("#nextstep"); 
    var btnReplay = $("#replay");

    // นับลำดับข้อหรือรายการ
    var step = 0;

    // ฟังก์ชั่นเมื่อเริ่มเกม
    function startGame(){
        let ran_choiceVal = []; // ค่าที่จะเก็บตัวเลือก
        // รีเซ็คค่าต่างๆ ให้ว่าง
        targetZone.html("");
        choiceZone.html("");
        // กำหนดคำตอบ เอาคำมาต่อกันแล้วเก็บใน data attribute
        choiceZone.data("ans",choiceVal.join(""));
        ran_choiceVal = $.extend([],choiceVal); // เอาอาเรย์มาเก็บไว้สำหรับสุ่ม
        shuffle(ran_choiceVal); // สุ่มอาเรย์
        // วนลูปสร้างรายการคำ สำหรับเลือก และรายการเป้าหมายเท่าๆ กัน
        // หมายถึง ถ้ามี 6 คำ ตำแหน่งว่างเป้าหมายต้องมี 6 ตำแหน่งด้วย
        $.each(ran_choiceVal,function(i,v){
            choiceZone.prepend('<li>'+v+'</li>');
            targetZone.prepend('<li class="unfilled"></li>');          
        });
        btnRestart.hide();
        // กำหนดการทำงาน กรณีตอ้งการยกเลิกการเลือกรายการนั้นๆ
        $(document.body).on("click",".target-zone li",function(){
            // ดูว่ารายการที่เลือก ใช่ที่ถูกเติมแล้วหรือว่ายังไม่เติม
            if($(this).hasClass("filled")){ // ถ้าเติมหรือเลือกแล้ว
                btnRestart.hide();
                let textRemove = $(this).text(); // เก็บค่าคำที่เอาออก
                $(this).toggleClass("filled unfilled") // เปลี่ยนคลาส
                .text("").remove(); // เอาคำออก แล้วลบตัวที่เลือกออกไป
                targetZone.append('<li class="unfilled"></li>');// เติมตัวว่างด้านหลัง
                choiceZone.append('<li>'+textRemove+'</li>'); // ย้ายที่เลือกกลับมาที่เดิม
            }
        });         
    }

    // ฟังก์ชั่นเรียงข้อเดิมใหม่
    function restartGame(){
        startGame();
    }
    // ฟังก์ชั่นไปข้อหรือรายการถัดไป
    function nextstep(){
        step++; // บวกลำดับคีร์ของรายการเพิ่ม
        if(step==listConversation.length){ // ถ้าหมดแล้ว
            // รีเซ็ด
            targetZone.html("");
            choiceZone.html("");            
            step = -1;
            btnNextstep.hide();
            // แสดงปุ่มเริ่มเกมใหม่
            btnReplay.css("display","flex");
        }else{
            // เลื่อนไปข้อหรือรายการถัดไป
            choiceVal = listConversation[step];
            btnNextstep.hide();
            startGame(); // เริ่มเกิมในข้อถัดไป
        }
    }
    // เริ่มเกิมเมื่อโหลด
    startGame();

    // ปุ่มเรียกใช้ฟังก์ชั่นทำใหม่ในข้อนั้นๆ
    btnRestart.on("click",function(){
        restartGame();
    });
    // ปุ่มเรียกใช้ฟังก์ชั่นไปข้อต่อไป
    btnNextstep.on("click",function(){
        nextstep();
    });    
    // ปุ่มเรียกใช้ฟังก์ชั่น เริ่มเกิมใหม่
    btnReplay.on("click",function(){
        btnReplay.hide();
        nextstep();
    });        
    // กำหนดการทำงานเมื่อเลือกคำเพื่อจะเรียง
    $(document.body).on("click",".choice-zone li",function(){
        selectSound.play();
        // หาตัวช่องว่างแรกที่ยังไม่เติม ถ้ามีก็เติมคำ ที่่กดเลิอกลงไป
        // แล้วเปลี่ยนคลาสเป็นเติมแล้ว
        targetZone.find(".unfilled:eq(0)")
        .text($(this).text())
        .toggleClass("unfilled filled");
        $(this).remove(); // ลบที่เลือกแล้วออก
        // ถ้าเลือกหมดแล้ว ทำการตรวจคำตอบ
        if(choiceZone.find("li").length==0){ 
            // เอาเฉพาะข้อความมาต่อกันเรียงเป็นคำตอบไว้ไปตรวจสอบ
            let ans = $.trim(targetZone.text().replace(/\s+/g, ''));
            if(ans==choiceZone.data("ans")){ // ถ้าตรงกับค่าที่กำหนด
                correctSound.play();    
                targetZone.find("li").toggleClass("pass"); 
                //ให้รายการผ่านแล้ว ลบไม่ได้
                $(document.body).off("click",".target-zone li"); 
                btnNextstep.css("display","flex");
            }else{ // ถ้าไม่ตรง ก็ขึ้นเปุ่มเลองใหม่
                btnRestart.css("display","flex");
            }
        }
    });    

});
</script>
 
หวังว่าเนื้อหานี้จะเป็นแนวทางเอาไปปรับแต่งประยุกต์ใช้งานต่อไปได้ไม่มากก็น้อย
เช่นการสร้างแบบฝึกแต่งประโยคสำหรับการเรียนภาษา
หรือทำเป็นเกมแบบมีเวลากำกับและมีการเก็บคะแนนหรือเลเวล อะไรประมาณนั้น
 




กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: game jquery html







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ