简单的js拼图游戏代码（java拼图游戏代码）

今天给各位分享简单的js拼图游戏代码的知识，其中也会对java拼图游戏代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js编写的小游戏有哪些
• 2、Authorware怎么做拼图游戏？可以发一份简单的
• 3、用VB制作拼图游戏，求代码
• 4、javascript如何写16格拼图游戏
• 5、cocos creator制作一个简单的拼图游戏

js编写的小游戏有哪些

有是有，但并不是很多，而且都是贪吃蛇之类的，非常小的游戏，即便是页游也一样。

能运行在浏览器端的语言，确实只有JS，但在开发阶段，却并不一定要使用JS写。而是用其他语言写，直接使用JS写游戏，实在太自虐了。

JS本身的缺点非常严重，如果只是写DOM的话，其实并没什么感觉，因为代码量太少。

但如果写类似游戏这种复杂逻辑，代码量一变大，瞬间就令人崩溃了。弱类型，回调地狱问题，即便将来版本更新到ES10，也不可能完全解决。

如果你看过一个游戏项目的JS源码，你会发现一个非常恐怖的现象。在代码的最底部，有几百个，甚至几千个大括号。。。。所有大型程序的JS源码，拉到最底部，大概都是长这个样子的：

} } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } }.Listen(127.0.0.1) } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } }

大括号的数量还必须绝对精准，少一个，或者多一个，都无法正常运行。。。这就是平时所说的回调地狱。由于JS项目总是函数里面套函数，层层相套，这叫做回调函数。层数一多，就算你是N年的老手，也照样懵比。。。。

所有的游戏项目，都比网页特效的代码量要多的多。。。比如写一个斗地主，就需要4，5万行的JS代码。。。。。最底部的大括号数量，轻松上千。。。。

弱类型的缺陷更严重，但由于解释起来篇幅会很长，所以这里就不提了。

所以为了避开JS本身太多的语法缺陷，一般游戏项目，都是使用其他语言编写，最后再通过一些手段，编译成JS。。。就如同你用一般编程语言编写，最终运行的时候，只有1和0的道理一样。。。在制作页游的时候，一般都是用强类型语言编写，最后开发完成之后，把那些强类型语言编写的代码，通过一些手段“转换”成JS代码。

“转换”成JS代码的方法有很多，其中在游戏行业比较主流的，一共有三种：

1，ActionScript语言，简称AS语言。也就是当年FLASH使用的那个语言。。。当年也曾辉煌过，后来随着FLASH的没落而逐渐没落。。。但有很多H5游戏引擎，也同样使用AS语言。比如LayaAir引擎等。

2,TypeScript语言，简称TS语言。由微软出品，微软和谷歌共同维护的一门完全符合ECMA标准的语言，可以视作JS的超集。超集这个概念怎么理解呢？就是“所有的JS语言，同时也是TS语言，而TS比今天的JS，更像未来的JS”。就比如目前的JS版本只出到了ES6或ES7。那么ES10是啥样？现在并没人见过，连ECMA组织也不知道。。。但有一点可以确定的是，它和TypeScript长的很像。而TS是包含JS的。换言之，JS本身也可以视作是TS的一部分。只是TS里的内容要远比JS多的多。这语言主要有两种用法，一是像AS语言一样结合游戏引擎，比如cocos creator，白鹭等引擎都支持。还有一种用法就是。。。结合Three.JS之类的库，完全按照JS本身的用法去使用。

3，C#语言。虽然JS得名字里面带个Java。但和它长的最像的语言，却并不是JAVA，而是C#。简单说就是：“JS的名字和JAVA有多像，语法就和C#有多像”。所以C#也比较容易转换成JS。但这并不是重点，重点是有一个超级牛的游戏引擎，是使用C#作为开发语言的。就是大名鼎鼎的Unity3D。Unity3D可以直接把C#编写的游戏项目，虚拟现实项目等，编译发布到WebGL。

Authorware怎么做拼图游戏？可以发一份简单的

Authorware自制拼图游戏

Macromedia Authorware 作为领导交互式学习和网页多媒体的最佳创作工具，具备交互性强、易学易用，流程控制图标化等特点。2002年9月5日在亚特兰大TAAC7上新鲜发布的Authorware 6.5 最新版本更为大家带来了新的惊喜，包括对Flash MX、XML的支持、增强的Rich Media支持、自定义函数支持、用户设计界面的改进等新功能。

