Hướng dẫn tạo game lật thẻ bài bằng Javascript
I. Giới thiệu
Một trò chơi đơn giản được viết bằng các ngôn ngữ lập trình web quen thuộc. Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo trò chơi. Bạn sẽ tìm hiểu cách tạo các hiệu ứng chuyển động và điều hướng thẻ bài.
II. Chuẩn bị
HTML: Tạo một 1 tập tin HTML đơn giản như đoạn code dưới đây để định hình nội dung của trò chơi.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<title>Game Card by Javascript</title>
</head>
<body>
<table id="cards" border="0">
<tr>
<td class="down"></td>
<td class="down"></td>
<td class="down"></td>
<td class="down"></td>
</tr>
<tr>
<td class="down"></td>
<td class="down"></td>
<td class="down"></td>
<td class="down"></td>
</tr>
<tr>
<td class="down"></td>
<td class="down"></td>
<td class="down"></td>
<td class="down"></td>
</tr>
<tr>
<td class="down"></td>
<td class="down"></td>
<td class="down"></td>
<td class="down"></td>
</tr>
</table>
</body>
</html>
CSS: Tạo một tập tin CSS để thiết lập kích thước và kiểu dáng cho các thẻ bài.
* {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}
body {
margin: 0;
}
#cards {
width: 100vw;
height: 100vh;
border-collapse: collapse;
padding: 0;
table-layout: fixed;
}
td {
box-shadow: 0 0 1px #333 inset;
text-align: center;
overflow: hidden;
font-size: 30pt;
color: #FFF;
background: #9D9;
transition: all 500ms ease-in-out, color 250ms ease-in-out, background 250ms ease-in-out;
}
.down {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
color: transparent;
background: #7D7;
}
.disabled {
background: #AEA;
}
III. Tạo trò chơi với mã javascript
Tạo mã JavaScript:
$(function(){
var empty = new Object();
var opened = {
"1" : new Object(),
"2" : new Object()
};
var moves = 0;
var clicks = 0;
var time = $.now();
function unflip(){
setTimeout(function(){
var one = $(opened["1"]);
var two = $(opened["2"]);
if(one.text() != two.text()){
one.toggleClass("down");
two.toggleClass("down");
}
else{
one.off("click");
two.off("click");
one.attr("name", true);
two.attr("name", true);
one.addClass("disabled");
two.addClass("disabled");
var win = false;
for(var i = 0; i < 16; i++){
var name = $("td").eq(i).attr("name");
if(name && name != false){
win = true;
}
else{
win = false;
break;
}
}
if(win == true){
var restart = confirm("You Won!\nMoves: " + moves + "\nPress \"OK\" to start a New Game!");
if(restart){
setup(true);
moves = 0;
}else{}
}else{}
}
opened = {
"1" : new Object(),
"2" : new Object()
};
}, 500);
}
function clicked(){
if(time){
if(parseInt($.now()) - parseInt(time) >= 500){
++clicks;
++moves;
time = $.now();
if($(this).hasClass("click")){
$(this).removeClass("click");
$(this).addClass("down");
opened["1"] = new Object();
clicks = 0;
}
else{
$(this).addClass("click");
if(clicks >= 2){
opened["2"] = $(this);
unflip();
clicks = 0;
$("td").removeClass("click")
}
else{
opened["1"] = $(this)
}
$(this).toggleClass("down");
}}else{}
}else{}
}
$("td").on("click", clicked);
function setup(retry){
if(retry){
$("td").on("click", clicked);
$("td").toggleClass("down");
}
var used = {
"0" : false,
"1" : false,
"2" : false,
"3" : false,
"4" : false,
"5" : false,
"6" : false,
"7" : false,
"8" : false,
"9" : false,
"10" : false,
"11" : false,
"12" : false,
"13" : false,
"14" : false,
"15" : false
}
function random(){
var rand = (Math.floor(Math.random() * 16));
while(used[rand] == true){
rand = (Math.floor(Math.random() * 16));
}
used[rand] = true;
return rand;
}
var icons = [
"♣",
"♠",
"♪",
"♥",
"♦",
"★",
"◼",
"☀"
];
for(i in icons){
var ico = icons[i];
var one = $("td").eq(random());
var two = $("td").eq(random());
$(one).text(ico);
$(two).text(ico);
}
$("td").removeAttr("name");
$("td").removeClass("disabled");
}
setup();
});
IV. Kiểm tra trò chơi của bạn
Kiểm tra trang web: Hãy mở trang web trong trình duyệt và kiểm tra trò chơi của bạn. Bạn sẽ thấy trò chơi hiển thị một tập hợp các thẻ bài. Cách chơi thì cực kỳ đơn giản, đó là khi bạn lật được hai thẻ bài giống nhau thì hai thẻ bài đó sẽ được lật ra và chơi tương tự cho đến lúc các thẻ bài được mở hết, khi đó bạn sẽ giành chiến thắng trò chơi
V. Kết luận
Trong bài viết này, bạn đã tìm hiểu cách tạo một trò chơi đơn giản sử dụng javascript. Bằng cách sử dụng các hàm và phương thức của javascript, bạn có thể tạo hiệu ứng chuyển động và điều hướng thẻ bài một cách dễ dàng. Hãy tìm hiểu thêm về các tính năng khác của javascript để tạo các trò chơi khác phong phú và đa dạng. Chúc bạn thành công!
All rights reserved
