返回列表 >
HTML游戏开发
时间: 2020-03-27来源：OSCHINA
前景提要
一.综合案例——拼图游戏
游戏介绍：
拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时，就完成了拼图（游戏结束）。
在“游戏”中，单击滑块选择游戏难易，“容易”为3行3列拼图游戏，中间为一个4行4列拼图游戏，“难”为5行5列拼图游戏。拼块以随机顺序排列，玩家用鼠标单击空白块的四周来交换它们的位置，直到所有拼块都回到原位置。
拼图游戏运行结果：

代码：
index.html <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>拼图游戏</title> <style> .picture{ border:1px solid black; } </style> </head> <body> <div id="title"> <h2>拼图游戏</h2> </div> <div id="slider"> <form> <label>低</label> <input type="range" id="scale" value="4" min="3" max="5" step="1"> <label>高</label> </form> <br> </div> <div id="main" class="main"> <canvas id="puzzle" width="480px" height="480px"></canvas> </div> <script src="sliding.js"></script> </body> </html>
sliding.js /* * @Author: your name * @Date: 2020-03-26 22:20:56 * @LastEditTime: 2020-03-26 22:22:51 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: