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

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

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

ดูแล้ว 3,085 ครั้ง


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

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

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

demo.html

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!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>
 
ส่วนที่เราสามารถแก้ไข แล้วนำไปใช้งานได้เลยก็คือ
 
1
2
3
4
5
6
// array คำที่จะใช้สำหรับเรียงประโยค
var listConversation = [
    ("See you next time").split(" "),
    ("What's your job?").split(" "),
    ['คุณ','ชื่อ','อะไร']
];
 
สามารถกำหนดกี่รายการก็ได้ ในตัวอย่างกำหนดแค่ 3 รายการ สังเกตว่ากรณีภาษาไทย 
เราจำเป็นต้องแยกคำเองแล้วกำหนดเป็น array ส่วนภาษาอังกฤษ เราสามารถใช้ฟังก์ชั่น split() 
เพื่อแยกคำด้วยช่องว่างได้เลย หรือจะแยกแบบกำหนดเองเหมือนภาษาไทยก็ได้ สมมติถ้าต้องการเพิ่ม
ประโยคใหม่ก็จะเป็นประมาณนี้
 
1
2
3
4
5
6
var listConversation = [
    ("See you next time").split(" "),
    ("What's your job?").split(" "),
    ['คุณ','ชื่อ','อะไร'],
    ['คุณ','สบาย','ดี','ไหม']
];
 
หรือถ้าไม่อยากแยกตามตัวอย่าง ก็สามารถพิมพ์ประโยคแบบมีช่องว่าง แล้วใช้คำสั้ง split()  แทนก็ได้
 
1
2
3
4
5
6
var listConversation = [
    ("See you next time").split(" "),
    ("What's your job?").split(" "),
    ['คุณ','ชื่อ','อะไร'],
    ('คุณ สบาย ดี ไหม').split(" ")
];
 
รูปแบบรายการสามารถประยุกต์ดึงข้อมูลจาก ajax หรือฐานข้อมูลก็ได้ เพียงแค่นำมาจัดรูปแบบให้ได้เป็น 
array ของคำเพื่อนำไปใช้งานต่อ
 
ตัวอย่างโค้ดพร้อมคำอธิบาย ศึกษาดูว่า ถ้าเข้าใจการทำงานทั้งหมด แสดงว่ามีความเข้าใจ
เกี่ยวกับคำสั่งต่างๆ ของ jQuery พื้นฐานดีอยู่แล้ว
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<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:: jquery html game







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