pengenalan

Helo, rakan pemaju! Saya teruja untuk memperkenalkan projek terbaharu saya:Rock Paper Scissors Game. Permainan klasik ini ialah cara yang menyeronokkan untuk melatih kemahiran JavaScript anda dan mencipta pengalaman pengguna interaktif. Sama ada anda baru dalam pengekodan atau ingin menambah permainan yang ringkas namun menarik pada portfolio anda, projek ini menawarkan peluang yang baik untuk meningkatkan kebolehan pembangunan bahagian hadapan anda.

Gambaran Keseluruhan Projek

TheRock Paper Scissors Gameialah aplikasi berasaskan web di mana pengguna boleh bermain permainan popular melawan komputer. Projek ini menunjukkan cara mengurus input pengguna, menjana pergerakan komputer rawak, dan menentukan hasil permainan. Ia merupakan latihan yang sangat baik dalam bekerja dengan logik bersyarat dan manipulasi DOM.

Ciri-ciri

• Permainan Interaktif: Pengguna boleh memilih Batu, Kertas atau Gunting dan melihat hasilnya serta-merta.
• Penjejakan Skor: Permainan menjejaki markah pemain dan komputer.
• Reka Bentuk Responsif: Memastikan pengalaman yang konsisten dan menyeronokkan merentas peranti yang berbeza.

Teknologi yang Digunakan

• HTML: Menstruktur halaman web dan elemen permainan.
• CSS: Menggayakan antara muka permainan untuk reka bentuk yang bersih dan responsif.
• JavaScript: Mengurus logik permainan, termasuk interaksi pengguna dan penjejakan skor.

Struktur Projek

Berikut adalah pandangan ringkas pada struktur projek:

Rock-Paper-Scissors/ ├── index.html ├── style.css └── script.js

• index.html: Mengandungi struktur HTML untuk permainan Rock Paper Scissors.
• style.css: Termasuk gaya CSS untuk meningkatkan penampilan dan responsif permainan.
• script.js: Mengurus logik permainan, termasuk interaksi pengguna dan penjejakan skor.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

   git clone https://github.com/abhishekgurjar-in/Rock-Paper-Scissors.git

   Salin selepas log masuk

2. Buka direktori projek:
   

   cd Rock-Paper-Scissors

   Salin selepas log masuk

3. Jalankan projek:

   • Buka fail index.html dalam pelayar web untuk mula bermain permainan Rock Paper Scissors.

Penggunaan

1. Buka laman webdalam pelayar web.
2. Pilih langkah andadengan mengklik pada butang Batu, Kertas atau Gunting.
3. Lihat keputusanpermainan dan lihat kemas kini markah secara automatik.

Penerangan Kod

HTML

Fail index.html menyediakan struktur permainan, termasuk butang untuk Batu, Kertas dan Gunting serta elemen yang memaparkan hasil dan markah. Berikut adalah coretan:

        
  
 
Rock Paper Scissors Game
 
Choose your move:
 
 👊 🖐 ✌ 
 
 
 Your score: 0 Computer score: 0 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

CSS

Fail style.css menggayakan permainan Rock Paper Scissors, memberikan reka letak yang moden dan mesra pengguna. Berikut adalah beberapa gaya utama:

body { background-color: #f1f1f1; font-family: "Arial", sans-serif; margin: 0; padding: 0; } h1 { font-size: 2rem; text-align: center; margin: 100px; } p { font-size: 1.5rem; font-weight: 600; text-align: center; margin-bottom: 0.5rem; } .buttons { display: flex; justify-content: center; } button { border: none; font-size: 3rem; margin: 0 0.5rem; padding: 0.5rem; cursor: pointer; border-radius: 5px; transition: all 0.3s ease-in-out; } button:hover { opacity: 0.7; } #rock { background-color: #ff0000; } #paper { background-color: #2196f3; } #scissors { background-color: #4caf50; } #user-score { color: #2196f3; } #computer-score { color: #ff0000; } .footer { margin-top: 250px; text-align: center; } .footer p { font-size: 16px; font-weight: 400; }

JavaScript

Fail script.js menguruskan logik untuk permainan Rock Paper Scissors, termasuk mengendalikan input pengguna, menjana pergerakan komputer dan menentukan pemenang. Berikut adalah coretan:

const buttons = document.querySelectorAll("button"); const resultEl = document.getElementById("result"); const playerScoreEl = document.getElementById("user-score"); const computerScoreEl = document.getElementById("computer-score"); let playerScore = 0; let computerScore = 0; buttons.forEach((button) => { button.addEventListener("click", () => { const result = playRound(button.id, computerPlay()); resultEl.textContent = result; }); }); function computerPlay() { const choices = ["rock", "paper", "scissors"]; const randomChoice = Math.floor(Math.random() * choices.length); return choices[randomChoice]; } function playRound(playerSelection, computerSelection) { if (playerSelection === computerSelection) { return "It's a tie!"; } else if ( (playerSelection === "rock" && computerSelection === "scissors") || (playerSelection === "paper" && computerSelection === "rock") || (playerSelection === "scissors" && computerSelection === "paper") ) { playerScore++; playerScoreEl.textContent = playerScore; return "You win! " + playerSelection + " beats " + computerSelection; } else { computerScore++; computerScoreEl.textContent = computerScore; return "You lose! " + computerSelection + " beats " + playerSelection; } }

Demo Langsung

Anda boleh melihat demo langsung permainan Rock Paper Scissors di sini.

Kesimpulan

Membina permainan Rock Paper Scissors ialah pengalaman yang menyeronokkan dan mendidik yang membantu saya mengamalkan manipulasi JavaScript dan DOM. Saya harap projek ini memberi inspirasi kepada anda untuk meneroka lebih banyak projek JavaScript dan terus membina kemahiran pengekodan anda. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan saya untuk meningkatkan kemahiran pembangunan bahagian hadapan saya, memfokuskan pada mencipta aplikasi web yang interaktif dan dinamik.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Permainan Gunting Kertas Batu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!