小編給大家分享一下如何使用原生javascript實現連連看游戲，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體內容如下
<!DOCTYPE html>
<html>
<head>
<title>連連看</title>
<meta charset="gbk">
<style type="text/css">
body {
text-align: center;
}
.text {text-align: center; margin-top: 60px; color: #fff;}
.agin {text-align: center; margin-top: 60px; color: #fff;}
#game-box {
margin: 60px auto;
position: relative;
}
#game-box img {
float: left;
width: 59px;
height: 59px;
border: 1px solid #000000;
}
#game-box img.hover {
border: 1px solid #ffffff;
}
#game-box img.active {
border: 1px solid #7fff00;
}
#game-box div {
background-color: #7fff00;
position: absolute;
}
</style>
<script type="text/javascript">
var byId = function (id) {
return document.getElementById(id);
}
var boxWidth = 61; //格子寬度
var gameBox;
var mapid = 'game-box';//地圖 id
//22張圖片
var arr = '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22'.split(',');
var h = 8; //圖片共8行
var w = 11; //圖片共11列
var boxsLength = h*w;
var boxArr = {}; //map對象
var startBox = ''; //開始的格子
var endBox = ''; //結束的格子
window.onload = init;
//初始化
function init() {
byId('agin').style.display = 'none';//隱藏再來一把按鈕
boxsLength = h*w;//圖片方框的個數
boxArr = {};
startBox = '';
endBox = '';
var str = '';
gameBox = byId(mapid);
for (var i = 0; i < h; i++) {
for (var j = 0; j < w; j++) {
str += '<img class="" onclick="choose(this);" id="t' + i + '_l'
+ j + '" src="img/blank.gif">'
// alert(str);
}//id="t0_l0,t0_l1,t0_l2,t0_l3..."
}
gameBox.innerHTML = str;
gameBox.style.width = w * boxWidth + 'px';
pushBoxArr();
toHTML();
}
// 隨機獲取坐標
function getPosition() {
var t, f;
(function () {
t = parseInt(Math.random() * h);
l = parseInt(Math.random() * w);
if (('t' + t + '_l' + l) in boxArr) {
arguments.callee();
}
})();
return {t:t, l:l}
}
// 創建隨機坐標的格子
function CearteBox(name) {
var p = getPosition();
this.name = name;//圖片名
this.t = p.t;//行
this.l = p.l;//列
this.position = 't' + p.t + '_l' + p.l;//位置
this.love = 0;//這個用于特殊,某些圖片不同也可以連接
switch (name) {
case '100':
case '200':
this.love = 1;
break;
case '300':
case '400':
case '500':
this.love = 2;
break;
case '600':
case '700':
this.love = 3;
break;
case '800':
case '900':
this.love = 4;
break;
}
}
// 產生88個格子（圖片框）
function pushBoxArr() {
var index = 0;
var last = arr.length - 1;
for (var i=0; i< h;i++) {
for (var j=0;j< w;j++) {
var a = new CearteBox(arr[index]);//用圖片名創建,每張圖片四次
boxArr['t' + a.t + '_l' + a.l] = a;//格子的位置(也是每張圖片的id)
if (index === last) {
index = 0;
} else {
index += 1;
}
}
}
}
// 初始化html
function toHTML() {
for (var i in boxArr) {//遍歷所有圖片的id
byId(i).src = 'img/' + boxArr[i].name + '.png';
}
}
// choose
function choose(el) {
if (el.src.indexOf('blank') >= 0) {//鼠標點擊了空白圖片
return false;
}else{
el.className = 'active';//更改點擊圖片的樣式
//第一次點擊或點擊了同一張圖片
if (startBox == '' || startBox == el.id) {
startBox = el.id;
} else {//點擊了第二張圖片
endBox = el.id;
test(boxArr[startBox], boxArr[endBox]);
}
}
}
// 判斷是不是可連接格子
function test(a, b) {
var can = function (a, b) {
if (a.name == b.name) {//圖片名相同就可以連接
return true;
} else {
if (a.love != 0 && b.love != 0) {
if (a.love == b.love) {
return true;
} else {
return false;
}
} else {
return false;
}
}
}(a, b);//立即執行
if (can) {//可以連接
go(a, b);
} else {//不能連接
byId(startBox).className = '';
startBox = endBox;//指向第二張圖片
endBox = '';
}
}
// 判斷是否連通
function go(a, b) {
var _ap = a.position, _bp = b.position;
var a = a, b = b, temp, isKill = false;
// 建立四個點，判斷是否兩兩相通
var pt1, pt2, pt3, pt4;
// 上到下掃描
if (isKill == false) {
//交換位置
if (a.t > b.t) {
temp = a;
a = b;
b = temp;
}
for (var i = -1, len = h; i <= len; i++) {
pt1 = a;
pt2 = {t:i, l:a.l};
pt3 = {t:i, l:b.l};
pt4 = b;
if( (!isNull(pt2) && (pt2.t != a.t) ) || ( !isNull(pt3) && (pt3.t != b.t) ) ){
continue;
}
else if (link4pt(pt1, pt2, pt3, pt4)){
isKill = true;
kill(a, b);
showLine(pt1, pt2, pt3, pt4);
break;
return;
}
}
}
// 左到右掃描
if (isKill == false) {
//交換位置
if (a.l > b.l) {
temp = a;
a = b;
b = temp;
}
for (var i = -1, len = w; i <= len; i++) {
pt1 = a;
pt2 = {t:a.t, l:i};
pt3 = {t:b.t, l:i};
pt4 = b;
if( (!isNull(pt2) && (pt2.l != a.l) ) || ( !isNull(pt3) && (pt3.l != b.l) ) ){
continue;
}
else if (link4pt(pt1, pt2, pt3, pt4)){
isKill = true;
kill(a, b);
showLine(pt1, pt2, pt3, pt4);
break;
return;
}
}
}
//掃描完畢
if(isKill == false){
endBox = '';
byId(_ap).className = '';
startBox = _bp;
}
}
//干掉格子，刪除boxArr中相應格子
function kill(a, b) {
boxArr[a.position] = null;
boxArr[b.position] = null;
boxsLength -= 2;
startBox = '';
endBox = '';
}
// 顯示鏈接路徑
function showLine(a, b, c, d) {
var line1 =show2pt(a,b);
var line2 = show2pt(b,c);
var line3 = show2pt(c,d);
var hideLine = function () {
gameBox.removeChild(line1);
gameBox.removeChild(line2);
gameBox.removeChild(line3);
byId(a.position).src = byId(d.position).src ='img/blank.gif';
byId(a.position).className = byId(d.position).className = '';
if (boxsLength<=0) {
alert('親，你贏了！好膩害啊。');
byId('agin').style.display = 'block';
}
}
setTimeout(hideLine, 300);
function show2pt (a, b){
var top, left, width, height, line = document.createElement('div');
var a = a, b = b, temp;
// 交換位置
if (a.t > b.t || a.l > b.l) {
temp = a;
a = b;
b = temp;
}
top = boxWidth * a.t + 30 + 'px';
left = boxWidth * a.l + 30 + 'px';
// 同行(t相等)
if (a.t == b.t) {
width = boxWidth * (b.l - a.l) + 1 + 'px';
height = '1px';
}
// 同列(l相等)
if (a.l == b.l) {
width = '1px';
height = boxWidth * (b.t - a.t) + 1 + 'px';
}
line.style.top = top;
line.style.left = left;
line.style.width = width;
line.style.height = height;
return gameBox.appendChild(line);
}
}
// 單個格子是否空值
function isNull (a) {
return boxArr['t' + a.t + '_l' + a.l] ? false : true;
}
// 2點是否連通
function link2pt (a, b) {
var a = a, b = b, temp, canLink = true;
// 交換位置
if (a.t > b.t || a.l > b.l) {
temp = a;
a = b;
b = temp;
}
if (a.t == b.t) { //同行（t相等），a在b的左邊
for (var i = a.l + 1, len = b.l - 1; i <= len; i++) {
if (boxArr['t' + a.t + '_l' + i]) {
canLink = false;
break;
}
}
}else if (a.l == b.l) { //同列（l相等），a在b的上邊
for (var i = a.t + 1, len = b.t - 1; i <= len; i++ ) {
if(boxArr['t' + i + '_l' + a.l]) {
canLink = false;
break;
}
}
} else {
throw ('位置錯誤：a.t=' + a.t + ' b.t=' + b.t + ' a.l=' + a.l + ' b.l=' + b.l);
}
return canLink;
}
// 4個點是否兩兩連通
function link4pt (pt1, pt2, pt3, pt4) {
return link2pt(pt1, pt2) && link2pt(pt2, pt3) && link2pt(pt3, pt4);
}
</script>
</head>
<body>
<p class="agin" id="agin" ><input type="button" onclick="init()" value="再來一把"></p>
<div id="game-box">
</div>
<p class="text" >相同圖片可以連哦！啊哈哈哈~~ </p>
</body>
</html>以上是“如何使用原生javascript實現連連看游戲”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
