原生JavaScript实现连连看游戏(附源码)

2024-10-09 14:57:40

向大家推荐一款原生JavaScript版连连看游戏，源码下载，首页如下图所示：

首先看一下html的布局方式在index.html文件中：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>连连看</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<center>
<div id="whole">
<div id="gamePanel" tabindex="0">
<div id="pieces">
</div>
</div>
<div id="gameLogo">
</div>
<div id="scorePanel">
<span>分数</span>
</div>
<div id="score">
<span>0</span>
</div>
<div id="timePanel">
<span>时间</span>
</div>
<div id="time">
<span>0</span>
</div>
<div id="button">
<input id="start" type="button" onclick="Start();" value="开始"></input>
<input id="reset" type="button" onclick="Reset();"value="重置"></input>
</div>
</div>
</center>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/piece.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>

css文件夹下的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部分实现代码，js部分分为三个源文件即game.js、map.js、piece.js每一个源文件对应一个类，其中本游戏通过game类来操纵map和图片piece对象：
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();
}

自定义的js版映射结构map.js源文件如下：

代码如下:

图片类piece.js源文件如下：

代码如下:

以上是源文件的代码,具体的实现代码请关注CSDN中zhangjinpeng66下载。下面讲一下连连看游戏最核心的部分，js实现搜索路径。
js实现搜索路径算法首先最简单的是判断两个图片能否直线到达函数代码如下：

代码如下:

// 直线
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;
},

在拐一次弯搜索的函数中调用了直接搜索的函数，同样最复杂的拐两次弯搜索也会调用拐一次弯搜索的函数。

代码如下:

// 拐两次弯搜索
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;
},

该函数以点击的图片为中心分别沿x轴,y轴展开搜索。
以上是本游戏代码的全部内容。具体游戏源码请到CSDN中zhangjinpeng66的资源里下载。

javascript 连连看代码出炉