拼图游戏相信大家都不会陌生，现在我们不妨利用Authorware来制作一个拼图游戏，借此切身体会Authorware 的强大交互设计。

首先构思一下拼图游戏的大致样子：顺序零乱的拼块分布于原始矩形方块内，游戏者通过鼠标拖拽拼块到某一目标矩形方块中，如果拖拽目的地正确，则自动对齐居中，否则退回到原始位置。游戏者在游戏过程中可“作弊”选择查看原图；中途也可选择放弃并退出游戏。如图（1）是拼图游戏的最终执行界面。

图（1）拼图游戏执行界面

制作步骤：

拼图游戏，图是主题，拼是过程，因此制作前必须准备好拼图游戏的相关图片，包括切割好的原图拼块（可选择PhotoShop或者Fireworks等图形处理工具进行切割）。一切就绪，启动Authorware 6.0开始工作！

1）设计背景与导入拼块

图（2）背景与导入拼块设计流程

如图（2）所示，“BackGround”显示图标导入拼图游戏背景。为了防止游戏者在游戏过程中意外拖动背景图片，在“BackGround”图标的计算窗口写入： Movable@"BackGround":=FALSE

群组图标“AllPart”存放的是全部拼块，一个显示图标导入一个拼块。在导入拼块时要注意把位置顺序捣乱。

为了游戏窗口的美观与合理，可更改[Modify]/[File]/[Propeties]的属性，即取消系统默认的[Title Bar]和[Menu Bar]选项，并选择[Center on Screen]选项。

存盘，调试执行程序，如图（1）所示的游戏界面显露出来了。“趁热打铁”，接下来我们继续设计拼图游戏的主体交互部分，也就是如何判断控制游戏者的拼图过程行为。

2） “退出游戏”以及“查看原图”操作设计。

在流程上添加一交互图标“pintu”，再添加一显示图标和计算图标到右侧，响应类型均为“Hot Spot”热区响应，返回类型为“Return”，如图（3）所示。

图（3） 退出游戏交互分支

动态按钮一般有三个状态：Mouse Up、Mouse Over和Mouse Down，通过热区响应可以实现动态按钮，我们就用此方法。如图（3）所示，显示图标“quit1”就相当于动态按钮中的“Mouse Over”，只要鼠标一划过热区，预定的按钮区域就改变为“quit1”显示图标的图片，属性设置如图（4）所示。即把Match选择域选择为“Curser in Area”，而把响应Erase属性选择为“Before Next Entry”，Branch属性选择为“Try Again”。

图（4）“quit1”的属性设置

只要在计算图标“quit”里输入代码：Quit（0），并设置其响应属性的Erase域为“After Next Entry”，热区属性Match选择域选择为“Single-Click”，则完成了用热区实现的“退出游戏”按钮操作功能。必须注意保证前后两个热区范围和大小一致。

同理，我们建立“查看原图”操作分支，如图（5）所示。这样游戏者在游戏过程中随时可以“作弊”查看原图，当然就降低了拼图游戏的难度，却体现了程序设计的友好性原则。

图（5）建立查看原图分支

图（5）中群组图标“yt”的二级流程图如图（5）右上角所示。其中显示图标“source”就是原图，为了防止游戏者查看原图时意外拖动原图，其计算文本为：Movable@"source":=FALSE

返回图标“Backup”可使游戏者随时查看原图并切换回游戏的当前步骤，其计算文本为：EraseIcon(IconID@"source")，即返回时擦除原图。

3） 设计游戏者的拖拽拼块行为判断控制。

首先设计游戏者正确拖拽拼块到目的地的流程。如图（6），拖动一群组图标“1”到交互的右侧，选择响应类型为“Target Area”。

图（6）拖动响应交互

调试执行程序，程序将自动暂停，等待用户设置响应属性，选择相应的拼图分块“part1”，使热区符号附到该图片上，按要求拖动“part1”拼块到目标区域，调整热区大小使其充满所在小方格，即定义对象“part1”的目标区域为整个小方格区域，同时设置属性窗口的[On Drop]选项为“Snap to Center”，即定义当物体被拖动到该区域后，将自动锁定在该区域中心；设置拖动目标区域为正确响应设置，即[Response]的[Status]属性为“Correct Response”，如图（7）所示。

