连连看游戏的编程实现

最新推荐文章于 2024-05-24 16:56:14 发布
最新推荐文章于 2024-05-24 16:56:14 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjinpeng66/article/details/10417409
版权

index.css

body {

 font-size : 16px;
 font-weight : bold;
 color : grey;

}

#whole {

 border : 1px double #999999;
 border-width : 5px;
 width : 800px;
 height : 505px;
 position : relative;

}

#gamePanel {
 
 margin: 1px 1px 1px 1px;
 width : 602px;
 height : 502px;
 background : url(../img/background.gif) repeat;
 position : absolute;

}

#pieces {

 margin-top : 35px;
 border : 1px solid #999999;
 width : 546px;
 height : 434px;
 position: relative;

}

#pieces .piece {

 width : 32px;
 height : 36px;
 position : relative;
 cursor : pointer;
 float : left;

}

#pieces .track {

 width : 32px;
 height : 36px;
 position : relative;
 float : left;

}

#pieces .track2 {

 width : 32px;
 height : 36px;
 position : relative;
 float : left;
 background : red;

}

#gameLogo {
 
 margin-top : 60px;
 border : 1px solid #999999;
 left : 607px;
 width : 187px;
 height : 73px;
 background : url(../img/logo.gif);
 position: absolute;

}

#scorePanel {

 border : 1px solid #999999;
 left : 607px;
 top : 200px;
 width : 187px;
 height : 30px;
 position : absolute;

}

#score {

 border : 1px solid #999999;
 left : 607px;
 top : 240px;
 width : 187px;
 height : 30px;
 position : absolute;

}

#timePanel {

 border : 1px solid #999999;
 left : 607px;
 top : 300px;
 width : 187px;
 height : 30px;
 position : absolute;

}

#time {

 border : 1px solid #999999;
 left : 607px;
 top : 340px;
 width : 187px;
 height : 30px;
 position : absolute;

}

#button {

 border : 1px solid #999999;
 left : 607px;
 top : 400px;
 width : 187px;
 height : 30px;
 position : absolute;


}

 

JS部分

game.js

 

