基于Javascript開發(fā)連連看游戲小程序
“連連看”是源自臺灣的桌面小游戲，自從流入大陸以來風靡一時，也吸引眾多程序員開發(fā)出多種版本的“連連看”。“連連看”考驗的是各位的眼力，在有限的時間內(nèi)，只要把所有能連接的相同圖案，兩個一對地找出來，每找出一對，它們就會自動消失，只要把所有的圖案全部消完即可獲得勝利。所謂能夠連接，指得是：無論橫向或者縱向，從一個圖案到另一個圖案之間的連線不能超過兩個彎，其中，連線不能從尚未消去的圖案上經(jīng)過。
連連看游戲的規(guī)則總結(jié)如下：
● 兩個選中的方塊是相同的。
● 兩個選中的方塊之間連接線的折點不超過兩個。（連接線由x軸和y軸的平行線組成）。
本篇開發(fā)連連看游戲，游戲效果如圖1所示。
圖1 連連看運行界面
本游戲增加智能查找功能，當玩家自己無法找到時，可以右鍵單擊畫面，則會出現(xiàn)提示可以消去的兩個方塊（被加上紅色邊框線）。
01、程序設計的步驟
1. 設計點類Point
點類Point比較簡單，主要存儲方塊所在棋盤坐標（x,y）。
//定義坐標點類
function Point(_x, _y) {
this.x = _x;
this.y = _y;
}2. 設計游戲主邏輯
整個游戲在Canvas對象中進行，在頁面加載時調(diào)用create_map( )實現(xiàn)將圖標圖案隨機放到地圖中，地圖map中記錄的是圖案的數(shù)字編號。最后調(diào)用print_map()按地圖map中記錄圖案信息將圖2中圖標圖案繪制在Canvas對象中，生成游戲開始的界面。同時綁定Canvas對象觸屏開始事件，對玩家觸屏操作做出反應。
var map = [];
var Select_first = false; //是否已經(jīng)選中第一塊
var linePointStack = []; //存儲連接的折點棋盤坐標
var Height = 12;
var Width = 10;
var p1, p2; //存儲選中第一塊，第二塊方塊對象坐標
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
//創(chuàng)建畫布上下文
this.init(); //初始化地圖, 將地圖中所有方塊區(qū)域位置置為空方塊狀態(tài)
this.create_map() ; //生成隨機地圖
this.print_map(); //輸出map地圖
this.ctx = wx.createCanvasContext('myCanvas')
this.ctx.draw();
},
init: function() {
//初始化地圖, 將地圖中所有方塊區(qū)域位置置為空方塊狀態(tài)
for (var x = 0; x < Width; x++) {
map[x] = new Array();
for (var y = 0; y < Height; y++) {
map[x][y] = " "; //" "表示空的
}
}
},3. 編寫函數(shù)代碼
print_map( )按地圖map中記錄圖案信息將圖2中圖標圖案顯示在Canvas對象中，生成游戲開始的界面。
**
*按地圖map中記錄圖案信息將圖標圖案顯示在Canvas對象中，生成游戲開始的界面。
*/
print_map: function() { //輸出map地圖
let ctx = this.ctx
for (var x = 0; x < Width; x++)
for (var y = 0; y < Height; y++)
if (map[x][y] != ' ') {
var img1 = '/images/' + map[x][y] + ".jpg";
//ctx.drawImage('/images/4.jpg', 50 * i, 50, 50, 50)
ctx.drawImage(img1, 25 * x, 25 * y, 25, 25);
}
},用戶在窗口中上單擊時，由屏幕像素坐標(e.touches[0].x, e.touches[0].y)計算被單擊方塊的地圖棋盤位置坐標（x,y)。判斷是否是第一次選中方塊，是則僅僅對選定方塊加上紅色示意框線。如果是第二次選中方塊，則加上黑色示意框線，同時要判斷是否圖案相同且連通。假如連通則畫選中方塊之間連接線。
Canvas對象觸屏事件則調(diào)用智能查找功能find2Block()。
Canvas對象觸屏開始事件代碼。
touchStart: function(e) {
var x = Math.floor(e.touches[0].x / 25);
var y = Math.floor(e.touches[0].y / 25);
let ctx = this.ctx;
var pair=false; //是否配對成功
this.print_map(); //輸出map地圖
console.log("clicked at" + x + "，" + y);
if (map[x][y] == " ")
console.log("提示此處無方塊");
else {
if (Select_first == false) {
p1 = new Point(x, y);
//畫選定（x1,y1)處的框線
ctx.setStrokeStyle("red");
ctx.strokeRect(x * 25, y * 25, 25, 25);
Select_first = true;
} else {
p2 = new Point(x, y);
//判斷第二次單擊的方塊是否已被第一次單擊選取，如果是則返回。
if ((p1.x == p2.x) && (p1.y == p2.y))
return;
//畫選定（x2,y2)處的框線
console.log('第二次單擊的方塊' + x + ', ' + y)
ctx.strokeRect(x * 25, y * 25, 25, 25);
if (this.IsSame(p1, p2) && this.IsLink(p1, p2)) { //判斷是否連通
console.log('連通' + x + ', ' + y);
Select_first = false;
//畫選中方塊之間連接線
this.drawLinkLine(p1, p2);
map[p1.x][p1.y] = ' '; //清空記錄地圖中第1個方塊
map[p2.x][p2.y] = ' '; //清空記錄地圖中第2個方塊
pair=true; //配對成功，定時0.5秒后刷新屏幕
linePointStack=[];
if(this.isWin()) { //游戲結(jié)束
console.log("游戲結(jié)束,你通關了！！");
}
} else {
//不能連通則取消選定的2個方塊
Select_first = false;
}
}
}
ctx.draw();
if (pair) { //配對成功
this.print_map(); //重新輸出map地圖
//定時0.5秒后刷新屏幕
setTimeout(function () {
ctx.draw();
}, 500); //過半秒
}
},IsSame(p1,p2)判斷p1 ( x1, y1)與p2(x2, y2)處的方塊圖案是否相同。
IsSame: function(p1, p2) {
if (map[p1.x][p1.y] == map[p2.x][p2.y]) {
console.log("clicked at IsSame");
return true;
}
return false;
},以下是畫方塊之間連接線的方法。
drawLinkLine(p1,p2)繪制(p1,p2)所在2個方塊之間的連接線。判斷l(xiāng)inePointStack數(shù)組長度，如果為0，則是直接連通。linePointStack數(shù)組長度為1，則是一折連通，linePointStack存儲是一折連通的折點。linePointStack數(shù)組長度為2，則是2折連通，linePointStack存儲是2折連通的兩個折點。
drawLinkLine: function(p1, p2) { //畫連接線
console.log("折點數(shù)" + linePointStack.length);
if (linePointStack.length == 0) //直線聯(lián)通
this.drawLine(p1, p2);
if (linePointStack.length == 1) { //一折連通
var z = linePointStack.pop();
console.log("一折連通點z" + z.x + z.y);
this.drawLine(p1, z);
this.drawLine(p2, z);
}
if (linePointStack.length == 2) { //2折連通
var z1 = linePointStack.pop()
//print("2折連通點z1",z1.x,z1.y)
this.drawLine(p2, z1)
var z2 = linePointStack.pop()
//print("2折連通點z2",z2.x,z2.y)
this.drawLine(z1, z2);
this.drawLine(p1, z2);
}
},drawLinkLine(p1,p2)繪制(p1,p2)之間的直線。
drawLine: function(p1, p2) { //繪制(p1, p2)之間的直線
let ctx = this.ctx;
ctx.beginPath();
ctx.moveTo(p1.x * 25 + 12, p1.y * 25 + 12);
ctx.lineTo(p2.x * 25 + 12, p2.y * 25 + 12);
ctx.stroke();
},IsWin()檢測是否尚有非未被消除的方塊，即地圖map中元素值非空（" "），如果沒有則已經(jīng)贏得了游戲。
/**
*#檢測是否已經(jīng)贏得了游戲
*/
isWin: function() {
//檢測是否尚有非未被消除的方塊
//(非BLANK_STATE狀態(tài))
for (var y = 0; y < Height; y++)
for (var x = 0; x < Width; x++)
if (map[x][y] != " ")
return false;
return true;
}至此完成連連看游戲。
到此這篇關于基于Java開發(fā)連連看游戲小程序的文章就介紹到這了,更多相關Java連連看小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了js+css實現(xiàn)tab菜單切換效果的方法,以實例形式完整講述了css與js的實現(xiàn)代碼,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
識別操作系統(tǒng)是不是vista的js代碼...2007-08-08
Bun運行時是新一代高性能JavaScript/TypeScript運行時
Bun由Jarred Sumner創(chuàng)建,是一款新興的JavaScript和TypeScript運行時,旨在比Node.js和Deno提供更高性能和快速啟動,Bun使用Zig語言編寫,內(nèi)置包管理并支持Node.js大部分API,適用于高并發(fā)API服務和快速構(gòu)建工具2024-11-11
本文給大家介紹js事件詳解，涉及到事件流，事件處理，事件對象等方面的知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
JavaScript折半查找（二分查找）算法原理與實現(xiàn)方法示例
這篇文章主要介紹了JavaScript折半查找（二分查找）算法原理與實現(xiàn)方法,結(jié)合具體問題描述了折半查找算法的原理、實現(xiàn)方法及相關操作注意事項,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)購物車加減以及價格計算功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
JS實現(xiàn)的文字間歇循環(huán)滾動效果完整示例
這篇文章主要介紹了JS實現(xiàn)的文字間歇循環(huán)滾動效果,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)實現(xiàn)頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2018-02-02
使用JavaScript構(gòu)建一個動態(tài)交互式圖表
在Web開發(fā)中,JavaScript不僅是實現(xiàn)交互效果的關鍵,還可以用于構(gòu)建復雜的可視化組件,如動態(tài)交互式圖表,下面我們就來看看如何構(gòu)建一個動態(tài)交互式圖表吧2024-02-02
JavaScript使用位運算符判斷奇數(shù)和偶數(shù)的方法
這篇文章主要介紹了JavaScript使用位運算符判斷奇數(shù)和偶數(shù)的方法,涉及javascript位運算的使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)酷炫分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08