Game JS
sourceos000
javascript
5 months ago
9.5 kB
2
Indexable
// Mengambil elemen dengan class 'pemain1' var pemain1Div = document.querySelector('.pemain1'); // Menyembunyikan elemen dengan mengatur style display menjadi 'none' if (pemain1Div) { pemain1Div.style.display = 'none'; } const mulai = document.querySelector(".mulai"); mulai.addEventListener("click", function () { // bagian pertama : memunculkan kartu tiap tiap pemain ketika halaman pertamakali dimuat // memanggil element html const kartu = document.querySelector(".kartu"); const pemain1 = document.querySelector(".pemain1"); // audio const gaplek = new Audio(); gaplek.src = "assets/audio/gaple.mp3"; const jalan = new Audio(); jalan.src = "assets/audio/jalan.mp3"; const kalah = new Audio(); kalah.src = "assets/audio/kalah.mp3"; const lewat = new Audio(); lewat.src = "assets/audio/lewat.mp3"; const menangis = new Audio(); menangis.src = "assets/audio/menang.mp3"; //variable data kartu const dataKartu = { kartu0: { kiri: 1, kanan: 1, nilai: 25 }, kartu1: { kiri: 1, kanan: 1, nilai: 1 }, kartu2: { kiri: 1, kanan: 1, nilai: 2 }, kartu3: { kiri: 1, kanan: 1, nilai: 3 }, kartu4: { kiri: 1, kanan: 1, nilai: 4 }, kartu5: { kiri: 1, kanan: 1, nilai: 5 }, kartu6: { kiri: 1, kanan: 1, nilai: 6 }, kartu7: { kiri: 1, kanan: 1, nilai: 2 }, kartu8: { kiri: 1, kanan: 1, nilai: 3 }, kartu9: { kiri: 1, kanan: 1, nilai: 4 }, kartu10: { kiri: 1, kanan: 1, nilai: 5 }, kartu11: { kiri: 1, kanan: 1, nilai: 6 }, }; // masukkan kartu ke data kartu for (let i = 0; i < 12; i++) { const kartu = document.createElement("img"); kartu.setAttribute("src", `assets/gambar/kartu/${i}.png`); kartu.setAttribute("id", "kartu" + i); kartu.setAttribute("draggable", "true"); kartu.addEventListener("drag", pilihKartu); dataKartu[`kartu${i}`]["info"] = kartu; } // variable untuk kota kartu dengan kartu yang telah diacak const kotakKartu = Object.keys(dataKartu).sort(() => Math.random() - 0.5); // variable untuk menampung kartu para pemain const kartuPemain1 = {}; //masukan kartu untuk tiap tiap pemain for (let i = 0; i < 12; i++) { if (Object.keys(kartuPemain1).length < 12) { kartuPemain1[kotakKartu[0]] = dataKartu[kotakKartu[0]].info; kartu.appendChild(dataKartu[kotakKartu[0]].info); kotakKartu.splice(0, 1); } } // bagian kedua: menampilkan kartu pilihan pemain ke papan // mengambil id papan const papan = document.getElementById("papan"); const context = papan.getContext("2d"); papan.width = 1092; papan.height = 450; papan.addEventListener("dragover", dragOver); papan.addEventListener("drop", lemparKartu); // variable global untuk menampung kartu pilihan pemain let kartuPilihanPemain; // variable untuk posisi kartu const sumbuX = 77; const sumbuY = 132; const lebar = 80; const tinggi = 120; // function untuk rotasi kartu function rotasiKartu(gambar, sumbuX, sumbuY, lebar, tinggi, rotasi) { let radian = (rotasi * Math.PI) / 180; context.translate(sumbuX + lebar / 2, sumbuY + tinggi / 2); context.rotate(radian); context.drawImage( gambar, (lebar / 2) * -1, (tinggi / 2) * -1, lebar, tinggi ); context.rotate(radian * -1); context.translate((sumbuX + lebar / 2) * -1, (sumbuY + tinggi / 2) * -1); } // function pilih kartu function pilihKartu(e) { kartuPilihanPemain = e.target.id; console.log(kartuPilihanPemain); } // function dragOver function dragOver(e) { e.preventDefault(); console.log(e.offsetX); } // bantuan untuk pengali sumbu x dan y const xKiri = []; const xKanan = []; // untuk nilai kartu di papan const nilaiKiriPapan = document.querySelector(".nilaiKiri"); const nilaiKananPapan = document.querySelector(".nilaiKanan"); const jarakAntarKartu = 25; //function drop, atau jika kartu yang berada di atas papan dilepas function lemparKartu(e) { const gambar = dataKartu[kartuPilihanPemain].info; //cek status giliran pemain, jika satu, berati boleh melempar kartu if (pemain1.children[0].innerHTML === "1") { //turn pertama if (xKiri.length == 0 && xKanan.length == 0) { rotasiKartu( gambar, sumbuX, sumbuY + 150, lebar, tinggi, 0 ); // masukkan nilai kepapan console.log("nilai kiri :" + dataKartu[kartuPilihanPemain].kiri); nilaiKiriPapan.innerHTML = dataKartu[kartuPilihanPemain].kiri; nilaiKananPapan.innerHTML = dataKartu[kartuPilihanPemain].kanan; //masukkan kartu yang dibung ke x kiri dan kanan xKiri.push(gambar); // hilangkan kartu yang dibuang pemain kartuPemain1[kartuPilihanPemain].style.display = "none"; delete kartuPemain1[kartuPilihanPemain]; return; } } // cek posisi offset kartu if (e.offsetX < 1000) { // turn ke dua dan selanjutnya // cek pertama, nilai kartu kiri di papan dengan kartu kiri pemain if (nilaiKiriPapan.innerHTML == dataKartu[kartuPilihanPemain].kiri) { //cek pengali kiri if (xKanan.length < 1) { rotasiKartu( gambar, sumbuX, // Posisi X untuk kartu ke-3 sumbuY + 6, // Posisi Y untuk kartu ke-3 lebar, tinggi, 0 // Rotasi 180 derajat ); } else if (xKanan.length < 7) { const kartuKe = xKanan.length; // Indeks kartu yang sedang diposisikan const posisiX = 286 + (kartuKe - 2) * (tinggi + jarakAntarKartu); // Menghitung posisi X dengan gap 25px const posisiY = sumbuY - 124; // Posisi Y yang sama untuk semua kartu ke-4 hingga ke-7 rotasiKartu( gambar, posisiX, posisiY, lebar, tinggi, 90 // Rotasi normal ); } else if (xKanan.length < 9) { const kartuKe = xKanan.length; // Indeks kartu yang sedang diposisikan // Menghitung posisi X dengan gap 25px const posisiY = sumbuY + (kartuKe - 7) * (tinggi + jarakAntarKartu); rotasiKartu( gambar, 934, // Posisi X untuk kartu ke-3 posisiY + 7, // Posisi Y untuk kartu ke-3 lebar, tinggi, 0 // Rotasi 180 derajat ); } else if (xKanan.length < 12) { const kartuKe = xKanan.length; // Indeks kartu yang sedang diposisikan // Menghitung posisi X dengan gap 25px const posisiX = 807 - (kartuKe - 9) * (tinggi + jarakAntarKartu); rotasiKartu( gambar, posisiX, // Posisi X untuk kartu ke-3 sumbuY + 185, // Posisi Y untuk kartu ke-3 lebar, tinggi, 270 // Rotasi 180 derajat ); } // masukkan nilai ke papan nilaiKiriPapan.innerHTML = dataKartu[kartuPilihanPemain].kanan; //masukkan kartu yang dibung ke x kiri xKiri.push(gambar); xKanan.push(gambar); console.log("kartu: ", Object.keys(kartuPemain1).length); // hilangkan kartu yang dibuang pemain kartuPemain1[kartuPilihanPemain].style.display = "none"; delete kartuPemain1[kartuPilihanPemain]; menang(); return; } // cek kedua, nilai kartu kiri di papan dengan kartu kanan pemain } } // bagian ke-tiga //button html const btnP4 = document.querySelector("#btnP4"); const btnP1 = document.querySelector("#btnP1"); const btnP2 = document.querySelector("#btnP2"); //button untuk lewat pemain1.children[2].addEventListener("click", function () { //cek status pemain if (pemain1.children[0].innerHTML === "1") { for (let i = 0; i < Object.keys(kartuPemain1).length; i++) { kartuPilihanPemain = Object.keys(kartuPemain1)[i]; // cek pertama if (nilaiKiriPapan.innerHTML == dataKartu[kartuPilihanPemain].kiri) { break; } // cek kedua else if ( nilaiKiriPapan.innerHTML == dataKartu[kartuPilihanPemain].kanan ) { break; } // cek ketiga else if ( nilaiKananPapan.innerHTML == dataKartu[kartuPilihanPemain].kiri ) { break; } // cek keempat else if ( nilaiKananPapan.innerHTML == dataKartu[kartuPilihanPemain].kanan ) { break; } // jika tidak ada kartu yang sesuai else if (i + 1 == Object.keys(kartuPemain1).length) { // ubah status pemain menjadi 0 pemain1.children[0].innerHTML = "0"; pemain1.children[0].style.backgroundColor = "red"; pemain1.children[1].innerHTML = "lewat"; lewat.play(); return; } } } }); //kondisi menang const modalMenang = document.getElementById("menang"); function menang() { if (Object.keys(kartuPemain1).length == 0) { modalMenang.style.display = "block"; modalMenang.children[1].innerHTML = "Yay!! Kamu berhasil"; menangis.play(); return; } } // main lagi modalMenang.children[2].addEventListener("click", function () { window.location.reload(); }); mulai.style.display = "none"; });
Editor is loading...
Leave a Comment