为什么做网站要服务器 和域名ui培训多少钱

准备环节

技术：
1、GUI界面编程
2、二维数组
3、程序流程控制
4、面向对象编程

$\bullet$创建一个模块用于开发石头迷阵游戏，模块名称取名为：stone-maze
$\bullet$导入项目需要的资源包到src目录下：主要是一些图片文件，在image文件夹下
$\bullet$创建项目包：com.itheima.

1、创建石头迷阵的界面

$\bullet$定义主界面类，MainFrame继承JFrame
$\bullet$初始化窗口大小
$\bullet$初始化界面图片
$\bullet$初始化界面菜单：系统退出，重启游戏

完成代码如下：

package com.itheima;import javax.swing.*;
// 自定义窗口类，创建对象，展示一个主窗口。
public class MainFrame extends JFrame {// 设置图片位置private static final String imagePath = "stone-maze/src/image/";// 准备一个数组，用户存储数字色块的行列位置：4行4列private int[][] imageData = {{1, 2, 3, 4},{5, 6, 7, 8},{9, 10, 11, 12},{13, 14, 15, 0}};public MainFrame() {// 1、调用一个初始化方法：初始化窗口大小等信息。initFrame();// 2、初始化界面：展示数字色块。initImage();// 3、初始化系统菜单：点击弹出菜单信息是系统退出，重启游戏。initMenu();// 设置窗口可见this.setVisible(true);}private void initMenu() {JMenuBar menuBar = new JMenuBar(); // 创建一个菜单栏JMenu menu = new JMenu("系统");JMenuItem exitJi = new JMenuItem("退出");menu.add(exitJi); // 添加子菜单exitJi.addActionListener(e -> { // 添加点击事件// 退出游戏dispose();});JMenuItem restartJi = new JMenuItem("重启");menu.add(restartJi);restartJi.addActionListener(e -> { // 添加点击事件// 重启游戏});menuBar.add(menu); // 添加到菜单栏中this.setJMenuBar(menuBar);}private void initImage() {// 1、展示一个行列矩阵的图片色块依次铺满窗口（4 * 4）for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列// 拿到图片的名称String imageName = imageData[i][j] + ".png";// 2、创建一个JLabel对象，设置图片给他展示。JLabel label = new JLabel();// 3、设置图片到label对象中去。label.setIcon(new ImageIcon(imagePath + imageName));// 4、设置数字色块的位置label.setBounds(25 + j * 100, 60 + i * 100, 100, 100);// 5、把这个图片展示到窗口中this.add(label);}}// 设置窗口的背景图片JLabel background = new JLabel(new ImageIcon(imagePath + "background.png"));background.setBounds(0, 0, 450, 484);this.add(background);}private void initFrame() {// 设置窗口标题this.setTitle("石子迷宫 V 1.0");// 设置窗口大小this.setSize(465, 575);// 设置窗口关闭方式this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// 设置窗口的居中显示this.setLocationRelativeTo(null);// 设置布局方式为绝对位置定位this.setLayout(null);}
}

2、打乱顺序

$\bullet$打乱界面的图片顺序，让游戏具备可玩性：使用方法如下

打乱二维数组中的元素顺序：initRandomArray();

完成代码如下：

