Code Game Lật Hình đơn giản vô cùng ấn tượng giống cách mà chúng ta chơi Game Pikachu. Ngày xưa, cái thủa mà internet không được phổ biến rộng rãi như bây giờ. Lúc đó mình mới sắm được một PC chạy chip intel celeron. Nhà thì làm gì có mạng và Pikachu là một trong những tựa Game mình thích nhất lúc bấy giờ. Về cơ bản thì trong máy tính của mình lúc đó chỉ có vài Game dạng như thế.
Hôm nay chúng ta sẽ trở về quá khứ bằng việc tạo ra một ứng dụng web từ những dòng Code. Cụ thể, chúng ta sẽ tự code game lật hình mà bạn có thể dễ dàng áp dụng trên website của mình để người dùng có chỗ giải trí nếu bạn muốn. Sau khi người chơi chiến thắng họ có thể chơi lại hoặc chia sẻ lên mạng xã hội.
Code Game Lật Hình đơn giản hiệu quả
Trước khi đi vào bộ code cho Game lật hình này. Blog Lại Văn Đức mời bạn cùng chơi thử một ván xem bạn mất bao nhiêu thời gian để chiến thắng được trò chơi này nhé.
Code Game Lật Hình này sẽ hiển thị ngẫu nhiên các vị trí khác nhau sau mỗi ván hoặc khi bạn tải lại trang. Vì vậy sẽ tạo cảm hứng chơi hơn và mức độ khó của mỗi ván là như nhau. Bộ Code sử dụng HTML và CSS cùng JavaScript.
Bộ Code Game Lật Hình chi tiết
Ngay bây giờ chúng ta sẽ đến với những dòng code thực hiện cho trò chơi lật hình này. Đầu tiên, bạn hãy chèn 3 dòng code bên dưới vào thẻ head.
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Anton'> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Bạn lưu ý thẻ viewport được sử dụng bên trên là để gán Responsive trên các thiết bị di động. Thẻ script là để gọi thư viện jquery.
Tiếp theo sẽ là HTML cho bộ Code Game Lật Hình này.
<div class="wrap"> <div class="game"></div> <div class="modal-overlay"> <div class="modal"> <h2 class="winner">Win</h2> <button class="restart">Play again</button> <p class="message">Details on <a href="https://laivanduc.vn/">Lai Van Duc Blog</a> </p> <p class="share-text">Share</p> <ul class="social"> <li><a target="_blank" class="twitter" href="https://twitter.com/share?url=https://codepen.io/laivanduc/pen/mJappx"><span class="brandico-twitter-bird"></span></a></li> <li><a target="_blank" class="facebook" href="https://www.facebook.com/sharer.php?u=https://codepen.io/laivanduc/pen/mJappx"><span class="brandico-facebook"></span></a></li> <li><a target="_blank" class="google" href="https://plus.google.com/share?url=https://codepen.io/laivanduc/pen/mJappx"><span class="brandico-googleplus-rect"></span></a></li> </ul> </div> </div> <footer> <p class="disclaimer">All Logos used in this Game are owned by their respective organizations.</p> </footer> </div><!-- End Wrap -->
Tiếp theo chúng ta sẽ cần tới đoạn Code CSS như sau:
@import url(http://weloveiconfonts.com/api/?family=Arial);
/* brandico */
[class*="brandico-"]:before {
font-family: 'Arial', sans-serif;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: black;
min-height: 100%;
font-family: "Arial", sans-serif;
}
.wrap {
position: relative;
height: 100%;
min-height: 500px;
padding-bottom: 20px;
}
.game {
transform-style: preserve-3d;
perspective: 500px;
min-height: 100%;
height: 100%;
}
@mixin width($max){
@media (max-width: $max){
@content;
}
}
@keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
.card {
float: left;
width: 16.66666%;
height: 25%;
padding: 5px;
text-align: center;
display: block;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 50;
-webkit-tap-highlight-color: rgba(0,0,0,0);
@include width(800px){
width: 25%;
height: 16.666%;
}
.inside {
width: 100%;
height: 100%;
display: block;
transform-style: preserve-3d;
transition: .4s ease-in-out;
background: white;
&.picked, &.matched {
transform: rotateY(180deg);
}
&.matched {
animation: 1s matchAnim ease-in-out;
animation-delay: .4s;
}
}
.front, .back {
border: 1px solid black;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
img {
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 100%;
}
}
.front {
transform: rotateY(-180deg);
@include width(800px){
padding: 5px;
}
}
.back{
@include width(800px){
padding: 10px;
}
}
}
.modal-overlay {
display: none;
background: rgba(0,0,0,.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
display: none;
position: relative;
width: 500px;
height: 400px;
max-height: 90%;
max-width: 90%;
min-height: 380px;
margin: 0 auto;
background: white;
top: 50%;
transform: translateY(-50%);
padding: 30px 10px;
.winner {
font-size: 80px;
text-align: center;
font-family: "Arial", sans-serif;
color: #4d4d4d;
text-shadow: 0px 3px 0 black;
@include width(480px){
font-size: 60px;
}
}
.restart {
font-family: "Arial", sans-serif;
margin: 30px auto;
padding: 20px 30px;
display: block;
font-size: 30px;
border: none;
background: #4d4d4d;
background: linear-gradient(#4d4d4d, #222);
border: 1px solid #222;
border-radius: 5px;
color: white;
text-shadow: 0px 1px 0 black;
cursor: pointer;
&:hover {
background: linear-gradient(#222, black);
}
}
.message {
text-align: center;
a {
text-decoration: none;
color: #28afe6;
font-weight: bold;
&:hover {
$c: lighten(#28afe6, 10%);
color: $c;
border-bottom: 1px dotted $c;
}
}
}
.share-text {
text-align: center;
margin: 10px auto;
}
.social {
margin: 20px auto;
text-align: center;
li {
display: inline-block;
height: 50px;
width: 50px;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
a {
display: block;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
border-radius: 5px;
&.facebook {
background: #3b5998;
&:hover {
background: lighten(#3b5998, 10%);
}
}
&.google {
background: #D34836;
&:hover {
background: lighten(#D34836, 10%);
}
}
&.twitter {
background: #4099FF;
&:hover {
background: lighten(#4099FF, 10%);
}
}
}
}
}
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
z-index: 0;
.disclaimer {
line-height: 20px;
font-size: 12px;
color: #727272;
text-align: center;
@include width(767px){
font-size: 8px;
}
}
}
Và cuối cùng là linh hồn của Code Game Lật Hình này bằng JavaScript:
(function(){
var Memory = {
init: function(cards){
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
this.$restartButton = $("button.restart");
this.cardsArray = $.merge(cards, cards);
this.shuffleCards(this.cardsArray);
this.setup();
},
shuffleCards: function(cardsArray){
this.$cards = $(this.shuffle(this.cardsArray));
},
setup: function(){
this.html = this.buildHTML();
this.$game.html(this.html);
this.$memoryCards = $(".card");
this.binding();
this.paused = false;
this.guess = null;
},
binding: function(){
this.$memoryCards.on("click", this.cardClicked);
this.$restartButton.on("click", $.proxy(this.reset, this));
},
// kinda messy but hey
cardClicked: function(){
var _ = Memory;
var $card = $(this);
if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
$card.find(".inside").addClass("picked");
if(!_.guess){
_.guess = $(this).attr("data-id");
} else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
$(".picked").addClass("matched");
_.guess = null;
} else {
_.guess = null;
_.paused = true;
setTimeout(function(){
$(".picked").removeClass("picked");
Memory.paused = false;
}, 600);
}
if($(".matched").length == $(".card").length){
_.win();
}
}
},
win: function(){
this.paused = true;
setTimeout(function(){
Memory.showModal();
Memory.$game.fadeOut();
}, 1000);
},
showModal: function(){
this.$overlay.show();
this.$modal.fadeIn("slow");
},
hideModal: function(){
this.$overlay.hide();
this.$modal.hide();
},
reset: function(){
this.hideModal();
this.shuffleCards(this.cardsArray);
this.setup();
this.$game.show("slow");
},
// Fisher--Yates Algorithm -- https://bost.ocks.org/mike/shuffle/
shuffle: function(array){
var counter = array.length, temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
},
buildHTML: function(){
var frag = '';
this.$cards.each(function(k, v){
frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
<div class="front"><img src="'+ v.img +'"\
alt="'+ v.name +'" /></div>\
<div class="back"><img src="https://laivanduc.vn/wp-content/uploads/2021/12/favic.png"\
alt="laivanduc" /></div></div>\
</div>';
});
return frag;
}
};
var cards = [
{
name: "php",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
id: 1,
},
{
name: "css3",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
id: 2
},
{
name: "html5",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
id: 3
},
{
name: "jquery",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
id: 4
},
{
name: "javascript",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
id: 5
},
{
name: "node",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
id: 6
},
{
name: "photoshop",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
id: 7
},
{
name: "python",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
id: 8
},
{
name: "rails",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
id: 9
},
{
name: "sass",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
id: 10
},
{
name: "sublime",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
id: 11
},
{
name: "wordpress",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
id: 12
},
];
Memory.init(cards);
})();
Các bạn để ý đoạn Code bên trên gồm rất nhiều link hình ảnh được sử dụng. Các bạn có thể thay đổi hình ảnh khác của bạn nhưng hãy để kích thước vuông để hiển thị cho đẹp mắt.
Thế Thôi
Bài viết chia sẻ đến các bạn bộ Code Game Lật Hình giống Game Pikachu. Các bạn có thể sử dụng cho các dự án của mình, tạo thêm trò chơi vui trên website của mình hoặc sử dụng cho bất kỳ nhu cầu nào.
Chúc các bạn luôn vui vẻ và thành công.
Bài viết liên quan:
Sao e copy vs gõ theo css mà nó lỗi quá a ơi chỉ e với ạ
Em đừng gõ mà copy toàn bộ sẽ ok nhé.
mk copy css mà nó lỗi quá b ạ
Với hình như đoạn css bên trên là scss chứ ko phải css thuần à b
Đúng rồi bạn nhé. Ngay trên Tab hiển thị là SCSS nha bạn.
mk copy vào thì nó lỗi tùm lum quá b, có cách nào nó ko bị lỗi ko b ? Mk cảm ơn
Bạn lưu ý đoạn Code chèn vào head nữa nhé. Ngoài ra bạn có thể tham khảo trên này. Mình để bộ Code tại đây: https://codepen.io/laivanduc/pen/mJappx
thank u bro
Cám ơn bạn đã xem.