ความคิดเห็น: Tetris มี 7 ส่วนและแต่ละส่วนมีจำนวนและตำแหน่งที่แตกต่างกันของสี่เหลี่ยมดังนั้นสร้างคลาสส่วนประกอบจากนั้นสร้างอาร์เรย์เพื่อจัดเก็บ 7 ส่วน แต่ละส่วนมีอาร์เรย์เพื่อเก็บหมายเลขและตำแหน่งของสี่เหลี่ยมผืนผ้าที่ครอบครองโดยส่วนประกอบ ต่อไปนี้คือการแนะนำรายละเอียด
หลักการพื้นฐานของการใช้งานเกมนี้:พื้นที่เกมเป็นพื้นที่ขนาด จำกัด พื้นที่เกมของเกมนี้มีสี่เหลี่ยม 21 × 25 ความกว้างสี่เหลี่ยมแต่ละอันคือ 10 หน่วยและความสูงคือ 6 หน่วย (หน่วยสัมบูรณ์ของผ้าใบได้รับการแก้ไขไม่ใช่พิกเซล)
สร้างคลาส Rusblock เพื่อมีข้อมูลและพฤติกรรมที่สอดคล้องกันและสร้างอาร์เรย์สองมิติ Astate [21] [25] เพื่อบันทึกสี่เหลี่ยมที่ทำเครื่องหมายไว้ในพื้นที่เกม
Tetris มี 7 ส่วนและแต่ละส่วนมีจำนวนและตำแหน่งที่แตกต่างกันของสี่เหลี่ยมดังนั้นสร้างคลาสส่วนประกอบจากนั้นสร้างอาร์เรย์เพื่อเก็บ 7 ส่วน แต่ละส่วนมีอาร์เรย์เพื่อเก็บหมายเลขและตำแหน่งของสี่เหลี่ยมผืนผ้าที่ครอบครองโดยส่วนประกอบ เมื่อส่วนที่ตกลงมาสิ้นสุดลงจะมีการสร้างส่วนใหม่และสี่เหลี่ยมที่ทำเครื่องหมายไว้ของชิ้นส่วนจะถูกกำหนดให้กับอาร์เรย์ของพื้นที่เกม
ในฟังก์ชั่นการวนรอบเกมชิ้นส่วนที่ตกลงมาจะถูกพิมพ์ชิ้นส่วนที่แก้ไขแล้วและชิ้นส่วนที่ตกลงมาจะถูกพิมพ์
ความรู้พื้นฐาน:
HTML5 CSS JS
เกมนี้มีสามไฟล์:
rusblock.html: การตั้งค่าองค์ประกอบ
rusblock.css: Set Style
rusblock.js: การควบคุมสคริปต์
ขั้นตอนที่ 1: การตั้งค่าส่วนต่อประสานและการเตรียมวัสดุ
rusblock.html
<! doctype html>
<html>
<head>
<title> rusblock </title>
<link rel = stylesheet type = text/css href = rusblock.css>
<script type = text/javascript>
ฟังก์ชั่น ShareGame () {
var url =? link = + document.url + & title = rusblock;
window.showmodaldialog ([url]);
-
</script>
</head>
<body onkeyup = action (เหตุการณ์)>
<Audio Loop = Loop ID = Background-Audioplayer preload = auto>
<ต้นทาง src = เสียง/พื้นหลัง. mp3″ type = audio/mp3″/>
</เสียง>
<Audio ID = GameOver-Audioplayer PRELOAD = Auto> Auto>
<Source Src = Audio/Gameover.ogg type = Audio/Ogg>
</เสียง>
<AUDIO ID = คะแนน PRELOAD PRELOAD = AUTO> AUTO>
<ต้นทาง src = audio/score.mp3″ type = audio/mp3″/>
</เสียง>
<div id = พื้นที่เกม>
<div id = button-area>
<h1 id = game-name> rusblock </h1>
<ปุ่ม ID = ปุ่ม-เกมเริ่มต้น onclick = gameStart ()> เริ่ม </button>
<ปุ่ม ID = ปุ่มเกม onClick = gameEnd ()> สิ้นสุด </button>
<form id = form-game-level>
<select id = select-game-level>
<ตัวเลือกค่า = 500″ เลือก = เลือก> ง่าย </potion>
<ตัวเลือกค่า = 300″> ปกติ </potion>
<ตัวเลือกค่า = 200″> Hard </petion>
</เลือก>
</form>
<ปุ่ม onclick = shareGame () id = button-game-share> แชร์ไปที่ renren </button>
</div>
<canvas id = game-canvas> </anvas>
<div id = score-area>
<H2> คะแนน </h2>
<p id = คะแนนเกม> 0 </p>
</div>
</div>
<script type = text/javascript src = rusblock.js> </script>
</body>
</html>
ขั้นตอนที่ 2: สไตล์
rosblock.css
ร่างกาย {
พื้นหลังสี: สีเทา;
TEXT-ALIGN: CENTER;
Font-Family: 'Times New Roman';
ภาพพื้นหลัง: URL ();
-
h1#game-name {
พื้นหลังสี: สีขาว;
ความกว้าง: 100%;
ขนาดตัวอักษร: X-Large;
-
H2,#เกมคะแนน {
ขนาดตัวอักษร: X-Large;
พื้นหลังสี: สีขาว;
-
#พื้นที่เกม {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 10%;
ความกว้าง: 80%;
ความสูง: 99%;
-
Canvas#game-canvas {
พื้นหลังสี: สีขาว;
ความกว้าง: 80%;
ความสูง: 98%;
ลอย: ซ้าย;
-
#button-area,#score-area {
ความกว้าง: 10%;
ความสูง: 100%;
ลอย: ซ้าย;
-
#button-game-start,#button-game-end,#button-game-share,#select-game-level {
ความกว้าง: 100%;
ความสูง: 10%;
ขนาดตัวอักษร: ใหญ่ขึ้น;
ความกว้างของชายแดนขวา: 3px;
พื้นหลังสี: สีขาว;
-
#select-game-level {
ความกว้าง: 100%;
ความสูง: 100%;
ขนาดตัวอักษร: X-Large;
สีชายแดน: สีเทา;
-
ขั้นตอนที่ 3: เขียนรหัส JS
rusblock.js
การแยกวิเคราะห์สมาชิกรวมอยู่ในคลาส Rusblock:
ข้อมูล:
ncurrentcomid: ID ของส่วนประกอบดร็อปปัจจุบัน
Astate [21] [25]: อาร์เรย์ที่เก็บสถานะพื้นที่เกม
CurrentCom: ส่วนที่ตกลงมาในปัจจุบัน
NextCom: ส่วนถัดไป
PTINDEX: ดัชนีของส่วนที่ตกลงมาในปัจจุบันเมื่อเทียบกับพื้นที่เกม
การทำงาน:
newnextcom (): สร้างส่วนประกอบถัดไปใหม่
nextcomtocurrentcom (): ถ่ายโอนข้อมูลจากส่วนประกอบถัดไปไปยังส่วนประกอบที่ตกในปัจจุบัน
Candown (): พิจารณาว่าส่วนประกอบปัจจุบันยังคงตกอยู่หรือไม่
Cannew (): พิจารณาว่าสามารถสร้างส่วนประกอบใหม่ได้หรือไม่
ซ้าย (): ส่วนประกอบปัจจุบันเคลื่อนไปทางซ้าย
ขวา (): ส่วนประกอบปัจจุบันเคลื่อนไปทางขวา
หมุน (): ส่วนประกอบปัจจุบันหมุนตามเข็มนาฬิกา
AccelerAtet (): ส่วนประกอบปัจจุบันเร่งความเร็วลง
หายไป (): กำจัดเส้น
checkfail (): พิจารณาว่าเกมล้มเหลวหรือไม่
Invalidaterect (): รีเฟรชพื้นที่ของส่วนประกอบปัจจุบัน
เสร็จสมบูรณ์: ดาวน์โหลดตัวอย่าง