เนื้อหาบทความนี้ จะมาแนะนำวิธีการสร้างรูปแบบเกมหรือแบบฝึกหัดสำหรับเรียงคำ
ให้เป็นประโยคที่ถูกต้อง โดยจะเป็นแนวทางเบื้องต้น สามารถนำไปประยุกต์ปรับแต่ง
เพิ่มเติมได้
รูปแบบการทำงาน
- นำประโยคที่ต้องการมาแยกเป็นคำ
- นำคำที่แยกมาสุ่มลำดับแล้วจัดเรียงเป็นตัวเลือก
- ผู้เล่นเลือกรายการคำ เพิ่มไปจัดเรียงใหม่
- ผู้เล่นสามารถยกเลิกการเลือกได้
- เมื่อเลือกจัดเรียงใหม่ครบ ทุกคำเป็นประโยคเรียบร้อยแล้วก็จะไปประโยคต่อไปจนจบเกม
แนวทางนี้จะใช้สำหรับการฝึกจำมากกว่า แต่ถ้าต้องการทำเป็นจับเวลาและเก็บคะแนนก็สามารถนำไป
ปรับประยุกต์เพิ่มเติมได้ ถ้าต้องการดูตัวอย่าง เลื่อนไปด้านล่าง ดู 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>
หวังว่าเนื้อหานี้จะเป็นแนวทางเอาไปปรับแต่งประยุกต์ใช้งานต่อไปได้ไม่มากก็น้อย
เช่นการสร้างแบบฝึกแต่งประโยคสำหรับการเรียนภาษา
หรือทำเป็นเกมแบบมีเวลากำกับและมีการเก็บคะแนนหรือเลเวล อะไรประมาณนั้น
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง