人机交互--拼图游戏实验报告

人机交互

实验报告

题目趣味拼图游戏界面的设计与

实现

学院

专业

姓名

学号

班级

二O一三年一月四日

1．设计内容

1.1趣味拼图：

趣味拼图

1.2面向对象：

儿童

1.3主要功能描述

该系统用Java语言实现，小朋友通过控制鼠标，实现方格的移动。

1.4人机交互设计：

考虑该系统面向小朋友，拼图的难度做的很低，而且操作简单，图片是采用卡通动画上的人物，简单并且能吸引小朋友。考虑到一直点击鼠标会有点枯燥，该系统增加了各种好玩的音效，当点击鼠标，系统会根据不同的情况配有不同的声音，增加了拼图游戏的趣味性。并且小朋友可以选择自己喜欢的模式进行拼图，考虑到面向对象为小朋友，界面很友好，图片的颜色采用了比较鲜艳的颜色，主角卡通，线条清晰，各部分特点明显，也降低了拼图的难度，又不失趣味性，界面的按钮也进行了卡通形象装点。

2. 系统结构

2.1系统主界面：

系统刚开始进去是没有打乱顺序的拼图状态。

2.2系统开始界面：

该界面为打乱谁许后的状态。

2.3系统预览界面：

该界面是为方便小朋友拼图过程中没有记清楚样子设计的，能随时查看。

2.4系统设置：

该功能可以实现选取图片，小朋友可以选择自己喜爱的图片进行拼图。

2.5编码：

后台编码用了Java语言，总共设计了4个类，没有用数据库。

3界面设计

3.1拼图界面

3.1.1界面功能：

拼图主界面，总览全图。

3.1.2截图：

3.1.3操作：

小朋友可以通过点击鼠标实现方块的移动。

3.1.4界面设计的交互思想及交互原则：

为方便拼图，刚开始进入界面是一个没有乱序的图片，小图片大小为

100*100的正方形，看上去比较舒服。考虑到面向对象为小朋友，图片的颜色采用了比较鲜艳的颜色，主角卡通，线条清晰，各部分特点明显。体现了交互性原则。

3.1.5主要代码：

private void init(){

container = this.getContentPane();

//按钮

start = new JButton("开始");

start.setBackground(Color.getHSBColor(0,111,1213));

start.setIcon(new ImageIcon("pictrue/start.png"));

start.addActionListener(this);

preview = new JButton("预览");

preview.setBackground(Color.getHSBColor(321, 102, 002));

preview.setIcon(new ImageIcon("pictrue/preview.png"));

preview.addActionListener(this);

set = new JButton("设置");

set.setBackground(Color.getHSBColor(1111,760,2222));

set.setIcon(new ImageIcon("pictrue/set.png"));

set.addActionListener(this);

//预览面板

panelPreview = new JPanel();

panelPreview.setLayout(null);

Icon icon = new ImageIcon("pictrue/pic_" + MyPanel.pictureID + ".jpg");

JLabel label = new JLabel(icon);

label.setBounds(0, 0, 300, 300);

panelPreview.add(label);

panelNorth = new JPanel();

panelNorth.setLayout(new GridLayout(1, 3));

panelNorth.add(start);

panelNorth.add(preview);

panelNorth.add(set);

myPanel = new MyPanel();

container.add(myPanel, BorderLayout.CENTER);

container.add(panelNorth, BorderLayout.SOUTH);

this.setTitle("拼图小游戏");

this.setLocation(300, 200);

this.setSize(308, 365);

this.setResizable(false);//不可改变窗口大小

this.setVisible(true);

this.setDefaultCloseOperation(EXIT_ON_CLOSE);

}

3.2预览界面

3.2.1功能：

对整个图片整体观看，考虑到如果记不住图形的样子，可以按预览按钮，帮助定位个图片所在区域。

3.2.2截图：

3.2.3操作：

通过点击预览按钮，实现图片的整图预览，接着按钮变为返回字体。

3.2.4界面设计的交互思想及交互原则：

在拼图过程中通过预览，对图片的样子进行再记忆。

3.2.5主要代码：

见3.1.5. 。

3.3 开始界面

3.3.1界面功能：

图片乱序后，进行排列。

3.3.2截图：