用JS简单实现拼图小游戏

已于 2022-08-23 19:22:41 修改
阅读量1.6k 收藏 6
点赞数 1
文章标签： javascript
于 2022-07-19 10:30:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50751685/article/details/125866762
版权
简单实现js拼图
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        table{
            margin: 100px auto;
            border: 2px solid pink;
        }
        td{
            border: 2px solid palegreen;
            box-sizing: border-box;
            background: url(../img/6.jpg) no-repeat;
        }
    </style>
    <body>
        <button οnclick="kai()">开始</button>
        <button οnclick="xia()">下一关</button>
        <p class="p1">时间:<span>1000</span>秒</p>
        <p class="p2">步数:<span>0</span>步</p>
        <table></table>
    </body>
    <script type="text/javascript">
        let sj = document.querySelector(".p1 span");
        let bs = document.querySelector(".p2 span");
        let sjj =1000;
        let bss=0;
        let jsq;
        let btn=document.querySelectorAll("button");
        btn[1].disabled="disabled";
        let arr=[];
        let xx=3;
        let yy=600;
        创建格子();
    

最低0.47元/天 解锁文章
临叮当
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
JavaScript实现拼图游戏(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 131
JavaScript实现拼图游戏(附完整源码)
用 JavaScript 实现简单拼图游戏
weixin_42817899的博客
11-15 1601
本篇主要讲解，如何利用原生的 JavaScript   来实现一个简单的拼图小游戏。 线上体验地址：拼图 一、游戏的基础逻辑 想用一门语言来开发游戏，必须先了解如何使用这门语言来实现一些基础逻辑，比如图像的绘制、交互的处理、定时器等。 1、图形绘制 图形绘制是一切的基础，这里使用 JavaScript 在 canvas 上进行绘制。即先在 html 中创建 canvas 元素，...
亲测HTML5拼图游戏代码+图片不规则+图片可换
10-11
现在HTML5大热，但看了很多介绍，都是重点介绍CANVAS而相对忽略了SVG，我个人感觉这两个技术结合，优势互补，利用SVG的交互性和CANSVAS的绘图能力，才能更好地发挥各自的作用。 以前用纯SVG做到一个拼图的DEMO，现在改为SVG和CANVAS，花了一个星期的时间，重写了这个例子，在CHROME17和FF12中进行了测试。比纯SVG速度快。
JS实现简单拼图游戏
cnds123的专栏
06-29 652
JS实现简单拼图游戏
超简单的九宫格拼图游戏（原生js实现）
最新发布
qq_41729472的博客
04-28 281
这样写的页面是符合html最新规范的，没错，什么head，body标签统统不要，留下唯一有用的。当然，前提是你最好自己准备一张500x500绝对尺寸的图片放在img文件夹下。
前端:运用HTML+CSS+JavaScript实现拼图游戏
坚持不懈的大白的博客
09-20 6835
前一段时间突然来了一个想法，就是运用前端知识实现一个拼图游戏，但是不知道具体怎样实现。今天，想到既然实现不了现实中我们看到的那种拼块，那么就用正方形来代替吧！
用JavaScript做一个拼图游戏
热门推荐
来一颗砂糖橘
05-31 1万+
前端实现一个拼图游戏 html、css、js、jquery 喜欢的可以复制下面完整代码查看效果在自己本地查看效果 实现难度……
js实现简单滑块拼图游戏
qq_43420617的博客
10-10 787
成品效果 <body> <div id="game" style="position:relative"></div> </body> /** * js配置 */ var config = { width: 300, height: 300, img: "./img/fj.jpg", game...
【JavaScript源代码】js实现简单拼图小游戏.docx
12-29
【JavaScript源代码】js实现简单拼图小游戏 在本文中，我们将探讨如何使用JavaScript和HTML创建一个简单的拼图游戏。这个游戏的基本概念是用户通过拖动拼图块来重组一幅图像。以下是实现这个游戏的关键技术和步骤：...
js实现九宫格拼图小游戏
12-10
【JavaScript实现九宫格拼图小游戏详解】 九宫格拼图是一种常见的益智游戏，通常由9个小方块组成一个3x3的矩阵，玩家需要通过拖动或点击来重新排列这些方块，使得它们按照一定的顺序排列。在这个JS实现的小游戏中，...
基于javascript制作的拼图小游戏
02-08
【标题】基于JavaScript制作的拼图小游戏是一种利用编程语言实现的互动娱乐应用，它通过JavaScript这一前端技术，为用户提供了有趣的拼图体验。JavaScript是一种广泛应用于网页开发的脚本语言，能够实现实时动态交互...
纯js拼图游戏
11-15
自己写的一个简单的纯js拼图游戏，由canvas切图。在页面上加载一个图片，将其分成3x3的小块在屏幕上显示在随机的位置。用户可以用鼠标拖动每一块的位置。当用户把所有的小块都放置到正确的位置时，游戏结束。 加分项：可以在拖动拼图时有吸附的效果。可以利用CSS添加适当的动画效果。
Flex-Puzzle:仿美图秀秀在线拼图（Flex版）
07-09
Flex-Puzzle 仿美图秀秀在线拼图（Flex版） 1.API接口参见美图秀秀 2.配置项可见puzzle.js 2.增加文字水印及图片水印功能 3.模版参数可以动态配置 4.跨域问题： loadPhoto的图片地址服务器上需要有crossdomain.xml文件，否则图片只可以显示不可以进行像素级操作（截图，保存等）
利用原生的JavaScript实现简单拼图游戏
10-17
拼图游戏是我们大家都玩过的一款小游戏，下面这篇文章主要给大家介绍了关于如何利用原生的JavaScript实现简单拼图游戏的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
基于canvas、JavaScript实现滑动图片拼图验证
灰色头像@的博客
08-10 999
程序最重要的是滑块5，其它元素都随5的移动而变化。
拼图游戏 玩法介绍及其代码实现（有意思的JS 一）
Zhangguohao666的博客
02-20 4932
悄悄和你说，这个拼图游戏真的有可能无法复原哟
JavaScript简单实现拼图小游戏（附源码和资源）
qq_44651842的博客
07-03 3792
JavaScript代码68行，刚学JavaScript的时候写的，思想很简单，分享一下。附源码。
js 代码制作拼图游戏
weixin_52630329的博客
01-17 309
拼图游戏 游戏玩法：点击选中一个方块，在点击放在对应的方块里。 参考原图 var sortList = []; for (var a = 0; a < wt * hg; a++) { sortList.push(a); } sortList.sort(randomsort); this.sortObj.rightlist = sortList; var _i = 0, sid = 0; for (; _i < wt; _i++) { var...
Javascript实现拼图游戏
whuchlee的专栏
03-28 1114
初学Javascript，多动手，做了个拼图游戏，支持键盘和鼠标操作。运行效果如下图：js文件：function init(){ window.stepNode=document.getElementById("step"); window.timeNode=document.getElementById("time"); window.sele
用canvas写一个拼图小游戏
05-25
好的，我可以为您提供一个简单的拼图小游戏的示例代码。代码中使用了HTML5的canvas元素和JavaScript语言来实现。 HTML部分： ```html <!DOCTYPE html> <html> <head> <title>拼图小游戏</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <button id="startBtn">开始</button> <script src="game.js"></script> </body> </html> ``` JavaScript部分： ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "puzzle.jpg"; var tileSize = 100; // 每个拼图块的大小 var rows = 4; // 拼图块的行数 var cols = 4; // 拼图块的列数 var tiles = []; // 存储所有拼图块的数组 var emptyTile = {row: rows-1, col: cols-1}; // 空白拼图块位置 img.onload = function() { init(); } function init() { drawImage(); createTiles(); shuffleTiles(); drawTiles(); } function drawImage() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); } function createTiles() { for (var r = 0; r < rows; r++) { for (var c = 0; c < cols; c++) { var tile = { row: r, col: c, x: c * tileSize, y: r * tileSize, imageX: c * tileSize, imageY: r * tileSize }; tiles.push(tile); } } } function shuffleTiles() { for (var i = tiles.length-1; i >= 0; i--) { var randomIndex = Math.floor(Math.random() * i); var temp = tiles[i]; tiles[i] = tiles[randomIndex]; tiles[randomIndex] = temp; } } function drawTiles() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < tiles.length; i++) { var tile = tiles[i]; ctx.drawImage(img, tile.imageX, tile.imageY, tileSize, tileSize, tile.x, tile.y, tileSize, tileSize); } } function getClickedTile(mouseX, mouseY) { for (var i = 0; i < tiles.length; i++) { var tile = tiles[i]; if (mouseX >= tile.x && mouseX < tile.x + tileSize && mouseY >= tile.y && mouseY < tile.y + tileSize) { return tile; } } return null; } canvas.addEventListener("click", function(event) { var mouseX = event.clientX - canvas.offsetLeft; var mouseY = event.clientY - canvas.offsetTop; var clickedTile = getClickedTile(mouseX, mouseY); if (clickedTile) { if (isValidMove(clickedTile)) { moveTile(clickedTile); drawTiles(); if (isGameComplete()) { alert("拼图完成！"); } } } }); function isValidMove(tile) { if (tile.row == emptyTile.row && Math.abs(tile.col - emptyTile.col) == 1) { return true; } if (tile.col == emptyTile.col && Math.abs(tile.row - emptyTile.row) == 1) { return true; } return false; } function moveTile(tile) { var temp = { row: tile.row, col: tile.col, x: tile.x, y: tile.y }; tile.row = emptyTile.row; tile.col = emptyTile.col; tile.x = emptyTile.col * tileSize; tile.y = emptyTile.row * tileSize; emptyTile.row = temp.row; emptyTile.col = temp.col; emptyTile.x = temp.col * tileSize; emptyTile.y = temp.row * tileSize; } function isGameComplete() { for (var i = 0; i < tiles.length; i++) { var tile = tiles[i]; if (tile.row != Math.floor(i / cols) || tile.col != i % cols) { return false; } } return true; } document.getElementById("startBtn").addEventListener("click", function() { shuffleTiles(); drawTiles(); }); ``` 代码中首先加载一张拼图图片，然后创建一个指定大小和行列数的拼图块数组，并使用shuffleTiles()方法对拼图块进行随机打乱。在绘制拼图块时，可以根据拼图块的位置和大小，从图片中截取拼图块对应的部分并绘制到canvas中。 当用户点击canvas时，根据鼠标坐标获取点击的拼图块，如果该拼图块与空白拼图块相邻且可以移动，则进行移动并重新绘制拼图块。当拼图全部拼好后，弹出提示框告知用户游戏完成。 最后，为了让用户可以重新开始游戏，我们添加了一个开始按钮，点击该按钮可以重新打乱拼图块并进行游戏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值