// 游戏控制类
var Game = {

 // 游戏背景
 gamePanel : null,
 
 // 分数
 score : 0,
 
 // 时间
 time : 0,
 
 // 图片映射表
 pieceMap : null,
 
 // 图片列表
 pieceList : [],
 
 // 图片列表不包含图片
 pieceImgList : [],
 
 // 图片随机数列表
 randomList : [],
 
 // 轨迹列表
 trackList : [],

 // 游戏是否开始
 isGameBigin : false,
 
 // 游戏是否结束
 isGameOver : false,
 
 // 游戏是否重置
 isGameReset : false,
 
 // 图片元素是否第一次点击
 isFirstClick : true,
 
 // 开始游戏
 start : function() {
 
  document.getElementById("start").disabled = true;
  document.getElementById("reset").disabled = false;
 
  if (this.isGameReset) {
   
   this.isGameOver = false;
   this.startTime();
   
   return;
  
  } else if (this.isGameBegin) {
  
   return;
   
  } else {
  
   this.init();
   
   return;
   
  }
 
 },
 
 reset : function() {
  
  document.getElementById("start").disabled = false;
  document.getElementById("reset").disabled = true;
  
  this.clear();
  this.initPieces();
  this.initImgPieces();
  this.time = 0;
  document.getElementById("time").innerHTML = 0;
  
  this.score = 0;
  document.getElementById("score").innerHTML = 0;
  
  this.isGameReset = true;
  this.isGameBegin = true;

 },
 
 // 初始化
 init : function() {

  if (this.isGameBegin) {
  
   return;
  
  }
  
  this.pieceMap = new Map();
  
  var _this = this;
  
  this.time = 0;
  this.startTime();
  
  this.gamePanel = document.getElementById("pieces");

  this.initPieces();
  this.initImgPieces();

  this.isGameBegin = true;

 },
 
 // 将随机生成的150张图片添加进画布
 initPieces : function() {
 
  var _this = this;
 
  this.initRandomList();
  
  // 打乱随机列表排序
  this.messRandomList();
   
  for (var i = 0; i < 204; i ++) {
  
   var piece = new Piece(this);
   this.pieceList.push(piece);
   
   var x = (i%17);
   var y = Math.floor(i/17);
   
   this.pieceMap.put(x+","+y, piece);
   
   piece.setPosition(x, y);
   this.gamePanel.appendChild(piece.dom);
   
   if (x == 0 || x == 16 || y == 0 || y == 11) {
    
    piece.track = document.createElement("div");
    piece.track.className = "track";
    piece.dom.appendChild(piece.track);
    piece.isTracked = true;
    
    continue;
   
   } else {
   
    if (x == 1 || x == 15 || y == 1 || y == 10) {
    
     piece.setAtEdge(true);
    
    }
    
    this.pieceImgList.push(piece);
        
   }
         
  }
 
 },
 
 // 初始化图片
 initImgPieces : function() {

  for (var i = 0; i < this.pieceImgList.length; i ++) {
  
   this.pieceImgList[i].initImg();
   this.pieceImgList[i].img.src = "img/pieces/"+this.randomList[i]+".gif"
   this.pieceImgList[i].setImgSrc(this.pieceImgList[i].img.src);   
       
   // 执行图片点击事件
   this.pieceImgList[i].onClick();

  }
  
 },
  
 // 初始化随机表
 initRandomList : function() {

  // 获取随机数列，成双出现
  for (var i = 0; i < 75; i ++) {
  
   var random = parseInt(Math.random()*22*10000, 10);
   var number = random%23;
   this.randomList.push(number);
   this.randomList.push(number);
  
  } 
 
 },
 
 // 打乱随机表
 messRandomList : function() {
 
  for (var i = 0; i < this.randomList.length; i ++) {
  
   var random = parseInt(Math.random()*15*10000, 10);
   var number = random%150;

   var temp;
   temp = this.randomList[i];
   this.randomList[i] = this.randomList[number];
   this.randomList[number] = temp;
  
  }  
 
 },
 
 // 开始计时
 startTime : function() {
 
  var _this = this;
 
  if (this.isGameOver) {
  
   return;
  
  } else {
   
   this.time ++;
   document.getElementById("time").innerHTML = this.time;
   this.isGameBegin = true;
   setTimeout(function() {_this.startTime();}, 1000);
  
  }
 
 },
 
 // 清除
 clear : function() {
 
  for (var i = 0; i < this.pieceList.length; i ++) {

   this.gamePanel.removeChild(this.pieceList[i].dom);  
  
  }
  
  this.pieceList = [];
  this.randomList = [];
  this.pieceImgList = [];
  
  this.isGameOver = true;
  this.isGameBegin = false;
  
 }

}

window.onload = function() {
 
 document.getElementById("start").disabled = false;
 document.getElementById("reset").disabled = true;

}

// 游戏开始入口
function Start() {
 
 Game.start();

}

// 游戏重置入口
function Reset() {

 Game.reset();
 
}

 

 

映射类的实现

Map.js

var Map = function(){
 
 this.data = [];
 
}

Map.prototype = {

 put : function(key, value) {
 
  this.data[key] = value; 
 },
 
 get : function(key) {
 
  return this.data[key];
 },
 
 remove : function(key) {
 
  this.data[key] = null;
 
 },
 
 isEmpty : function() {
 
  return this.data.length == 0;
 },
 
 size : function() {
 
  return this.data.length;
 }

}

 

图片的实现类

piece.js

