วิธีโค้ดลูกเต๋าเสมือนแบบสุ่มอย่างง่าย: 6 ขั้นตอน

2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-23 15:12

สวัสดีทุกคน!!!!! นี่เป็นคำสั่งแรกของฉันและฉันจะสอนวิธีเขียนโค้ดลูกเต๋าเสมือนจริงบนพีซีหรือสมาร์ทโฟนของคุณ ฉันใช้ HTML, JavaScript และ CSS ฉันหวังว่าคุณจะชอบมัน และอย่าลืมโหวตให้ฉันในบริบทด้านล่าง

เสบียง

1. โปรแกรมแก้ไขข้อความที่ดีบนสมาร์ทโฟนหรือพีซีของคุณ

ขั้นตอนที่ 1: รับโปรแกรมแก้ไขข้อความของคุณ

ที่นี่ฉันใช้สมาร์ทโฟนเป็นโปรแกรมแก้ไขข้อความที่นี่ (AnWriter) คุณสามารถใช้แผ่นจดบันทึกของพีซีได้เช่นกัน หรือซื้อโปรแกรมแก้ไขข้อความออนไลน์ที่ดี

ขั้นตอนที่ 2: ดาวน์โหลด Die Faces

ฉันดาวน์โหลดใบหน้าตายบางส่วนจาก 1 ถึง 6 ซึ่งฉันแนบมากับขั้นตอนนี้ ดังนั้นคุณสามารถดาวน์โหลดอันที่คุณต้องการหรือใช้ของฉันได้ (คุณว่าง)

ฉันตั้งชื่อของฉันตามใบหน้าที่ตาย นั่นคือ:

Die_face_1.png, Die_face_2-p.webp

ขั้นตอนที่ 3: เริ่มการเข้ารหัส

บันทึกโค้ดเป็นไฟล์.html

เริ่มต้นด้วยการแนะนำหน้าตายเริ่มต้นที่คุณต้องการโดยใช้ img src

ขั้นตอนที่ 4:

ต่อไปเราจะต้องใช้ปุ่มในการทอยลูกเต๋า โดยเพิ่มฟังก์ชั่นปุ่ม

ทอยลูกเต๋า

ขั้นตอนที่ 5: ใช้ฟังก์ชัน Var และคณิตศาสตร์

เขย่าลูกเต๋า

ฟังก์ชัน getRand(){

var vu=Math.floor(Math.random()*6)+1;

var vu2=Math.floor(Math.random()*6+1;

var di =["die_face_1.png", "die_face_2.png", "die_face_3.png", "die_face_4.png", "die_face_5.png", "die_face_6.png"];

document.getElementById("dice").src= di[vu-1];

document.getElementById("dicl").src= di[vu2-1];

}

นี่คือรหัสฉบับเต็ม ศึกษาและทดสอบและตรวจดูให้แน่ใจว่าคุณได้รูปภาพเพื่อรับเอฟเฟกต์

และถ้าคุณต้องการความช่วยเหลือของฉันเกี่ยวกับรหัสนี้ให้พูดถึงในส่วนความคิดเห็น

คุณสามารถเปลี่ยนการออกแบบได้ถ้าคุณไม่ชอบมัน แต่ฉันชอบมันเพื่อจุดประสงค์ฉันต้องการใช้มันเพื่อ

ขั้นตอนที่ 6: เรียกใช้

รันโค้ดบนเบราว์เซอร์ของคุณเพื่อให้มันทำงาน