0 && TmpInt0 && TmpInt0 && TmpInt0 && TmpInt"; for(j=0; j"; for(i=0; i"; } else{ TmpInt--; Matrix[i][j] = 1 + Math.floor( PicMax * Math.random() ); if(TmpInt"; //添图片(webdings图标) TmpStr += String.fromChar
JavaScript编写连连看小游戏

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y:
用javascript做一个webgame连连看大家看下

最后成品代码写的仓促,没有容错,封装也不合理,只实现了核心部分,其他部分,喜欢添加的旧添加吧. 下面就开始我的教程(姑且算是教程吧,草草写点吧,时间太少,大家原谅) 以最高难度游戏级别作的分析. 第一步,大体分析看看游戏主要包含哪些元素,发现3部分,一些成对的图片块,一个能盛图片块的方盘容器,一个能连接两个图块的线. 第二步,元素分析图块:图块一共有32种不同的图案,每种图案4张,图块会相应鼠标的点击,图块会消失,图块有高度和宽度. 方盘:能承载128个图块,2维承载,横向16块,纵向8块,
C# 实现连连看功能(推荐)

本文是利用C#实现连连看的小例子,以供学习分享使用. 思路: 初始化布局(横竖十行十列,共100个单元格,每一个格一个按钮,背景图为水果图片,随机生成) . 初始化对应棋盘(用二维数组表示[0表示空白,非0表示界面对象])和页面相对应,同步操作. 判断点击的图片是否可以消掉(转化为二维数组[以水平方向,垂直方向,一个拐角,两个拐角的步骤进行判断]). 如可以消掉,隐藏图片,增加分数. 时间限制,采用倒计时方式. 涉及知识点: 线程:Thread,后台运行时间控制[倒计时方式]. 界面闪烁:当界面
原生JavaScript实现连连看游戏(附源码)

向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>
Phaser.js实现简单的跑酷游戏附源码下载

采用的物理引擎是Phaser.js 官网地址:http://phaser.io/ 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 var config = { type: Phaser.AUTO, width: 800, height: 400, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug:
Java实现贪吃蛇大作战小游戏(附源码)

目录 1.开发环境及游戏展示 1.1 游戏主界面 1.2 移动界面 1.3 奖励界面 1.4 F加速功能界面 1.5 死亡界面 2.需求分析 3.系统设计 3.1 系统总体功能设计 3.2 系统总体流程设计 4.功能设计 4.1 贪吃蛇移动及加速功能设计 4.2 贪吃蛇吃食物加速及死亡判定功能的设计 4.3 贪吃蛇主动加速功能的设计 4.4 贪吃蛇奖励机制功能的设计 5.项目结构与项目实现 5.1 项目结构及类间关系 5.2 项目完整源码 1.开发环境及游戏展示贪吃蛇大作战在设计与实验的过程中
基于Python实现贪吃蛇小游戏(附源码)

目录前言主要设计应用知识点 1.python知识点 2.pygamezero知识点功能截图代码实现 1.蛇的表示 2.蛇的前进移动 3.控制移动方向 4.游戏失败 5.食物的随机出现 6.游戏得分源码总结前言这几年人工智能技术大发展,Python因此几乎成了第一位的语言.实际上,多年来,它不仅在软件工程师中得到广泛使用,也是各行业通用的专家语言,就是说,不管孩子以后做什么,都可能用得着.准备针对我自己上小学的孩子,每周抽出些时间,通过学习他们感兴趣的小游戏,逐步把python知
纯HTML5制作围住神经猫游戏-附源码下载

HTML5围住神经猫游戏网页版是一款基于HTML5.jquery.Typescript等技术制作的围住神经猫游戏. 先给大家附上演示和源码下载,点击这里查看演示下载源码去年风靡微信朋友圈的小游戏"围住神经猫",我也试着做了一下.游戏是用Egret引擎开发的,因为Egret是用Typescript语言构建的,因此这里游戏也是用Typescript来开发的. 游戏规则: 点击画面上的灰色格子,慢慢将神经猫围起来抓住.如果猫到达游戏区边缘则游戏失败. 准备素材在网上搜索&quo
原生javascript实现连连看游戏

本文实例为大家分享了js实现连连看游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>连连看</title> <meta charset="gbk"> <style type="text/css"> body { text-align: center; } .text {text-align: center; margi
基于JavaScript实现添加到购物车效果附源码下载

我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示下载源码默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构
C语言实现扫雷游戏详解（附源码）

目录 1.游戏的功能 2.游戏实现的基本思路 2.1实现菜单给玩家选择 2.2初始化棋盘 2.3数组大小的问题 2.4对棋盘赋值 2.5打印棋盘 2.6布置雷 2.7排查雷 3.代码基本实现部分 3.1主函数部分 3.2 初始化棋盘 3.3对两个棋盘进行赋值 3.4打印棋盘 3.5布置雷 3.6排查雷 3.7函数声明 4.扫雷游戏的源代码总结 1.游戏的功能游戏的主要功能有 1:棋盘内有若干个雷 2:玩家输入要排查雷的坐标 3:在玩家输入的坐标处显示周围八个坐标有几个雷 3:若玩家将所有的
Python 写小游戏吃金币+打乒乓+滑雪(附源码)

目录 1.吃金币 2.打乒乓 3.滑雪 1.吃金币源码分享: import os import cfg import sys import pygame import random from modules import * '''游戏初始化''' def initGame(): # 初始化pygame, 设置展示窗口 pygame.init() screen = pygame.display.set_mode(cfg.SCREENSIZE) pygam
C语言实现扫雷游戏详解(附源码)

目录 1.游戏的功能 2.游戏实现的基本思路 2.1实现菜单给玩家选择 2.2初始化棋盘 2.3数组大小的问题 2.4对棋盘赋值 2.5打印棋盘 2.6布置雷 2.7排查雷 3.代码基本实现部分 3.1主函数部分 3.2 初始化棋盘 3.3对两个棋盘进行赋值 3.4打印棋盘 3.5布置雷 3.6排查雷 3.7函数声明 4.扫雷游戏的源代码总结 1.游戏的功能游戏的主要功能有 1:棋盘内有若干个雷 2:玩家输入要排查雷的坐标 3:在玩家输入的坐标处显示周围八个坐标有几个雷 3:若玩家将所有的

原生JavaScript实现连连看游戏(附源码)

相关推荐

随机推荐