Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >JavaScript melaksanakan pukul 24
JavaScript melaksanakan pukul 24
- 王林asal
- 2023-05-09 10:32:07860semak imbas
Blackjack ialah permainan kad yang menyeronokkan yang direka untuk mengira 4 kad kepada nombor 24. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan permainan 24 mata dalam JavaScript.
Langkah 1: Sediakan antara muka permainan
Mula-mula, kita perlu menyediakan antara muka permainan. Berikut ialah kod HTML dan CSS yang diperlukan:
<!DOCTYPE html>
<html>
<head>
<title>24点游戏</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
margin-bottom: 30px;
}
#card {
font-size: 100px;
margin: 50px 0;
}
button {
padding: 10px 20px;
font-size: 20px;
margin-left: 10px;
}
</style>
</head>
<body>
<h1>欢迎来玩24点游戏</h1>
<div id="card"></div>
<button onclick="generateCards()">发牌</button>
<button onclick="check24()">验证</button>
<script src="game.js"></script>
</body>
</html>Dalam kod ini, kami mentakrifkan tajuk halaman, gaya dan elemen antara muka permainan. Dalam blok kad kami akan memaparkan 4 kad permainan rawak dalam bentuk teks.
Langkah 2: Hasilkan kad rawak
Sekarang, kita perlu menulis fungsi untuk menjana 4 kad permainan rawak. Untuk mencapai matlamat ini, kita perlu membuat tatasusunan yang mengandungi semua kad permainan dan pilih 4 daripadanya. Berikut ialah kod JavaScript yang diperlukan:
const suits = ["spades", "hearts", "diamonds", "clubs"];
const values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
function generateCards() {
let cards = "";
for (let i = 0; i < 4; i++) {
let suit = suits[Math.floor(Math.random() * suits.length)];
let value = values[Math.floor(Math.random() * values.length)];
cards += `<span class="${suit}">${value}</span>`;
}
document.getElementById("card").innerHTML = cards;
}Dalam kod di atas, kami telah mencipta dua tatasusunan, satu mengandungi semua sut dan satu lagi mengandungi semua denominasi. Kami kemudian menggunakan fungsi Math.random() dan panjang tatasusunan untuk memilih sut dan denominasi rawak. Akhir sekali, kami mencipta kad menggunakan nilai ini dalam rentetan HTML. Fungsi ini melaksanakan 4 gelung di atas untuk menghasilkan 4 kad rawak.
Langkah 3: Sahkan pematuhan
Sekarang, kita perlu menulis fungsi untuk menyemak sama ada 24 boleh dikira menggunakan 4 kad. Fungsi ini memerlukan kami menggunakan rekursi untuk mensimulasikan peraturan permainan 24 mata. Berikut ialah kod JavaScript yang diperlukan:
function check24(nums) {
if (!nums) {
nums = Array.from(document.querySelectorAll("#card span")).map(span => span.innerHTML);
}
if (nums.length === 1) {
return nums[0] === "24";
}
for (let i = 0; i < nums.length; i++) {
for (let j = i + 1; j < nums.length; j++) {
let a = nums[i], b = nums[j], c = "";
for (let k = 0; k < nums.length; k++) {
if (k !== i && k !== j) {
c += nums[k] + ",";
}
}
for (let k = 0; k < 4; k++) {
let newNums = c.split(",");
newNums.splice(k, 0, eval(`${a}${operators[k]}${b}`));
if (check24(newNums)) {
return true;
}
}
}
}
return false;
}Fungsi ini mengambil tatasusunan nombor sebagai parameter. Jika tiada tatasusunan disediakan, fungsi akan mendapat tatasusunan rawak daripada blok kad. Jika panjang tatasusunan ialah 1, fungsi mengembalikan benar jika nilainya sama dengan 24, jika tidak ia mengembalikan palsu.
Jika tidak, fungsi akan menggelungkan pada dua nombor dan mensimulasikan setiap operasi dan memanggil dirinya secara rekursif sehingga penyelesaian ditemui atau tiada penyelesaian yang boleh dilaksanakan. Mengembalikan benar jika penyelesaian ditemui, palsu sebaliknya.
Langkah 4: Operator Pemprosesan
Kini, kita perlu mencipta tatasusunan pengendali dan menggabungkannya dengan nombor. Berikut ialah kod JavaScript yang diperlukan:
const operators = ["+", "-", "*", "/"];
const operatorFunctions = [
(a, b) => a + b,
(a, b) => a - b,
(a, b) => a * b,
(a, b) => a / b,
];
function check24(nums) {
// ...
for (let k = 0; k < 4; k++) {
let newNums = c.split(",");
newNums.splice(k, 0, operatorFunctions[k](parseFloat(a), parseFloat(b)).toString());
if (check24(newNums)) {
return true;
}
}
// ...
}Dalam kod di atas, kami mencipta tatasusunan pengendali dan tatasusunan fungsi operator yang sepadan. Kami kemudian menggunakan fungsi parseFloat() untuk menukar nombor rentetan kepada nombor dan mengira hasilnya menggunakan fungsi operator yang sepadan. Akhir sekali, kami menambahkan hasilnya sebagai rentetan pada tatasusunan baharu dan memanggil dirinya secara rekursif untuk mencuba penyelesaiannya.
Langkah 5: Bentangkan keputusan kepada pemain
Akhir sekali, kami perlu membentangkan keputusan kepada pemain. Berikut ialah kod JavaScript yang diperlukan:
function check24() {
// ...
if (check24(nums)) {
alert("恭喜你，成功啦！");
} else {
alert("很抱歉，再试一次吧...");
}
}Dalam kod di atas, jika penyelesaian berfungsi ditemui, kotak mesej "Tahniah, ia berjaya!", jika tidak, mesej "Maaf, cuba lagi". kotak akan dipaparkan Mari..." kotak mesej.
Ringkasan
Kini, kami telah menyediakan penyelesaian lengkap untuk JavaScript melaksanakan permainan 24 mata. Dengan menggunakan teknik di atas, anda boleh mencipta permainan yang mudah dan menyeronokkan yang membolehkan pengguna menguji kemahiran matematik mereka. Selain itu, anda boleh menggunakan teknik sedemikian untuk mencipta permainan menarik lain, seperti pengembaraan teks dan permainan teka-teki.
Atas ialah kandungan terperinci JavaScript melaksanakan pukul 24. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!