图（7）正确拖放热区属性设置

拼块的拖拽过程不可能一步到位，当游戏者拖拽拼块到错误目的地时，如何处理呢？继续我们的设计之旅吧。

添加一空内容的群组图标“wrong”到“+1”的右侧。如图（8）左上属性窗口所示，设置响应类型为“Target Area”，目标对象选择为[Accept Any Object]，即对任何目标对象都是有效的。[On Drop]选择“Put Back”，即如果拖动目标对象到错误区域，则会自动返回原处。响应热区范围调整为整个屏幕，同时设置[Response]的[Status] 属性为“Wrong Response”，如图（8）右下属性窗口所示。

图（8） 错误拖放热区属性设置

存盘并执行，此时就可尝试拖动拼块“part1”到指定区域了，如果拖拽目的地错误，则返回原始位置。

同样方法，在群组图标“+1”和“-wrong”之间插入其它拼块的拖拽操作流程，这样拼图游戏的主体流程就设计完毕。

4） 游戏者经过“千辛万苦”，终于为所有拼块找到“归宿”，拼图游戏送来了“祝贺信息”，如图（9）右上所示，告诉游戏者大功告成。如何设计游戏者完成所有拼块正确拖放后的流程呢？

继续“设计之旅”的最后一站。如图（9）左下所示，拖动一群组图标到交互的最后面，响应类型为条件响应，条件表达式为：AllCorrectMatched （系统变量），其作用是当交互图标中的所有响应正确执行后条件为真并执行此分支。这样拼图游戏的所有流程就设计完毕。

图（9） 建立完成拼图响应分支

5） 存盘并打包发布，自制的拼图游戏就大功告成！是不是不敢相信Authorware中设计拼图游戏可以如此的简单？

用VB制作拼图游戏，求代码

Dim a(0 To 5) As Integer

Private Sub crearnd() '随机分配分割后的图片

Randomize

For i = 0 To 5

a(i) = Int(Rnd * 6)

If i = 2 Then

For j = 0 To i - 1

If a(j) = a(i) Then

i = i - 1

End If

Next

End If

Next

End Sub

Private Sub Form_Load()

For i = 0 To 5

Picture2(i).Width = Picture1.Width / 3

Picture2(i).Height = Picture1.Height / 2

Next i

End Sub

Private Sub spi_CLICK()

crearnd

Picture2(a(0)).PaintPicture Picture1.Picture, 0, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2, 0, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2

Picture2(a(1)).PaintPicture Picture1.Picture, 0, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2, Picture1.ScaleWidth / 3, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2

Picture2(a(2)).PaintPicture Picture1.Picture, 0, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2, 2 * Picture1.ScaleWidth / 3, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2

Picture2(a(3)).PaintPicture Picture1.Picture, 0, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2, 0, Picture1.ScaleHeight / 2, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2

Picture2(a(4)).PaintPicture Picture1.Picture, 0, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2

Picture2(a(5)).PaintPicture Picture1.Picture, 0, 0, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2, 2 * Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2, Picture1.ScaleWidth / 3, Picture1.ScaleHeight / 2

Picture2(0).Move Picture1.Width, 0

Picture2(1).Left = Picture1.Width + Picture2(0).Width: Picture2(1).Top = 0

Picture2(2).Left = Picture1.Width + Picture2(0).Width + Picture2(1).Width: Picture2(2).Top = 0

Picture2(3).Left = Picture1.Width: Picture2(3).Top = Picture2(0).Height

Picture2(4).Left = Picture1.Width + Picture2(3).Width: Picture2(4).Top = Picture2(1).Height

Picture2(5).Left = Picture1.Width + Picture2(3).Width + Picture2(4).Width: Picture2(5).Top = Picture2(2).Height

End Sub

Private Sub Picture2_DragDrop(index As Integer, Source As Control, X As Single, Y As Single)

Dim PIC As StdPicture

Set PIC = Source.Image

Set Source.Picture = Picture2(index).Image

Set Picture2(index).Picture = PIC

