1 dk, tahmini okuma süresi
HTML CSS ve Javascript ile 15 Dakikada Oluşturabileceğiniz Bir Oyun
En Son Güncelleme: 10 Nisan, 2022Muhtemelen zaten bildiğiniz araçlarla sadece 15 dakikada bir oyun oluşturun. Oyunu başlatmak ve çalıştırmak için gereken tüm kodlar gönderide, ancak daha iyi olabilecek bir çok yönü var. Nasıl çalıştığını anladıktan sonra kendinize meydan okuyarak oyunu geliştirebilirsiniz.
§Proje Tanımı
Basitçe tanımlamak gerekirse, eşleşen resimleri bularak oyunu kazanmaya çalışıyoruz. Endişelenmeyin, web geliştirmeye yeni başlayan biriyseniz, kod sizin de anlayabileceğiniz kadar kolay. HTML ve CSS gayet temel ve basit. Javascript olan bölümlerde de kod bloklarına nasıl çalıştıklarını ve işe yarakdıkları yazan notlar ekledim.
Oyunu kazanmak, kazanınca ne olacağı, score tutma ve oyunu tekrar başlatma ile ilgili mantık oyunda mevcut değil. Bunlardan bazıları isterseniz kendi oyununuzda ekleyebelirsiniz. Hadi başlayalım.
§Temel HTML Kurulumu
Dediğim gibi HTML kısmı gayet basit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
<title>Memory Game</title>
</head>
<body>
<h1>Eşleşen Resimleri Bul</h1>
<div class="board-container">
{# Oyunu buraya ekleyeceğiz #}
</div>
</body>
</html>
Kullanacağımız CSS'in tamamı:
/* /style.css */
body {
background-color: azure;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.board-container {
background-color: rgb(65, 78, 78);
width: 600px;
height: 600px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-gap:10px;
padding: 20px;
border-radius: 20px;
}
.board-container > * {
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
§Ve Her Şeyi Gerçekleştirmek İçin Javascript
Öncelikle kullanacağınız resimleri toparlayın. Görsel aramakla uğraşmak istemiyorsanız burada benim internetten bulduğum ücretsiz görselleri kullanabilirsiniz.
// /main.js
// Görsellerin olduğu array'i rastgele dağıtma için:
const shuffle = (objects) => {
for (let i = objects.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = objects[i];
objects[i] = objects[j];
objects[j] = temp;
}
}
window.onload = async () => {
// board container ı seçin
let boardContainer = await document.querySelector('.board-container');
// array'e görselleri tekrar ekleyip rastgele dağıtıyoruz
const doubleAndRender = async (objects, objectsLength) => {
for (let i = 0; i < objectsLength; i++){
objects.push({"id":19+i, "src": `${i+1}.png`})
}
// array'i birkaç kez karıştırıyorum
// gerçi 3 kez yapmak pek de gerekli değil :)
await shuffle(objects);
await shuffle(objects);
await shuffle(objects);
for(let i = 0; i < objects.length; i++){
let div = document.createElement("div");
div.style.background = "red";
// png numarasını daha sonra kullanılacak bir class olarak verin
div.classList.add("grid-item", `${objects[i]["id"]}.png`)
// id png numarasını alacak ".png" eki olmadan
div.setAttribute("id", `${objects[i]["id"]}`)
boardContainer.appendChild(div)
};
};
await shuffle(objects);
await doubleAndRender(objects, 18);
}
Ve bütün olayın gerçekleştiği yer burası. Mantığı aşağıdaki yorumlarda bulunabilirsiniz.
// eşleştirilecek kaç görüntünün açık olduğunu takip edin
let num = 0;
// tıklanan ilk resim
var target1;
// tıklanan ikinci resim
var target2;
window.addEventListener('click', (e) => {
// Burada kolayca kullanılabilecek şekilde png'lerimi numaralandırdım (1.png, 2.png, vb.)
// ve pngNum ile png'leri takip ediyorum
let pngNum;
// 3 farklı durumu kontrol ediliyorum:
// "grid-item" mı
// "active" değil mi
// birden fazla class'ı var mı
if(e.target.classList.contains("grid-item") && e.target.classList[1] && !e.target.classList.contains("active")){
// daha sonra eşleştirmek için png numarasını alıyorum
if(e.target.classList[1].split(".")[0] <= 18){
pngNum = e.target.classList[1].split(".")[0];
} else {
pngNum = e.target.classList[1].split(".")[0] - 18;
}
// aktif açık görsel yoksa
if(num === 0){
target1 = e.target;
// tıklanan grid öğesi
let image = document.createElement("img");
image.src = `pngs/${pngNum}.png`
image.style.maxWidth= '64px';
target1.appendChild(image)
// Eşleştirilecek active görüntülerin sayısını artırın
num += 1;
// active, eşleştirme bekleyen görsel varsa
} else if(num == 1){
if(target1 !== e.target){
target2 = e.target;
let image = document.createElement("img");
image.src = `pngs/${pngNum}.png`
image.style.maxWidth= '64px';
target2.appendChild(image)
num += 1;
}
// iki görüntü açıldığında/active iken
} else if(num == 2){
// Her iki id de mevcut png sayısında büyükse
if(parseInt(target1.id) > 18 && (parseInt(target2.id) > 18)) {
num = 0;
target1.removeChild(target1.childNodes[0]);
target2.removeChild(target2.childNodes[0]);
}
// Her iki id de mevcut png sayısında küçükse
else if (parseInt(target1.id) <= 18 && (parseInt(target2.id) <= 18)){
console.log("both low, not a match");
num = 0;
target1.removeChild(target1.childNodes[0]);
target2.removeChild(target2.childNodes[0]);
}
// Şimdi id'ler doğru aralıkta, eşleşme arıyorum
else {
if(parseInt(target1.id) > 18) {
// Eşleşmeyi hallet
if(parseInt(target1.id) - 18 == parseInt(target2.id)){
// "active" ekliyorum ki diğerleriyle karışmasınlar
target1.classList.add("active")
target2.classList.add("active")
// Görsel olarak bir fark olsun diye renk değiştiriyorum
target1.style.background = "white";
target2.style.background = "white";
// the number of open images to be mathced should be 0
num = 0;
}else {
// Eşleşme yok
target1.removeChild(target1.childNodes[0]);
target2.removeChild(target2.childNodes[0]);
num = 0
}
}else if(parseInt(target2.id) > 18) {
if(parseInt(target2.id) - 18 == parseInt(target1.id)){
target1.classList.add("active")
target2.classList.add("active")
target1.style.background = "white";
target2.style.background = "white";
num = 0;
} else {
target1.removeChild(target1.childNodes[0]);
target2.removeChild(target2.childNodes[0]);
num = 0;
}
}
}
}
}
})
§Sonraki Adımlar ve Olası İyileştirmeler
Bu proje bitmeye yakın bile değil. Daha iyi hale getirmek için kendinizin yapabileceğiniz iyileştirme için yer var. Belki bir kart çevirme animasyonu ekleyebilirsiniz, görüntüleri kartlara dönüştürmek için daha iyi bir mantık uygulayabilirsiniz, insanların kendi görselleriyle kendi oyunlarını yaratabilmelerini sağlayabilirsiniz... Bu oyuna eklenebilecek o kadar çok şey var ki.
Gördüğünüz gibi bu oyunu yaratmak hiç de zor olmadı. Temel HTML, CSS ve javascript ile oluşturabileceğiniz çok şey var. Bu, yalnızca temel web geliştirme bilginizi kullanarak ne tür şeyler yaratabileceğinize hızlı bir örnekti.
Ilker Akbiyikİçindekiler
Benzer Paylaşımlar
