《人机交互--拼图游戏实验报告优质》由会员分享，可在线阅读，更多相关《人机交互--拼图游戏实验报告优质（13页珍藏版）》请在金锄头文库上搜索。
1、人机交互-拼图游戏实验报告 人机交互 实验报告 题目趣味拼图游戏界面的设计与 实现 学院 专业 姓名 学号 班级 二O一三年一月四日 1设计内容 1.1趣味拼图： 趣味拼图 1.2面向对象： 儿童 1.3主要功能描述 该系统用Java语言实现，小朋友通过控制鼠标，实现方格的移动。 1.4人机交互设计： 考虑该系统面向小朋友，拼图的难度做的很低，而且操作简单，图片是采用卡通动画上的人物，简单并且能吸引小朋友。考虑到一直点击鼠标会有点枯燥，该系统增加了各种好玩的音效，当点击鼠标，系统会根据不同的情况配有不同的声音，增加了拼图游戏的趣味性。并且小朋友可以选择自己喜欢的模式进行拼图，考虑到面向对象为小
2、朋友，界面很友好，图片的颜色采用了比较鲜艳的颜色，主角卡通，线条清晰，各部分特点明显，也降低了拼图的难度，又不失趣味性，界面的按钮也进行了卡通形象装点。 2. 系统结构 2.1系统主界面： 系统刚开始进去是没有打乱顺序的拼图状态。 2.2系统开始界面： 该界面为打乱谁许后的状态。 2.3系统预览界面： 该界面是为方便小朋友拼图过程中没有记清楚样子设计的，能随时查看。 2.4系统设置： 该功能可以实现选取图片，小朋友可以选择自己喜爱的图片进行拼图。 2.5编码： 后台编码用了Java语言，总共设计了4个类，没有用数据库。 3界面设计 3.1拼图界面 3.1.1界面功能： 拼图主界面，总览全图。
3、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
4、,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(
5、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,
6、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
7、(拼图小游戏); 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界面设计的交互思想及交互原则： 在拼图
8、过程中通过预览，对图片的样子进行再记忆。 3.2.5主要代码： 见3.1.5. 。 3.3 开始界面 3.3.1界面功能： 图片乱序后，进行排列。 3.3.2截图： 3.3.3操作： 点击开始按钮后，图片将随机乱序排列，小朋友点击小图片按钮，图片便会往相邻的空格子移动。 3.3.4界面设计的交互思想及交互原则： 格子的大小是经过实验的，此大小既清楚又使图片显得漂亮，布局也是经过调试很多次代码找到的效果好的布局。该功能加了声音特效，点击按钮会发出趣味声音，增强趣味性。 3.3.5主要代码： public void mousePressed(MouseEvent arg0) / 方格的鼠标事件，因
9、为用到了MyCanvas中的一些方法，因此没有在card类中处理鼠标事件 click1 = new AePlayWave(didi.wav); click2 = new AePlayWave(sheep.wav); Card button = (Card) arg0.getSource(); int x1 = button.getBounds().x;/ 得到所单击方格的坐标 int y1 = button.getBounds().y; int x2 = cardNull.getBounds().x;/ 得到空方格的坐标 int y2 = cardNull.getBounds().y; if
10、(x1 = x2 & y1 - y2 = 100) / 进行比较，如果满足条件则进行交换 click1.start(); button.move(UP, 100); else if (x1 = x2 & y1 - y2 = -100) click1.start(); button.move(DOWN, 100); else if (x1 - x2 = 100 & y1 = y2) click1.start(); button.move(LEFT, 100); else if (x1 - x2 = -100 & y1 = y2) click1.start(); button.move(RIGHT
11、, 100); else click2.start(); return; cardNull.setLocation(x1, y1); this.repaint(); if (this.isFinish() / 进行是否完成的判断 / 播放音乐 success = new AePlayWave(success.wav); success.start(); JOptionPane.showMessageDialog(this, 拼图完成，太棒了！); for (int i = 0; i 8; i+) cardi.removeMouseListener(this);/ 如果已完成，撤消鼠标事件，鼠标
12、单击方格不在起作用 hasAddActionListener = false; 3.4设置界面 3.4.1功能： 通过设置，小朋友可以选择自己喜欢的卡通人物，目前只用了三个卡通人物，还可以添加更多。 3.4.2截图： 3.4.3操作：通过点击下拉列表的项目，选择喜欢的卡通人物拼图。3.4.4主要代码： public void actionPerformed(ActionEvent arg0) / 对三个按钮事件的处理JButton button = (JButton) arg0.getSource(); if (button = start) myPanel.Start(); else if
13、(button = preview) if (button.getText() = 预览) container.remove(myPanel); container.add(panelPreview); panelPreview.updateUI(); container.repaint(); button.setLabel(返回); else container.remove(panelPreview); container.add(myPanel); container.repaint(); button.setLabel(预览); else if (button = set) / 修改所选图片