End Sub

在窗体上建立一个picture1和一个picture2（index）控件数组，总共包含6个图片框，然后给所有的图片框的autoredraw属性设置为true，就ok了，费了我好的劲，有问题再给我说

至于你要求的界面，我没看见你的图啊

已经发送，请查收

javascript如何写16格拼图游戏

很简单的嘛，分步走：

第一步 切图 这个用background就能实现，就是把一张图，在不同的格，利用背景的位置就行了，

并记录图片的顺序，比如 01，02，03.。。16，也就是把你切好的图作一个标记

第二步：分格，把指定的区域也就是拼图区。分成17分，16格是放图片，有一格是空白。。

第三步：随机把切好的图 显示到相应的位置上

第四步：当点击非空白的格子的时候，判断上下左右是否有空格，如果有，两者替换位置。判断当前的顺序是否跟记录的顺序一样了。如果一相，图拼好了。如果不一样，重复

cocos creator制作一个简单的拼图游戏

简介使用cocos creator2.x版本制作的拼图游戏, 移动图块, 还原最终的样子

开始, 我们分析一下这个游戏的几个要点 1, 是如何将一张完整的图片分成3*3 5*5个小图, 并且这些小图要可以保存自己的位置信息, 等一些属性 2, 是如何表示小图合集的位置, 用什么数据结构保存, 且怎么让图片逻辑, 与数据逻辑对应 3, 是如何判断游戏结束 

上图是游戏的场景结构, 可以看到2.x版本和1.x版本有一些区别, 最突出的就是新增了一个默认的carmera结点 这个我会在别的帖子内仔细介绍, 这里不再多说 

首先我们解决第一个问题, 如何将一个大图切成一个个小图, 并让这个小图保存一些属性值, 我们先新建一个脚本, puzzlePiece.ts, 

const{ ccclass, property } = cc._decorator;

@ccclass

exportclassPieceextendscc.Component{

@property({

type: cc.Texture2D

})

privatetexture: cc.Texture2D =null;

publicoriCol: number;

publicoriRow: number;

publiccurCol: number;

publiccurRow: number;

publicisBlank:boolean;

publicgetisRight(){

returnthis.curCol ===this.oriCol this.curRow ===this.oriRow;

}

publicinit(col: number, row: number, colNum: number, colWidth: number){

this.oriCol = col;

this.oriRow = row;

this.curCol = col;

this.curRow = row;

let sprite =this.node.addComponent(cc.Sprite);

// 升级2.0后setRect失效

// sprite.spriteFrame = new cc.SpriteFrame(this.texture);

// let rect = sprite.spriteFrame.getRect();

let rect = cc.rect(0,0,this.texture.width,this.texture.height);

let newRectWidth = rect.width / colNum;

let newRectHeight = rect.height / colNum;

let newRectX = col * newRectWidth;

let newRectY = (colNum - row -1) * newRectHeight;

let newRect = cc.rect(newRectX, newRectY, newRectWidth, newRectHeight);

// sprite.spriteFrame.setRect(newRect);

sprite.spriteFrame =newcc.SpriteFrame(this.texture, newRect);

this.node.width = colWidth;

this.node.height = colWidth;

this.isBlank =this.oriCol === colNum -1this.oriRow ===0;

if(this.isBlank) {

this.node.active =false;

}

}

}

将小图看做一个类, 使用texture保存图片纹理,在通过new cc.SpriteFrame(this.texture, newRect);获取某一个矩形区域内的纹理, 这样就可以把一张大图切成一张张小图, 并添加几个属性, 保存位置和其他的信息 

那么开始解决第二个问题, 我们可以采取二维数组的数据结构保存数据信息private pieceMap: Array; 讲一个个切好的小图保存在内, 然后随机移动(为了保证图片可以还原, 我采取的方法是将一个正确摆放好的小图数组, 按照游戏规定的移动方式随机移动1000次), 这样图片一定可以被还原

import{ Piece } from"./PuzzlePiece";

import{ PuzzleScene } from"./PuzzleScene";

const{ ccclass, property, executeInEditMode } = cc._decorator;

@ccclass

// @executeInEditMode

