溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下web開發(fā)中連連看小游戲的制作案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一. 2個(gè)物體在同一直線上，可以直接連通 （這個(gè)不需要解釋啦）
二.2個(gè)物體在同一直線上，中間有障礙物，不能直接連通 （2個(gè)轉(zhuǎn)彎）
【循環(huán)遍歷黃線中的交點(diǎn)，比如A,B點(diǎn)，再判斷藍(lán)線有沒有障礙物，若沒有，則可以連通，若有，則繼續(xù)循環(huán)查找新的A,B點(diǎn)】
三. 2個(gè)對(duì)象不在同一直線上，一個(gè)轉(zhuǎn)彎
【2個(gè)物體分別在所在位置進(jìn)行x，y軸的延伸，如下圖則交點(diǎn)為A,B。 只需判斷2個(gè)交點(diǎn)到2個(gè)物體直接是否有障礙物，若沒有，則可以連通】
四. 2個(gè)物體不在同一直線上，連線有2個(gè)轉(zhuǎn)彎
【同二的原理，如下圖，如果A,B 2個(gè)交點(diǎn)到物體均沒有障礙物，則可以連通。其中A點(diǎn)的縱坐標(biāo)和B相同】
另外一種情況，A,B 為2個(gè)物體所在x軸與中間y軸的交點(diǎn)，A,B的x坐標(biāo)必須相同，連線如下：
以上就是四種連線算法判斷，畫圖只畫x軸的，每一種按照同樣的原理增加y軸即可?？筛采w所有連線判斷～
說完連線判斷的邏輯之后，寫一下整體的游戲框架，游戲基本使用原生javascript，使用createjs游戲引擎進(jìn)行開發(fā)。
代碼思路：
1. 繪制游戲畫圖，確定為多少宮圖，由于是在移動(dòng)端的小游戲，根據(jù)最小屏幕尺寸（iphone4 320*480），確定為7*9的宮圖。
1. 創(chuàng)建一個(gè)二維數(shù)組，如果某個(gè)坐標(biāo)上有物體，則設(shè)為1，否則為0
2.判斷該位置是否有物體，只需要判斷對(duì)應(yīng)的二維數(shù)組上值是否為1，若為1，則有物體，否則沒有。
至于畫線，消除相同物體，只要會(huì)連線邏輯，肯定就會(huì)自己繪制線條，消除物體了，所以本篇文章就只講連線判斷啦～
在判斷能否連線的時(shí)候，肯定是從最簡(jiǎn)單的方法開始判斷,如下：
同一直線能否直線連通--->如何一點(diǎn)被包圍，則不通--->兩點(diǎn)在一條直線上，不能直線連接但是可以連通---> 不在同一直線但是可以連通
getPath: function (p1, p2) {//開始搜索前對(duì)p1,p2排序，使p2盡可能的在p1的右下方。if (p1.x > p2.x) {var t = p1;
p1 = p2;
p2 = t;
}else if (p1.x == p2.x) {if (p1.y > p2.y) {var t = p1;
p1 = p2;
p2 = t;
}
}//2點(diǎn)在同一直線上，可以直線連通if (this.hasLine(p1, p2).status) {return true;
}//如果兩點(diǎn)中任何一個(gè)點(diǎn)被全包圍，則不通。else if (this.isWrap(p1, p2)) {return false;
}//兩點(diǎn)在一條直線上，不能直線連接但是可以連通else if (this.LineLink(p1, p2)) {return true;
}//不在同一直線但是可以連通else if (this.curveLink(p1, p2)) {return true;
}
}
//判斷同一條線能否連通,x軸相同或者y軸相同hasLine: function (p1, p2) {this.path = [];//同一點(diǎn)if (p1.x == p2.x && p1.y == p2.y) {return {
status: false};
}if (this.onlineY(p1, p2)) {var min = p1.y > p2.y ? p2.y : p1.y;
min = min + 1;var max = p1.y > p2.y ? p1.y : p2.y;for (min; min < max; min++) {var p = {x: p1.x, y: min};if (!this.isEmpty(p)) {
console.log('有障礙物p點(diǎn)………………');
console.log(p);this.path = [];break;
}this.path.push(p);
}if (min == max) {return {
status: true,
data: this.path,
dir: 'y' //y軸 };
}this.path = [];return {
status: false};
}else if (this.onlineX(p1, p2)) {var j = p1.x > p2.x ? p2.x : p1.x;
j = j + 1;var max = p1.x > p2.x ? p1.x : p2.x;for (j; j < max; j++) {var p = {x: j, y: p1.y};if (!this.isEmpty(p)) {
console.log('有障礙物p點(diǎn)………………');
console.log(p);this.path = [];break;
}this.path.push(p);
}if (j == max) {return {
status: true,
data: this.path,
dir: 'x' //x軸 };
}this.path = [];return {
status: false};
}return {
status: false};//2點(diǎn)是否有其中一點(diǎn)被全包圍,若有，則返回trueisWrap: function (p1, p2) {//有一點(diǎn)為空，則條件不成立if (!this.isEmpty({x: p1.x, y: p1.y + 1}) && !this.isEmpty({
x: p1.x,
y: p1.y - 1}) && !this.isEmpty({
x: p1.x - 1,
y: p1.y
}) && !this.isEmpty({x: p1.x + 1, y: p1.y})) {return true;
}if (!this.isEmpty({x: p2.x, y: p2.y + 1}) && !this.isEmpty({
x: p2.x,
y: p2.y - 1}) && !this.isEmpty({
x: p2.x - 1,
y: p2.y
}) && !this.isEmpty({x: p2.x + 1, y: p2.y})) {return true;
}return false;
} //兩點(diǎn)在一條直線上，不能直線連接但是可以連通LineLink: function (p1, p2) {var pt0, pt1, pt2, pt3;//如果都在x軸，則自左至右掃描可能的路徑，//每次構(gòu)造4個(gè)頂點(diǎn)pt0, pt1, pt2, pt3，然后看他們兩兩之間是否連通if (this.onlineX(p1, p2)) {for (var i = 0; i < this.H; i++) {if (i == p1.y) {continue;
}
pt0 = p1;
pt1 = {x: p1.x, y: i};
pt2 = {x: p2.x, y: i};
pt3 = p2;//如果頂點(diǎn)不為空，則該路不通。if (!this.isEmpty(pt1) || !this.isEmpty(pt2)) {continue;
}if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt1, pt2, pt3];
}
}
}//如果都在y軸，則自上至下掃描可能的路徑，//每次構(gòu)造4個(gè)頂點(diǎn)pt0, pt1, pt2, pt3，然后看他們兩兩之間是否連通if (this.onlineY(p1, p2)) {for (var j = 0; j < this.W; j++) {if (j == p1.x) {continue;
}
pt0 = p1;
pt1 = {x: j, y: p1.y};
pt2 = {x: j, y: p2.y};
pt3 = p2;//如果頂點(diǎn)不為空，則該路不通。if (!this.isEmpty(pt1) || !this.isEmpty(pt2)) {continue;
}if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt1, pt2, pt3];
}
}
}
}， //兩點(diǎn)不在一條直線上，看是否可通curveLink: function (p1, p2) {var pt0, pt1, pt2, pt3;//特殊情況，先判斷是否是一個(gè)轉(zhuǎn)彎var spec1 = {x: p1.x, y: p2.y},
spec2 = {x: p2.x, y: p1.y};if (this.isEmpty(spec1)) {if (this.hasLine(p1, spec1).status && this.hasLine(p2, spec1).status) {
console.log('1個(gè)轉(zhuǎn)彎');this.drawLine(1, [p1, p2, spec1]);return [p1, p2, spec1];
}
}if (this.isEmpty(spec2)) {if (this.hasLine(p1, spec2).status && this.hasLine(p2, spec2).status) {
console.log('1個(gè)轉(zhuǎn)彎');// console.table([pt0, spec2, pt3]);this.drawLine(1, [p1, p2, spec2]);return [p1, spec2, p2];
}
}//先縱向掃描可能的路徑//同樣，每次構(gòu)造4個(gè)頂點(diǎn)，看是否可通for (var k = 0; k <= this.H; k++) {
pt0 = p1;
pt1 = {x: p1.x, y: k};
pt2 = {x: p2.x, y: k};
pt3 = p2;//2個(gè)交點(diǎn)都為空if (this.isEmpty(pt1) && this.isEmpty(pt2)) {//2個(gè)轉(zhuǎn)彎if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {
console.log('2個(gè)轉(zhuǎn)彎');this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt3, pt1, pt2];
}
}
}//橫向掃描所有可能的路徑for (var k = 0; k <= this.W; k++) {
pt0 = p1;
pt1 = {x: k, y: p1.y};
pt2 = {x: k, y: p2.y};
pt3 = p2;//2個(gè)交點(diǎn)都為空if (this.isEmpty(pt1) && this.isEmpty(pt2)) {//2個(gè)轉(zhuǎn)彎if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {
console.log('2個(gè)轉(zhuǎn)彎');this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt3, pt1, pt2];
}
}
}return false;
}以上是web開發(fā)中連連看小游戲的制作案例的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