html实现拼图游戏,html、css、js实现拼图游戏

为了进一步熟悉html、css、js，做个一个小游戏加深对相关知识的理解。界面略显粗糙。

目录

环境：

相关文件：

游戏效果：

如何得到特定像素的图片

步骤：

1.pic.html文件

2.pic.css文件

3.pic.js文件

环境：

Visual Studio Code

相关文件：

pic.html、pic.css、pic.js、600.jpg(该图片大小为600px * 600px)、200.jpg

游戏效果：

如何得到特定像素的图片

使用windows自带的“画图”对图片进行大小调整

步骤：

1.编写pic.html文件设计大体框架

2.编写pic.css文件对pic.html文件进行渲染

3.编写pic.js文件实现相关的功能函数

1.pic.html文件

编写html文件设计大体框架

拼图游戏

总用时:

开始

重来

2.pic.css文件

编写css文件对html文件进行渲染

*{

padding: 0;

margin: 0;

border: 0;

}

body{

width: 100%;

height: 100%;

}

/*大的框架设置像素,宽600px,高800px,边框2px,居中显示*/

#Frame{

position: relative;

width: 600px;

height: 700px;

margin: 0 auto;

margin-top: 0px;

}

#gameFrame{

position: relative;

width: 600px;

height: 600px;

display: inline-block;

background-color: azure;

}

#gameFrame div{

background-image: url(600.jpg); /*图片设置为同一张图*/

background-repeat: no-repeat;