exportclassPuzzleBoardextendscc.Component{

@property(cc.Prefab)

privatepiecePrefab: cc.Prefab =null;

@property(cc.Integer)

privatecolNum: number =5;

@property(cc.Integer)

privatecolSpace: number =5;

privatecolWidth: number =0;

privatepieceMap: Array;

privateblankPiece: Piece =null;

privatepuzzleScene: PuzzleScene =null;

init(puzzleScene: PuzzleScene) {

this.puzzleScene = puzzleScene;

this.addListeners();

}

publicreset(colNum?: number){

this.colNum = colNum;

this.colWidth = (this.node.width -this.colSpace * (this.colNum +1)) /this.colNum;

this.node.removeAllChildren();

this.pieceMap = [];

for(let x =0; x

this.pieceMap[x] = [];

for(let y =0; y

let pieceNode = cc.instantiate(this.piecePrefab);

this.node.addChild(pieceNode);

pieceNode.x = x * (this.colWidth +this.colSpace) +this.colSpace;

pieceNode.y = y * (this.colWidth +this.colSpace) +this.colSpace;

this.pieceMap[x][y] = pieceNode.getComponent(Piece);

this.pieceMap[x][y].init(x, y,this.colNum,this.colWidth);

if(this.pieceMap[x][y].isBlank) {

this.blankPiece =this.pieceMap[x][y];

}

}

}

this.shuffle();

}

privateshuffle(){

for(let i =0; i 1000; i++) {

let nearPieces =this.getNearPieces(this.blankPiece);

let n = Math.floor(Math.random() * nearPieces.length);

this.exchangeTwoPiece(this.blankPiece, nearPieces[n]);

}

}

privateonBoadTouch(event: cc.Event.EventTouch){

let worldPos = event.getLocation();

let localPos =this.node.convertToNodeSpaceAR(worldPos);

let x = Math.floor((localPos.x -this.colSpace) / (this.colWidth +this.colSpace));

let y = Math.floor((localPos.y -this.colSpace) / (this.colWidth +this.colSpace));

this.puzzleScene.onBoardTouch(x, y);

}

publicmovePiece(x, y):boolean{

let piece =this.pieceMap[x][y];

let nearPieces =this.getNearPieces(piece);

for(let nearPiece of nearPieces) {

if(nearPiece.isBlank) {

this.exchangeTwoPiece(piece, nearPiece);

returntrue;

}

}

returnfalse;

}

publicjudgeWin():boolean{

for(let x =0; x

for(let y =0; y

if(!this.pieceMap[x][y].isRight) {

returnfalse;

}

}

}

this.blankPiece.node.active =true;

returntrue;

}

privategetNearPieces(piece: Piece): Array {

let nearPieces = [];

if(piece.curCol 0) {// left

nearPieces.push(this.pieceMap[piece.curCol -1][piece.curRow]);

}

if(piece.curCol

nearPieces.push(this.pieceMap[piece.curCol +1][piece.curRow]);

}

if(piece.curRow 0) {// bottom

nearPieces.push(this.pieceMap[piece.curCol][piece.curRow -1]);

}

if(piece.curRow

nearPieces.push(this.pieceMap[piece.curCol][piece.curRow +1]);

}

returnnearPieces;

}

publicexchangeTwoPiece(piece1: Piece, piece2: Piece){

this.pieceMap[piece2.curCol][piece2.curRow] = piece1;

this.pieceMap[piece1.curCol][piece1.curRow] = piece2;

[piece1.curCol, piece2.curCol] = [piece2.curCol, piece1.curCol];

[piece1.curRow, piece2.curRow] = [piece2.curRow, piece1.curRow];

[piece1.node.position, piece2.node.position] = [piece2.node.position, piece1.node.position];

}

privateaddListeners(){

this.node.on(cc.Node.EventType.TOUCH_END,this.onBoadTouch,this);

}

privateremoveListeners(){

}

}

解决第三个问题, 其实这个很简单, 因为我们已经在小图类中保存了小图本身的位置信息, 我们只需要,每次移动图片 都遍历一个二维数组判断其是否在正确的位置, 判断成功, 结束游戏  点击链接加入群聊【cocos/unity交流群】

声明 ：发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我们联系，我们将及时更正、删除，谢谢

关于简单的js拼图游戏代码和java拼图游戏代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。