JavaScript Snake เวอร์ชันเต็มมีคำอธิบายประกอบครบถ้วนและเป็นเชิงวัตถุ
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<title>งู v2.4</title>
<สไตล์>
ร่างกาย{
ขนาดตัวอักษร:9pt;
-
โต๊ะ{
ชายแดนยุบ: ยุบ;
เส้นขอบ:ทึบ #333 1px;
-
ทีดี{
ความสูง: 10px;
ความกว้าง: 10px;
ขนาดตัวอักษร: 0px;
-
.เต็มแล้ว{
สีพื้นหลัง:สีฟ้า;
-
</สไตล์>
</หัว>
<สคริปต์>
ฟังก์ชั่น $(id){return document.getElementById(id);}
/************************************************* ***** *************
* จาวาสคริปต์งู v2.4 <br />
* v2.4 แก้ไขสีลำตัวของงูให้เคลื่อนที่ในขณะที่งูเคลื่อนที่ไปข้างหน้า
************************************************** * ************/
//งูตะกละ
งู = {
tbl: โมฆะ,
-
* body: ตัวงู แต่ละส่วนของงูจะถูกวางไว้ในอาเรย์
* โครงสร้างข้อมูล {x:x0, y:y0, สี:color0},
* x, y แทนพิกัด สีแทนสี
-
ร่างกาย: [],
//ทิศทางการเคลื่อนที่ปัจจุบัน ค่า 0, 1, 2, 3 ตามลำดับ แทนขึ้น ขวา ลง ซ้าย กดปุ่มทิศทางของแป้นพิมพ์เพื่อเปลี่ยน
ทิศทาง: 0,
// จับเวลา
ตัวจับเวลา: null,
//ความเร็ว
ความเร็ว: 250,
//ไม่ว่าจะถูกหยุดชั่วคราวหรือไม่
หยุดชั่วคราว: จริง,
//จำนวนแถว
จำนวนแถว: 30,
//จำนวนคอลัมน์
จำนวนคอลัมน์: 30,
//การเริ่มต้น
เริ่มต้น: ฟังก์ชั่น () {
var สี = ['สีแดง','สีส้ม','สีเหลือง','สีเขียว','สีฟ้า','สีม่วง','#ccc'];
this.tbl = $("หลัก");
วาร์ x = 0;
var y = 0;
var colorIndex = 0;
//สร้างทิศทางการเคลื่อนที่เริ่มต้น
this.direction = Math.floor(Math.random()*4);
//สร้างโต๊ะ
สำหรับ(var row=0;row<this.rowCount;row++){
var tr=this.tbl.insertRow(-1);
สำหรับ (var col=0;col<this.colCount;col++) {
var td=tr.insertCell(-1);
-
-
// สร้างโหนดหลวม 20 อัน
สำหรับ(var i=0; i<10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
ถ้า(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.พื้นหลังสี = สี [colorIndex];
-
-
//สร้างหัวงู
ในขณะที่ (จริง) {
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
ถ้า(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.พื้นหลังสี = "สีดำ";
this.body.push({x:x,y:y,สี:'black'});
หยุดพัก;
-
-
this.paused = จริง;
//เพิ่มกิจกรรมคีย์บอร์ด
document.onkeydown= ฟังก์ชั่น (e) {
ถ้า (!e)e=window.event;
สวิตช์ (e.keyCode | e.ซึ่ง | e.charCode){
กรณีที่ 13: {
ถ้า (Snake.paused){
งู.ย้าย();
Snake.paused = เท็จ;
-
อื่น{
//ถ้าไม่หยุดให้หยุดเคลื่อนไหว
งู.หยุดชั่วคราว();
Snake.paused = จริง;
-
หยุดพัก;
-
กรณีที่ 37:{//ซ้าย
//หยุดงูไม่ให้เดินถอยหลัง
ถ้า(Snake.direction==1){
หยุดพัก;
-
ทิศทางงู = 3;
หยุดพัก;
-
กรณีที่ 38:{//ขึ้น
//ปุ่มลัดใช้งานได้ที่นี่
ถ้า (event.ctrlKey){
งู.speedUp(-20);
หยุดพัก;
-
if(Snake.direction==2){//ป้องกันไม่ให้งูเดินถอยหลัง
หยุดพัก;
-
งูทิศทาง = 0;
หยุดพัก;
-
กรณีที่ 39:{//ขวา
if(Snake.direction==3){//ป้องกันไม่ให้งูเดินถอยหลัง
หยุดพัก;
-
ทิศทางงู = 1;
หยุดพัก;
-
กรณีที่ 40:{//ลง
ถ้า (event.ctrlKey){
งู.speedUp(20);
หยุดพัก;
-
if(Snake.direction==0){//ป้องกันไม่ให้งูเดินถอยหลัง
หยุดพัก;
-
ทิศทางงู = 2;
หยุดพัก;
-
-
-
-
//เคลื่อนไหว
ย้าย: ฟังก์ชั่น () {
this.timer = setInterval (ฟังก์ชัน () {
งูลบ();
งู.moveOneStep();
งู.สี();
}, this.speed);
-
//ขยับส่วนหนึ่งส่วนของร่างกาย
moveOneStep: ฟังก์ชั่น () {
ถ้า(this.checkNextStep()==-1){
clearInterval(this.timer);
alert("เกมจบ!/nกดรีสตาร์ทเพื่อดำเนินการต่อ");
กลับ;
-
ถ้า(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,สี:_color});
//เพราะอาหารหนึ่งถูกกิน อาหารอีกจานจึงถูกสร้างขึ้น
นี้.สร้างDood();
กลับ;
-
//window.status = this.toString();
จุด var = this.getNextPos();
//เก็บสีของส่วนแรกไว้
var color = this.body[0].color;
//สีเคลื่อนไปข้างหน้า
สำหรับ(var i=0; i<this.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
-
//ลบส่วนหนึ่งออกจากหางของงู และเพิ่มอีกหนึ่งส่วนหนึ่งที่หางของงูเพื่อแสดงผลของการที่งูก้าวไปข้างหน้า
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
-
//สำรวจว่าจะไปที่ไหนต่อไป
หยุดชั่วคราว: ฟังก์ชั่น () {
clearInterval(งูจับเวลา);
นี้.สี();
-
getNextPos: ฟังก์ชั่น () {
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//ขึ้น
ถ้า(this.direction==0){
คะ--;
-
//ไปทางขวา
อย่างอื่นถ้า (this.direction==1){
เอ็กซ์++;
-
//ลง
อื่นถ้า (this.direction==2){
ย++;
-
//ซ้าย
อื่น{
เอ็กซ์--;
-
//ส่งคืนพิกัด
กลับ {x:x,y:y};
-
//ตรวจสอบว่าขั้นตอนต่อไปที่จะย้ายไปคืออะไร
checkNextStep: ฟังก์ชั่น () {
จุด var = this.getNextPos();
วาร์ x = จุด.x;
var y = point.y;
ถ้า(x<0||x>=this.colCount||y<0||y>=this.rowCount){
return -1;//เมื่อแตะขอบเขตเกมจะจบลง
-
สำหรับ (var i=0; i<this.body.length; i++){
ถ้า(this.body[i].x==x&&this.body[i].y==y){
return -1;//เมื่อมันสัมผัสร่างกายของคุณเองเกมจะจบลง
-
-
ถ้า(this.isCellFilled(x,y)){
กลับ 1;//มีบางอย่าง
-
กลับ 0;//พื้นที่เปิดโล่ง
-
//ลบร่างงูออก
ลบ: ฟังก์ชั่น () {
สำหรับ (var i=0; i<this.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
-
-
//วาดตัวงู
สี: ฟังก์ชั่น () {
สำหรับ (var i=0; i<this.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
-
-
// ลบส่วน
ลบจุด: ฟังก์ชั่น (x, y) {
this.tbl.rows[y].cells[x].style.พื้นหลังสี = "";
-
paintDot: ฟังก์ชั่น (x, y, สี) {
this.tbl.rows[y].cells[x].style.พื้นหลังสี = สี;
-
//รับสีตามพิกัด
getColor: ฟังก์ชั่น (x, y) {
กลับ this.tbl.rows[y].cells[x].style.BackgroundColor;
-
//สำหรับการดีบัก
toString: ฟังก์ชั่น () {
var str = "";
สำหรับ (var i=0; i<this.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " สี:" + this.body[i].color + " - ";
-
กลับ STR;
-
//ตรวจสอบว่าเติมจุดพิกัดแล้วหรือไม่
isCellFilled: ฟังก์ชั่น (x, y) {
ถ้า(this.tbl.rows[y].cells[x].style.พื้นหลังสี == ""){
กลับเท็จ;
-
กลับเป็นจริง;
-
//เริ่มต้นใหม่
รีสตาร์ท: ฟังก์ชั่น () {
ถ้า (this.timer) {
clearInterval(this.timer);
-
สำหรับ(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow (0);
-
นี้.body = [];
นี้.init();
นี่.ความเร็ว = 250;
-
//เร่ง
เร่งความเร็ว: ฟังก์ชั่น (เวลา) {
ถ้า(!this.paused){
ถ้า(this.speed+time<10||this.speed+time>2000){
กลับ;
-
this.speed +=เวลา;
นี้.หยุดชั่วคราว();
นี้.ย้าย();
-
-
//ผลิตอาหาร.
GenerateDood: ฟังก์ชั่น () {
var สี = ['สีแดง','สีส้ม','สีเหลือง','สีเขียว','สีฟ้า','สีม่วง','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
ถ้า(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.พื้นหลังสี = สี [colorIndex];
-
-
-
</สคริปต์>
<body onload="Snake.init();">
/************************************************* ***** ************<br />
* จาวาสคริปต์งู v2.4<br />
************************************************** * ************/<br />
<table id="main" cellspacing="0" cellpadding="0"></table>
<input type="button" id="btn" value="Start/Pause" />คลิกปุ่มซ้ายหรือกด Enter เพื่อเริ่ม/หยุดเกมชั่วคราว<br />
<input type="button" id="reset" value="เริ่มต้นใหม่" /><br />
<input type="button" id="upSpeed" value="เร่ง" />คลิกปุ่มซ้ายหรือกด Ctrl + ↑ เพื่อเร่งความเร็ว<br />
<input type="button" id="downSpeed" value="Slow down" />คลิกปุ่มซ้ายหรือกด Ctrl + ↓ เพื่อชะลอความเร็ว
<สคริปต์>
$('btn').onclick = function(){
ถ้า (Snake.paused){
งู.ย้าย();
Snake.paused = เท็จ;
-
อื่น{
งู.หยุดชั่วคราว();
Snake.paused = จริง;
-
-
$("รีเซ็ต").onclick = function(){
งู.รีสตาร์ท();
นี่.เบลอ();
-
$("upSpeed").onclick = function(){
งู.speedUp(-20);
-
$("downSpeed").onclick = function(){
งู.speedUp(20);
-
</สคริปต์>
</ร่างกาย>
</html>