JavaScript写的对对碰游戏

最新推荐文章于 2019-09-21 10:27:39 发布

原创最新推荐文章于 2019-09-21 10:27:39 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #matrix #function #div #timer #xhtml

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的对对碰游戏实现方案，通过HTML和JavaScript构建游戏界面与逻辑。游戏包括动物图片匹配，支持玩家交换相邻动物位置以形成三个或更多相同动物的连线，从而消除这些动物并获得分数。

废话不多说，代码中有完整注释。

index.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>对对碰</title> <meta name="author" content="leeyohn" /> <meta name="website" content="http://www.crazyit.org" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> </style> </head> <body> <div id="pool"> <img id="poolImage" src="img/pool.jpg" mce_src="img/pool.jpg" style="position:absolute; left:0; top: 0; z-index:1"></img> </div> <mce:script src="initGame.js" mce_src="initGame.js" type="text/javascript"></mce:script> </body> </html>

initgame.js文件

//动物池的大小 var POOL_WIDTH = 384; var POOL_HEIGTH = 384; //动物图片的宽度 var ANIMAL_WIDTH = 48; //动物图片的高度 var ANIMAL_HEIGHT = 48; //动物数量 var ANIMAL_NUM = 7; //矩阵行数、列数 var DDP_MATRIX_ROW = 8; var DDP_MATRIX_COL = 8; //对对碰矩阵值空时的标记 var EMPTY = 7; //标记单击次数 var isDoubleClicked = false; //记录被点击的X坐标 var xClicked; //记录被点击的Y坐标 var yClicked; //每个动物的Div标签 var animalDiv = []; //每个动物的图片 var animalImage = []; //保存每个动物索引的数组 var animalMap = []; //获取背景图片的Div var poolDiv = document.getElementById("pool"); //创建一个monkey的图片 var monkeyImage = document.createElement("img"); monkeyImage.src = "img/monkey.png"; animalImage[0] = monkeyImage; //创建一个panda的图片 var pandaImage = document.createElement("img"); pandaImage.src = "img/panda.png"; animalImage[1] = pandaImage; //创建一个cat的图片 var catImage = document.createElement("img"); catImage.src = "img/cat.png"; animalImage[2] = catImage; //创建一个cattle的图片 var cattleImage = document.createElement("img"); cattleImage.src = "img/cattle.png"; animalImage[3] = cattleImage; //创建一个frog的图片 var frogImage = document.createElement("img"); frogImage.src = "img/frog.png"; animalImage[4] = frogImage; //创建一个chicken的图片 var chickenImage = document.createElement("img"); chickenImage.src = "img/chicken.png"; animalImage[5] = chickenImage; //创建一个fox的图片 var foxImage = document.createElement("img"); foxImage.src = "img/fox.png"; animalImage[6] = foxImage; //定义一个定时器 var timer; //随机函数产生0-6的整数 function getRandom(n) { return Math.floor(Math.random() * n); } //更新动物矩阵 function updateAnimal() { for (var i = 0; i < DDP_MATRIX_ROW; i++) { for (var j = 0; j < DDP_MATRIX_COL; j++) { if (animalMap[i][j] == EMPTY) { animalMap[i][j] = getRandom(7); } } } } //刷新所有图片函数 function repaint() { //全部删除 for (var i = 0; i < DDP_MATRIX_ROW; i++) { for (var j = 0; j < DDP_MATRIX_COL; j++) { var oldImg = animalDiv[i][j].firstChild; animalDiv[i][j].removeChild(oldImg); } } //重新添加节点 for (var i = 0; i < DDP_MATRIX_ROW; i++) { for (var j = 0; j < DDP_MATRIX_COL; j++) { tmpImg = animalImage[animalMap[i][j]].cloneNode(false); //创建一个img的子标签 animalDiv[i][j].appendChild(tmpImg); } } } //消除三个以上连接的点 function removeLinked(x, y) { var tmp = 0; var linked = 1; if (x + 1 < DDP_MATRIX_ROW) { tmp = x + 1; while (tmp < DDP_MATRIX_ROW && animalMap[x][y] == animalMap[tmp][y]) { linked++; tmp++; } } if (x - 1 >= 0) { tmp = x - 1; while (tmp >= 0 && animalMap[x][y] == animalMap[tmp][y]) { linked++; tmp--; } } if (linked >= 3) { tmp = x + 1; while (tmp < DDP_MATRIX_ROW && animalMap[tmp][y] == animalMap[x][y]) { animalMap[tmp][y] = EMPTY; tmp++; } tmp = x - 1; while (tmp >= 0 && animalMap[tmp][y] == animalMap[x][y]) { animalMap[tmp][y] = EMPTY; tmp--; } //当前交换过来的点 animalMap[x][y] = EMPTY; } tmp = 0; linked = 1; if (y + 1 < DDP_MATRIX_COL) { tmp = y + 1; while (tmp < DDP_MATRIX_COL && animalMap[x][y] == animalMap[x][tmp]) { linked++; tmp++; } } if (y - 1 >= 0) { tmp = y - 1; while (tmp >= 0 && animalMap[x][y] == animalMap[x][tmp]) { linked++; tmp--; } } if (linked >= 3) { tmp = y + 1; while (tmp < DDP_MATRIX_COL && animalMap[x][y] == animalMap[x][tmp]) { animalMap[x][tmp] = EMPTY; tmp++; } tmp = y - 1; while (tmp >= 0 && animalMap[x][y] == animalMap[x][tmp]) { animalMap[x][tmp] = EMPTY; tmp--; } //当前交换过来的点 animalMap[x][y] = EMPTY; } } //是否有三个以上连接的点 function isThreeLinked(x, y) { var tmp = 0; var linked = 1; if (x + 1 < DDP_MATRIX_ROW) { tmp = x + 1; while (tmp < DDP_MATRIX_ROW && animalMap[x][y] == animalMap[tmp][y]) { linked++; tmp++; } } if (x - 1 >= 0) { tmp = x - 1; while (tmp >= 0 && animalMap[x][y] == animalMap[tmp][y]) { linked++; tmp--; } } if (linked >= 3) { tmp = x + 1; while (tmp < DDP_MATRIX_ROW && animalMap[tmp][y] == animalMap[x][y]) { tmp++; } tmp = x - 1; while (tmp >= 0 && animalMap[tmp][y] == animalMap[x][y]) { tmp--; } return true; } linked = 1; if (y + 1 < DDP_MATRIX_COL) { tmp = y + 1; while (tmp < DDP_MATRIX_COL && animalMap[x][y] == animalMap[x][tmp]) { linked++; tmp++; } } if (y - 1 >= 0) { tmp = y - 1; while (tmp >= 0 && animalMap[x][y] == animalMap[x][tmp]) { linked++; tmp--; } } if (linked >= 3) { tmp = y + 1; while (tmp < DDP_MATRIX_COL && animalMap[x][y] == animalMap[x][tmp]) { tmp++; } tmp = y - 1; while (tmp >= 0 && animalMap[x][y] == animalMap[x][tmp]) { tmp--; } return true; } return false; } /*功能:全局扫描三个相连相同的点 *flag flag为1时:只判断是否有三个相连的点 * flag为2时:删除三个相连的点 */ function globalSearch(flag) {//** if (1 == flag) { for (var i = 0; i < DDP_MATRIX_ROW; i++) { for (var j = 0; j < DDP_MATRIX_COL; j++) { if (isThreeLinked(i, j)) { return true; } } } } else if (2 == flag) { for (var i = 0; i < DDP_MATRIX_ROW; i++) { for (var j = 0; j < DDP_MATRIX_COL; j++) { //删除三个相连的点 removeLinked(i, j); } } } return false; } //动物下降 function downAnimal() { var tmp = 0; for (var j = DDP_MATRIX_COL - 1; j >= 0; j--) { for (var i = 0; i < DDP_MATRIX_ROW; i++) { if (animalMap[j][i] == EMPTY) { for (var k = j - 1; k >= 0; k--) { if (animalMap[k][i] != EMPTY) { tmp = animalMap[k][i]; animalMap[k][i] = animalMap[j][i]; animalMap[j][i] = tmp; break; } } } } } } //交换动物 function swapAnimal() { var clientX = event.clientX; var clientY = event.clientY; if ((clientX >= 12 && clientX <= 396) && (clientY >= 17 && clientY <= 401)) { //被点击的动物的坐标的绝对值 var xAbs; var yAbs; xAbs = parseInt((clientX - 12) / ANIMAL_WIDTH); yAbs = parseInt((clientY - 17) / ANIMAL_HEIGHT); if (!isDoubleClicked) { isDoubleClicked = true; xClicked = xAbs; yClicked = yAbs; } else { isDoubleClicked = false; //两点的坐标绝对值等于1时视为相邻的两点 if (1 == Math.abs(xAbs - xClicked) || 1 == Math.abs(yAbs - yClicked)) { if (yAbs == yClicked) {//横向交换 //-------------交换矩阵中相邻的两点的值-------------- var tmp; tmp = animalMap[yAbs][xAbs]; animalMap[yAbs][xAbs] = animalMap[yClicked][xClicked]; animalMap[yClicked][xClicked] = tmp; //----------------------------------------------------- if (isThreeLinked(yAbs, xAbs)) { removeLinked(yAbs, xAbs); downAnimal(); //更新动物矩阵 updateAnimal(); //全局扫描判断是否有新的三个以上连接点，有则删除 while (globalSearch(1)) { //全局扫描消除三个以上相连的点 globalSearch(2); //动物再次下落 downAnimal(); //再次更新动物矩阵 updateAnimal(); } } else {//没有三个以上相同的点，交换回来 tmp = animalMap[yClicked][xClicked]; animalMap[yClicked][xClicked] = animalMap[yAbs][xAbs]; animalMap[yAbs][xAbs] = tmp; } } else if (xAbs == xClicked) {//纵向交换 //-------------交换矩阵中相邻的两点的值-------------- var tmp; tmp = animalMap[yAbs][xAbs]; animalMap[yAbs][xAbs] = animalMap[yClicked][xClicked]; animalMap[yClicked][xClicked] = tmp; //----------------------------------------------------- if (isThreeLinked(yAbs, xAbs)) { //消除三个以上相连的点 removeLinked(yAbs, xAbs); downAnimal(); //更新动物矩阵 updateAnimal(); //全局扫描判断是否有新的三个以上连接点，有则删除 while (globalSearch(1)) { //全局扫描消除三个以上相连的点 globalSearch(2); //动物再次下落 downAnimal(); //再次更新动物矩阵 updateAnimal(); } } else {//没有三个以上相同的点，交换回来 //----------------------------------------------------- tmp = animalMap[yClicked][xClicked]; animalMap[yClicked][xClicked] = animalMap[yAbs][xAbs]; animalMap[yAbs][xAbs] = tmp; //----------------------------------------------------- } } } isDoubleClicked = true; xClicked = xAbs; yClicked = yAbs; } } } function initAnimal() { do { for (var i = 0; i < DDP_MATRIX_ROW; i++) { animalMap[i] = []; for (var j = 0; j < DDP_MATRIX_COL; j++) { //随机选取动物 animalMap[i][j] = getRandom(7); } } } while (globalSearch(1)); for (var i = 0; i < DDP_MATRIX_ROW; i++) { animalDiv[i] = []; for (var j = 0; j < DDP_MATRIX_COL; j++) { //获取一个随机数 number = getRandom(7); div = document.createElement("div"); div.style.position = "absolute"; div.style.left = j * ANIMAL_WIDTH; div.style.top = i * ANIMAL_HEIGHT; div.style.zIndex = 6; animalDiv[i][j] = div; //复制一个动物图片，但不复制当前节点的后代结点 image = animalImage[animalMap[i][j]].cloneNode(false); //创建一个img的子标签 div.appendChild(image); poolDiv.appendChild(div); } } } //调用初始化动物函数 initAnimal(); //设置鼠标事件 document.getElementById("pool").onmousedown = swapAnimal; //设置定时器，每200毫秒执行一次重绘 timer = window.setInterval("repaint();", 200);

第一次写博，写得不好，大家不要见怪