var Piece = function(game) {

 // 游戏对象
 this.game = game;
 
 // 是否为边缘元素
 this.isEdge = false;

 // 是否挨着边缘元素
 this.atEdge = false;
 
 // 图片dom元素
 this.dom = null;
 
 // 图片元素
 this.img = null;
 
 // 图片元素来源
 this.src = null;
 
 // 轨迹元素
 this.track = null;
 
 // 是否可以作为轨迹
 this.isTracked = false;
  
 // 选中标记元素
 this.selected = null;
 
 // 图片横向排列
 this.x = 0;
 
 // 图片纵向排列
 this.y = 0;
 
 // 图片闪烁Id
 this.flashId = null;
 
 // 图片是否点击
 this.onClicked = false;
 
 // 闪烁次数
 this.flashCount = 0;
 
 this.init();

}

Piece.prototype = {

 // 初始化
 init : function() {

  this.dom = document.createElement("div");
  this.dom.className = "piece";  
  
  this.selected = document.createElement("img"); 
   
 },
 
 // 初始化图片
 initImg : function() {
 
  this.img = document.createElement("img");
  
  this.dom.appendChild(this.img);
 
 },
 
 // 满足算法后初始化track元素
 initTrack : function() {

  if (this.flashId != null) {
   
   // 停止闪烁
   this.stopFlash();
   
  }  
  
  //alert("initTrack middle");
  if (this.track != null) {
  
   return;
  }
  
  this.onClicked = false;
  
  this.dom.removeChild(this.img);
 
  this.track = document.createElement("div");
  this.track.className = "track";
  this.dom.appendChild(this.track);
 
 },
 
 // 位图片设置来源
 setImgSrc : function(src) {

  this.src = src;
 
 },
 
 // 为图片设置二维排列位置
 setPosition : function(x, y) {
 
  this.x = x;
  this.y = y;
 
 },
 
 // 为图片设置选中元素
 setSelected : function() {
  
  if (this.flashCount ++ % 2 == 0) {
   
   //this.dom.removeChild(this.img);
   //this.selected.src = "img/selected.gif";
   //this.dom.appendChild(this.selected); 
   this.img.src = "img/pieces/flash.gif";
  
  } else {
   
   //if (this.selected != null) {
      
   // this.dom.removeChild(this.selected);   
   
   //}
   
   this.img.src = this.src;
   //this.dom.appendChild(this.img);
  
  }
     
 },
 
 // 设置是否为边缘元素
 setEdge : function(isEdge) {
 
  this.isEdge = isEdge;
 
 },
 
 // 设置是否挨着边缘元素
 setAtEdge : function(atEdge) {
 
  this.atEdge = atEdge;
 
 },
 
 // 开始闪烁
 flash : function() {
  
  var _this = this;
  this.flashId = setInterval(function() {_this.setSelected();}, 500);

 },
 
 // 停止闪烁
 stopFlash : function() {
 
  clearInterval(this.flashId);
  
  if (this.flashCount % 2 == 1) {
   
   //if (this.selected != null) {
   
   // this.dom.removeChild(this.selected);
   
   //}
   
   this.img.src = this.src;
   //this.dom.appendChild(this.img);   
  
  }
   
 },
  
 // 对象被选择的内部函数
 onClick : function() {
  
  if (this.onClicked) {
   
   return;
  
  }
 
  var _this = this;
  
  this.img.onclick = function() {
  
   if (!document.getElementById("start").disabled) {
   
    return;
   
   }
  
   if (_this.onClicked) {
   
    return;
   
   }

   if (_this.checkPiece()) {

    return;
   
   }
   
   _this.flash();
   _this.onClicked = true;
  
  };
 
 },
 
 // 检查是否有被点击的图片
 checkPiece : function() {
  
  for (var i = 0; i < this.game.pieceList.length; i ++) {
   
   if (this.game.pieceList[i].onClicked && !this.game.pieceList[i].equal(this)) {
    
    if (this.game.pieceList[i].equalImage(this)) {
     
     //alert("The same Image");
     this.searchTrack(this.game.pieceList[i]);
    
    } else {
     
     this.game.pieceList[i].stopFlash();
     this.game.pieceList[i].onClicked = false;
     this.onClicked = false;
     
     return false;
    
    }
    
    return true;
   
   } else {
   
    continue;
   
   }
  
  }
  
  return false;
 
 }, 
 
 // 是否为同一个对象
 equal : function(piece) {
 
  return (this.x == piece.x && this.y == piece.y);
 
 },
 
 // 是否为同一个图片
 equalImage : function(piece) {

  return this.src == piece.src;
 
 },
 
 // 搜寻路径
 searchTrack : function(piece) {
  
  if (this.isNear(piece)) {
    
   this.linkTrack(piece);
   
   return;
  }  
  
  if (this.isReach(piece) || this.isReach2(piece)) {
    
   this.linkTrack(piece);
   
   return;
  }  
    
 },
 
 // 是否相邻
 isNear : function(piece) {
 
  var a = (Math.abs(piece.x - this.x) == 1) && (piece.y == this.y)
   || (Math.abs(piece.y - this.y) == 1) && (piece.x == this.x);
 
  return a;
 },
 
 // 直线
 isStraightReach : function(piece) {
  //alert("isStraightReach");
  if (this.isNear(piece)) {
   
   return true;
  
  }
  
  var a = false;
  var b = false;

  // 沿y轴方向搜索
  if (this.x == piece.x) {
   //alert("!!!!!!!!!!!");
   for (var i = this.min(this.y, piece.y) + 1; i < this.max(this.y, piece.y); i ++) {
    //alert("this.x == piece.x: " + piece.x + "," + i);
    if (this.game.pieceMap.get(piece.x + "," + i).isPass()) {
    
     a = true;
     
     this.game.trackList.push(this.game.pieceMap.get(piece.x + "," + i));
     
     continue;
    } else {
    
     a = false;
     this.game.trackList = [];
     
     return a; 
    }
   
   }
      
  }
  
  // 沿x轴方向搜索
  if (this.y == piece.y) {
   //alert("!!!!!!!!!!!");
   for (var i = this.min(this.x, piece.x) + 1; i < this.max(this.x, piece.x); i ++) {
    //alert("this.y == piece.y: " + i + "," + piece.y);
    if (this.game.pieceMap.get(i + "," + piece.y).isPass()) {
     
     b = true;
     this.game.trackList.push(this.game.pieceMap.get(i + "," + piece.y));
     
     continue;
    } else {
    
     b = false
     this.game.trackList = [];
     
     return b;
    }
   
   }
   
  }

  return a || b;
 },

 
 // 拐一次弯搜索
 isReach1 : function(piece) {
  //alert("isReach1");
  var corner_1 = this.game.pieceMap.get(this.x + "," + piece.y);
  var corner_2 = this.game.pieceMap.get(piece.x + "," + this.y);
      
  var _this = this;

  
  if ((_this.isStraightReach(corner_1))
   && (corner_1.isStraightReach(piece))
   && corner_1.isPass()) {
   
    //alert("corner_1: " + this.x + "," + piece.y);
    this.game.trackList.push(corner_1);
   
    return true;
  }
 
  if ((_this.isStraightReach(corner_2))
   && (corner_2.isStraightReach(piece))
   && corner_2.isPass()) {
    //alert("corner_2: " + piece.x + "," + this.y);
    this.game.trackList.push(corner_2);
   
   return true;
  }

  return false;
 },
 
 // 直接或拐一次弯搜索
 isReach : function(piece) {
  
  var a = this.isStraightReach(piece);
  
  var b = this.isReach1(piece);
    
  return a || b;
 },
 
 // 拐两次弯搜索
 isReach2 : function(piece) {
   
  // 沿x轴正向搜索
  for (var i = this.x + 1; i < 17; i ++) {
   
   if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {
    
    this.game.trackList = [];
    
    break;
    
   } else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
    && this.game.pieceMap.get(i + "," + this.y).isPass()) {
    
    this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));
     
    return true;
   } 
  
  }
  
  // 沿x轴搜索
  for (var i = this.x - 1; i >= 0; i --) {
   
   if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {
   
    this.game.trackList = [];
    
    break;
    
   } else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
    && this.game.pieceMap.get(i + "," + this.y).isPass()) {
   
    this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));
     
    return true;
   }
  
  }
  
  // 沿y轴搜索
  for (var i = this.y - 1; i >= 0; i --) {
   
   if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {
    
    this.game.trackList = [];
    
    break;
    
   } else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
    && this.game.pieceMap.get(this.x + "," + i).isPass()) {
    
    this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));
     
    return true;
   }
  
  }

  // 沿y轴正向搜索
  for (var i = this.y + 1; i < 12; i ++) {

   if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {
    
    this.game.trackList = [];
    
    break;
   } else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
    && this.game.pieceMap.get(this.x + "," + i).isPass()) {
    
    this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));
     
    return true;
   }
  
  }
  
  return false;
 },
 
 // 路径连接
 linkTrack : function(piece) {
 
  this.initTrack();
  piece.initTrack();
  this.changeScore();
  this.showTrack(piece);
   
 },
 
 // 显示足迹
 showTrack : function(piece) {
 
  this.game.trackList.push(piece);
  this.track.className = "track2";
  
  for (var i = 0; i < this.game.trackList.length; i ++) {
   //alert(i);
   this.game.trackList[i].track.className = "track2";
  
  }
  
  var _this = this;
  setTimeout(function() {_this.hideTrack()}, 500);
 
 },
 
 // 隐匿足迹
 hideTrack : function() {
 
  for (var i = 0; i < this.game.trackList.length; i ++) {
   
   this.game.trackList[i].track.className = "track";
   
  }
   
  this.game.trackList = [];
  this.track.className = "track";
  this.isTracked = true;
  
 },
 
 // 分数增加
 changeScore : function() {
   
  this.game.score += 100;
  document.getElementById("score").innerHTML = this.game.score;  
 
 },
 
 min : function(a, b) {
 
  if (a < b) {
  
   return a;
  
  } else {
  
   return b;
   
  }
  
 },
 
 max : function(a, b) {
 
  if (a > b) {
  
   return a;
  
  } else {
  
   return b;
  
  }
 
 },
 
 // 判断是否通过
 isPass : function() {
 
  return this.track != null;
 }

}

