HTML5 Canvas拼图游戏实现-优快云博客

本文链接：https://blog.youkuaiyun.com/O0_0O__/article/details/107360381

本文介绍了如何使用HTML5的Canvas技术实现拼图游戏。首先讲述了从div版过渡到canvas版的思路，强调了在canvas中需要记录每块拼图在图片上的位置和大小。接着，详细解释了canvas.drawImage()方法的运用，并描述了拼图对象的生成，包括canvas的九宫格位置数组和图片的九宫格位置数组。最后，提供了HTML、CSS和JS的代码实现部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原身

一开始写的拼图是用div一个一个列出来的，里面放的是切好的图片。拼图小游戏（前端）

canvas版的思路

游戏结束的判定与上一个版本一样，数组的顺序达到了它对应的位置，表示游戏结束。
因为使用canvas，我们需要记录每块拼图在图片上的位置和大小，记录成数组
canvas的使用思路HTML5 Canvas学习笔记(6)拼图游戏（数字版）

canvas方法

canvas.drawImage()使用可以参照drawImage()方法

拼图对象

这里生成拼图对象传入了两个数组。
一个是canvas的九格位置数组（不可改动）canvas九格的每一格都可以放图片的任意一个图片碎片或者“白块”，以此实现“拼图”的效果；
一个是图片的九格位置数组（可打乱）；

代码部分

样式没有过多调整，能用就成

HMTL

 <!-- 流程1，选择想拼的图片 -->
   流程1，选择想拼的图片
   <div class="process1">
       <div>选择图片</div>
       <input class="file" type="file" id="ipt">
   </div>
   <!-- 流程2：切图 -->
   流程2：切图
   <div class="process2">
       <div class="img">
           <div class="mask">
           </div>
       </div>
       <button>确定</button>
   </div>
   <div class="process3">
       <canvas id ="canvas" width="500" height="500"></canvas>
   </div>

css

<style>
       .process1{
   
           width: 150px;
           height: 80px;
           position: relative;
           background: #000;
           color: #fff;
           text-align: center;
           line-height: 80px;
       }
       .file{
   
           /* visibility: hidden; */
           opacity: 0;
           width: 150px;
           height: 80px;
           position: absolute;
           left: 0;
           top: 0;
       }
       .img{
   
           margin: 0 auto;
           position: relative;
           overflow: hidden;
           width: 800px;
       }
       .mask{
   
           position: absolute;
           width: 30%;
           background-color:rgba(0, 0, 0, 0);
           box-shadow: 0 0 0 10000px rgba(0,0,0,.5);
           left: 30%;
           top: 30%;
       }
       canvas{
   
           border: 1px solid #000;
       }
   </style>

js

var ipt = document.getElementById('ipt')
       var canvas = document.getElementById('canvas')
       var contDv = document

拼图游戏Canvas版

目录

原身