private void initRandomArray() {// 1、打乱数组for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列// 随机两个行列位置，让这两个位置交换。int i1 = (int)(Math.random() * imageData.length);int j1 = (int)(Math.random() * imageData.length);int i2 = (int)(Math.random() * imageData.length);int j2 = (int)(Math.random() * imageData.length);int temp = imageData[i1][j1];imageData[i1][j1] = imageData[i2][j2];imageData[i2][j2] = temp;}}}

3、控制上下左右移动

$\bullet$给窗口绑定上下左右按键事件

$\bullet$控制位置的交换
–定位当前空白色块的位置。
–根据用户点击的方位确定交换哪个数据，到数组中交换。

$\bullet$重新绘制主界面的内容
–让主界面按照二维数组的最新内容刷新界面

public enum Direction {UP, DOWN, LEFT, RIGHT;
}

完成代码如下：

package com.itheima;import javax.swing.*;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;// 自定义窗口类，创建对象，展示一个主窗口。
public class MainFrame extends JFrame {// 设置图片位置private static final String imagePath = "stone-maze/src/image/";// 准备一个数组，用户存储数字色块的行列位置：4行4列private int[][] imageData = {{1, 2, 3, 4},{5, 6, 7, 8},{9, 10, 11, 12},{13, 14, 15, 0}};// 定义两个整数变量记录当前空白色块的位置。private int row; // 当前空白色块的行位置private int col; // 当前空白色块的列位置public MainFrame() {// 1、调用一个初始化方法：初始化窗口大小等信息。initFrame();// 4、打乱数组色块的顺序，再提示图片initRandomArray();// 2、初始化界面：展示数字色块。initImage();// 3、初始化系统菜单：点击弹出菜单信息是系统退出，重启游戏。initMenu();// 5、给当前窗口绑定上下左右按键事件。initKeyPressEvent();// 设置窗口可见this.setVisible(true);}private void initKeyPressEvent() {// 给当前窗口绑定上下左右按键事件。this.addKeyListener(new KeyAdapter() {@Overridepublic void keyPressed(KeyEvent e) {// 判断当前按键的编号int keyCode = e.getKeyCode();// 判断按键编号，上下左右switch (keyCode) {case KeyEvent.VK_UP:switchAndMove(Direction.UP);// 用户按下上键，把图片上移。break;case KeyEvent.VK_DOWN:switchAndMove(Direction.DOWN);// 用户按下下键，把图片下移。break;case KeyEvent.VK_LEFT:switchAndMove(Direction.LEFT);// 用户按下左键，把图片左移。break;case KeyEvent.VK_RIGHT:switchAndMove(Direction.RIGHT);// 用户按下右键，把图片右移。break;}}});}// 控制数据交换和图片移动private void switchAndMove(Direction r) {// 判断图片的方向，再控制图片移动。switch (r) {case UP:// 上交换的条件是行必须 < 3，然后才开始交换。if (row < imageData.length - 1) {// 当前空白色块位置：rol  col// 需要被交换的位置：row + 1  colint temp = imageData[row][col];imageData[row][col] = imageData[row + 1][col];imageData[row + 1][col] = temp;// 更新当前空白色块的位置。row++;}break;case DOWN:if (row > 0) {// 当前空白色块位置：row  col// 需要被交换的位置：row - 1  colint temp = imageData[row][col];imageData[row][col] = imageData[row - 1][col];imageData[row - 1][col] = temp;// 更新当前空白色块的位置。row--;}break;case LEFT:// 左交换的条件是列必须 < 3，然后才开始交换。if (col < imageData.length - 1) {// 当前空白色块位置：row  col// 需要被交换的位置：row  col + 1int temp = imageData[row][col];imageData[row][col] = imageData[row][col + 1];imageData[row][col + 1] = temp;// 更新当前空白色块的位置。col++;}break;case RIGHT:if (col > 0) {int temp = imageData[row][col];imageData[row][col] = imageData[row][col - 1];imageData[row][col - 1] = temp;col--;}break;}// 重新刷新界面！！！initImage();}private void initRandomArray() {// 1、打乱数组for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列// 随机两个行列位置，让这两个位置交换。int i1 = (int)(Math.random() * imageData.length);int j1 = (int)(Math.random() * imageData.length);int i2 = (int)(Math.random() * imageData.length);int j2 = (int)(Math.random() * imageData.length);int temp = imageData[i1][j1];imageData[i1][j1] = imageData[i2][j2];imageData[i2][j2] = temp;}}// 定义空白色块的位置。// 去二维数组中遍历每个数据，只要发现这个数据等于0，这个位置就是当前空白色块的位置。OUT:for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列if (imageData[i][j] == 0) {// 定位空白色块的位置row = i;col = j;break OUT; // 跳出两个for循环}}}}private void initMenu() {JMenuBar menuBar = new JMenuBar(); // 创建一个菜单栏JMenu menu = new JMenu("系统");JMenuItem exitJi = new JMenuItem("退出");menu.add(exitJi); // 添加子菜单exitJi.addActionListener(e -> { // 添加点击事件// 退出游戏dispose();});JMenuItem restartJi = new JMenuItem("重启");menu.add(restartJi);restartJi.addActionListener(e -> { // 添加点击事件// 重启游戏});menuBar.add(menu); // 添加到菜单栏中this.setJMenuBar(menuBar);}private void initImage() {// 先清空窗口上的全部图层this.getContentPane().removeAll();// 1、展示一个行列矩阵的图片色块依次铺满窗口（4 * 4）for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列// 拿到图片的名称String imageName = imageData[i][j] + ".png";// 2、创建一个JLabel对象，设置图片给他展示。JLabel label = new JLabel();// 3、设置图片到label对象中去。label.setIcon(new ImageIcon(imagePath + imageName));// 4、设置数字色块的位置label.setBounds(20 + j * 100, 60 + i * 100, 100, 100);// 5、把这个图片展示到窗口中this.add(label);}}// 设置窗口的背景图片JLabel background = new JLabel(new ImageIcon(imagePath + "background.png"));background.setBounds(0, 0, 450, 484);this.add(background);// 刷新新图层，重新绘制窗口this.repaint();}private void initFrame() {// 设置窗口标题this.setTitle("石子迷宫 V 1.0");// 设置窗口大小this.setSize(463, 543);// 设置窗口关闭方式this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// 设置窗口的居中显示this.setLocationRelativeTo(null);// 设置布局方式为绝对位置定位this.setLayout(null);}
}

4、判断是否通关

$\bullet$用户每操作一步，需要立即判断是否已经通关，如果通过，需要显示胜利的标记。

完成代码如下：

package com.itheima;import javax.swing.*;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;// 自定义窗口类，创建对象，展示一个主窗口。
public class MainFrame extends JFrame {// 设置图片位置private static final String imagePath = "stone-maze/src/image/";// 准备一个数组，用户存储数字色块的行列位置：4行4列private int[][] imageData = {{1, 2, 3, 4},{5, 6, 7, 8},{9, 10, 11, 12},{13, 14, 15, 0}};// 定义一个二维数组，用于存储最终游戏成功的数据顺序private int[][] winData = new int[][] {{1, 2, 3, 4},{5, 6, 7, 8},{9, 10, 11, 12},{13, 14, 15, 0}};// 定义两个整数变量记录当前空白色块的位置。private int row; // 当前空白色块的行位置private int col; // 当前空白色块的列位置public MainFrame() {// 1、调用一个初始化方法：初始化窗口大小等信息。initFrame();// 4、打乱数组色块的顺序，再提示图片initRandomArray();// 2、初始化界面：展示数字色块。initImage();// 3、初始化系统菜单：点击弹出菜单信息是系统退出，重启游戏。initMenu();// 5、给当前窗口绑定上下左右按键事件。initKeyPressEvent();// 设置窗口可见this.setVisible(true);}private void initKeyPressEvent() {// 给当前窗口绑定上下左右按键事件。this.addKeyListener(new KeyAdapter() {@Overridepublic void keyPressed(KeyEvent e) {// 判断当前按键的编号int keyCode = e.getKeyCode();// 判断按键编号，上下左右switch (keyCode) {case KeyEvent.VK_UP:switchAndMove(Direction.UP);// 用户按下上键，把图片上移。break;case KeyEvent.VK_DOWN:switchAndMove(Direction.DOWN);// 用户按下下键，把图片下移。break;case KeyEvent.VK_LEFT:switchAndMove(Direction.LEFT);// 用户按下左键，把图片左移。break;case KeyEvent.VK_RIGHT:switchAndMove(Direction.RIGHT);// 用户按下右键，把图片右移。break;}}});}// 控制数据交换和图片移动private void switchAndMove(Direction r) {// 判断图片的方向，再控制图片移动。switch (r) {case UP:// 上交换的条件是行必须 < 3，然后才开始交换。if (row < imageData.length - 1) {// 当前空白色块位置：rol  col// 需要被交换的位置：row + 1  colint temp = imageData[row][col];imageData[row][col] = imageData[row + 1][col];imageData[row + 1][col] = temp;// 更新当前空白色块的位置。row++;}break;case DOWN:if (row > 0) {// 当前空白色块位置：row  col// 需要被交换的位置：row - 1  colint temp = imageData[row][col];imageData[row][col] = imageData[row - 1][col];imageData[row - 1][col] = temp;// 更新当前空白色块的位置。row--;}break;case LEFT:// 左交换的条件是列必须 < 3，然后才开始交换。if (col < imageData.length - 1) {// 当前空白色块位置：row  col// 需要被交换的位置：row  col + 1int temp = imageData[row][col];imageData[row][col] = imageData[row][col + 1];imageData[row][col + 1] = temp;// 更新当前空白色块的位置。col++;}break;case RIGHT:if (col > 0) {int temp = imageData[row][col];imageData[row][col] = imageData[row][col - 1];imageData[row][col - 1] = temp;col--;}break;}// 重新刷新界面！！！initImage();}private void initRandomArray() {// 1、打乱数组for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列// 随机两个行列位置，让这两个位置交换。int i1 = (int)(Math.random() * imageData.length);int j1 = (int)(Math.random() * imageData.length);int i2 = (int)(Math.random() * imageData.length);int j2 = (int)(Math.random() * imageData.length);int temp = imageData[i1][j1];imageData[i1][j1] = imageData[i2][j2];imageData[i2][j2] = temp;}}// 定义空白色块的位置。// 去二维数组中遍历每个数据，只要发现这个数据等于0，这个位置就是当前空白色块的位置。OUT:for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列if (imageData[i][j] == 0) {// 定位空白色块的位置row = i;col = j;break OUT; // 跳出两个for循环}}}}private void initMenu() {JMenuBar menuBar = new JMenuBar(); // 创建一个菜单栏JMenu menu = new JMenu("系统");JMenuItem exitJi = new JMenuItem("退出");menu.add(exitJi); // 添加子菜单exitJi.addActionListener(e -> { // 添加点击事件// 退出游戏dispose();});JMenuItem restartJi = new JMenuItem("重启");menu.add(restartJi);restartJi.addActionListener(e -> { // 添加点击事件// 重启游戏});menuBar.add(menu); // 添加到菜单栏中this.setJMenuBar(menuBar);}private void initImage() {// 先清空窗口上的全部图层this.getContentPane().removeAll();// 判断是否赢了if (isWin()) {// 展示胜利的图片JLabel label = new JLabel(new ImageIcon(imagePath + "win.png"));label.setBounds(124, 230, 266, 88);this.add(label);}// 1、展示一个行列矩阵的图片色块依次铺满窗口（4 * 4）for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列// 拿到图片的名称String imageName = imageData[i][j] + ".png";// 2、创建一个JLabel对象，设置图片给他展示。JLabel label = new JLabel();// 3、设置图片到label对象中去。label.setIcon(new ImageIcon(imagePath + imageName));// 4、设置数字色块的位置label.setBounds(20 + j * 100, 60 + i * 100, 100, 100);// 5、把这个图片展示到窗口中this.add(label);}}// 设置窗口的背景图片JLabel background = new JLabel(new ImageIcon(imagePath + "background.png"));background.setBounds(0, 0, 450, 484);this.add(background);// 刷新新图层，重新绘制窗口this.repaint();}private boolean isWin() {// 判断是否赢了for (int i = 0; i < imageData.length; i++) { // 遍历行for (int j = 0; j < imageData[i].length; j++) { // 遍历列// 判断当前遍历到的数据是否和winData中的数据是否一致if (imageData[i][j] != winData[i][j]) {// 如果不一致，则返回falsereturn false;}}}// 如果一致，则返回true，则显示胜利的图片return true;}private void initFrame() {// 设置窗口标题this.setTitle("石子迷宫 V 1.0");// 设置窗口大小this.setSize(463, 543);// 设置窗口关闭方式this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// 设置窗口的居中显示this.setLocationRelativeTo(null);// 设置布局方式为绝对位置定位this.setLayout(null);}
}

5、统计移动步骤，重启游戏

$\bullet$每成功移动一步，都需要累加一次步数
$\bullet$定义一个变量用于累加步数，并实时展示到界面上

6、拓展问题

$\bullet$数字华容道的乱序操作，并不是可以随意打乱的，必须满足一定的算法去打乱顺序，这样才是有解的，才能让玩家恢复到有序。有没有简单的算法???