zhangjinpeng66
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
连连看游戏代码
05-13
用c++开发一款简单的连连看游戏
c++ map初始化_C/C++编程笔记：C语言实现连连看游戏，小白练手项目（源码分享）...
weixin_39576104的博客
11-23 149
本篇文章分享看题目就知道是写给初学者的，学的比较好的小伙伴也可以将自动算法等一些知识给加进去，希望对大家有帮助！好了，当我们所有的准备工作做好之后，我们就可以来编写我们的C语言连连看游戏了！其实这个游戏设计起来真的是很简单的一种，本例用到的知识点主要有：数组，结构体，分支结构，图形库函数。编写准备：编译软件(VS2013)，连连看图片素材，easyX图形库插件，有需要可以关注笔者微信公众...
cocos 写 连连看 小游戏主要逻辑(Ts编写)算法总结
最新发布
weixin_52663662的博客
05-24 1364
游戏界面展示。
程序设计题：连连看
hujian678876w的博客
02-28 607
程序设计题：连连看 1 问题描述 连连看是一个经典的游戏，本课题要求实现一个文本界面的连连看游戏。 2 功能要求 要能提供以下几个基本功能： （1）定义一个矩阵，随机产生字符布置地图，例如下面这个 4x4 戏者输入坐标，如（1，2）、（1，4），表示第一行第二列的字符与第一行第四列 的字符。如果这两个字符相同，并且可以通过直线、一折连线或两折连线相连，中间没有其 他字符阻挡，则可以消去这两个位置...
猿创征文｜JAVA 实现《连连看》游戏
热门推荐
毅慎的博客
08-29 2万+
连连看
7岁孩子都能学的编程，C++编写的连连看游戏，又逆天了！
07-14 481
本次游戏对象为某连连看游戏通过分类判断法编写的一个连连看小游戏！ 试玩发现需要进行棋子确定和模拟鼠标操作，通过 CE 确定棋盘基址获得游戏数据，再利用算法确定目标，执行鼠标操作，要用的 API 函数简单介绍LRESULT SendMessage（HWND hWnd，UINT Msg，WPARAM wParam，LPARAM IParam）； 其中 Msg 为 WMLBUTTONDOWN，W...
基于c语言实现的连连看游戏源码
05-11
【基于C语言实现的连连看游戏源码解析】 在计算机编程的世界中，C语言是一种基础且强大的编程语言，被广泛用于系统开发、嵌入式系统以及各种软件项目。本项目是一个利用C语言编写的连连看游戏，对于学习C语言的学生...
连连看游戏Python实现代码.zip
02-08
在本项目中，"连连看游戏Python实现代码.zip" 是一个包含了使用Python编程语言实现的连连看游戏的源代码文件。连连看是一款经典的休闲益智游戏，玩家需要找到并消除两个相同图案的方块，直到所有方块都被消除。...
python实现连连看游戏
09-17
在本文中，我们将深入探讨如何使用Python编程语言来实现一个简单的连连看游戏。连连看是一款广受欢迎的休闲游戏，玩家需要找出并消除屏幕上成对出现的相同图标，直到所有图标都被消除。以下是实现这个游戏的关键概念...
Python连连看小游戏源代码
12-29
- **Tkinter库**：Python标准库中的Tkinter是用于创建图形用户界面的库，用于构建连连看游戏的窗口和控件。 - **控件**：如Button（按钮）、Canvas（画布）等，用于显示游戏元素和交互操作。 - **事件处理**：...
VIsual C++实现的连连看游戏程序
12-04
《Visual C++ 实现连连看游戏...总结，利用Visual C++实现连连看游戏，不仅涉及到C++编程基础，还包括图形用户界面设计、事件处理、算法应用等多个方面。这样的项目实践有助于提升开发者综合的编程能力和问题解决能力。
经典游戏程序设计——连连看
10-23
经典游戏程序设计——连连看 Visual C++
连连看游戏课程设计+源代码
05-25
连连看游戏课程设计+源代码，pdf，42页
连连看游戏课程设计（C++）
10-21
连连看游戏课程设计（C++），有实验报告，好东西，原来的是vc6.0下的，我改过后在vs2010下运行有结果，游戏比较简单
C++连连看小游戏代码
11-02
连连看小游戏，实现基本功能，可以在指定时间内计时完成任务，有不同的关卡
windows 连连看
01-30
windows课堂期末做的一个小游戏： 连连看，可以直觉运行，无bug
编写“连连看”程序
qq_52191741的博客
12-15 762
南航2020数据结构课设
编程实现连连看机器人外挂
草原Song
06-02 930
在《黑客防线》发表过的一篇，没什么含量，       连连看是一款非常不错的休闲游戏，相信大家都玩过。这里的连连看是单机版V3.0，网上曾经有过此类外挂，不过只能通过修改内存游戏数值提高生命值和提示数量。显然在自动化日益发达的今天，它不能满足我们完全自动化的要求。于是乎，机器人玩游戏提上日程。编程工具：Delphi7.0 ；连连看单机版V3.0。    unit Unit1;interfa
Java 编写的连连看游戏(第三个) 窗体程序 直接运行
bangxiecode的博客
02-12 450
连连看游戏 ，可以直接用来做课程设计或者毕业设计；代码功能完善，下载后可以直接运行！！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值