计算机科学与工程学院

专业实习报告

说明：

1、 实习指导教师由学院校内教师担任，负责组织实习、学生管理、参加实习答辩、实习成绩评定、给出实习评语等工作。

2、 实习报告由武汉工程大学计算机科学与工程学院提供基本格式（适用于学院各专业），各教研室和指导教师可根据本专业特点及实习内容做适当的调整，学生须按指导教师下达的实习报告格式认真进行填写。

3、 实习成绩由指导教师根据学生的实习情况给出各项分值及总评成绩。

4、 指导教师评语一栏由实习指导教师（校内教师）就学生在整个实习期间的表现给出客观、全面的评价，包括实习期间的表现、实习报告的质量、实习答辩的情况等。

5、 学生必须参加实习答辩，凡不参加实习答辩者，实习成绩一律按不及格处理。实习答辩小组应由2人及以上教师组成，其中校内指导教师必须参加，否则视作无效答辩。

6、 实习报告正文字数应不少于5000字，实习日记字数不少于500字/天。

7、 实习报告正文中实习目的与任务、实习地点、实习内容和要求等项，可由指导教师统一给出（自主实习除外）。学生自主实习的，可根据实习的情况自行填写以上内容。

8、 自主实习的学生还应提供由实习单位出具的实习鉴定表（复印件），与实习报告一起装订，作为参加实习答辩和评定成绩的依据。

专业实习答辩记录表

学生姓名：   杜悦      学号：  1305120209    班级：  智能科学与技术01班      

答辩地点：                                                                 

学生姓名：  杜悦    学号：  1305120209     班级：  智能科学与技术01班      

1. 实习目的

1）培养学生熟悉信息呈现与信息获取的方法；

2）培养学生理解面向用户的体验良好的软件交互设计；

3）培养学生掌握将人的知识和经验融入程序设计的思路与方法。

2. 实习任务

1）熟悉基于HTML5的UI设计；

2）熟练进行Html语言、层叠样式表CSS与CSS3的运用；

3）熟悉HTTP协议与请求格式；Json数据格式。

4）掌握基于HTTP的信息交互方法；

5）掌握基于JavaScript语言的界面布局动画和客户端信息处理。

6）熟悉信息从Web客户端获取到服务器处理再反馈到客户端的闭环处理过程。

二、实习地点

单位：北京千锋互联科技有限公司（武汉）

地址：武汉市东湖高新区光谷大道77号金融港B26栋9楼

三、实习内容和要求

1、基于HTML5的UI设计；

2、Html语言、层叠样式表CSS与CSS3的运用；

3、HTTP协议与请求格式；Json数据格式。

4、基于HTTP的信息交互；

5、基于JavaScript语言的界面布局动画和客户端信息处理。

6、完成信息从客户端获取到服务器处理再反馈到客户端的闭环处理过程。

7、按计算机学院规范撰写实习报告和实习笔记。

8、实习期间主动对实习过程中存在的问题进行监督并报告校内指导教师。

四、实习总结及分析

为期15天的实习，三周时间具体分为三大块，第一块就是网页的设置，第二块就是游戏部分具体的就是手机APP游戏，第三块就是3D效果。三部分分别用了一周的时间去了解并且实践。

    第一周，老师先带着我们了解了现在的市场形势，总的来说我们现在所处的时期就是一个尾巴，一个有机会并且薪资高的尾端，因为再过两年估计满大街的都会，在这个大趋势下，走在前面才有路可走。老师带着我们了解了H5，包含CSS,JS。先说说H5，他就是一个新生儿，并且是健康成长迅速的。打败了Flash，使我们更简洁的表达我们想要实现的效果。CSS就是网页的规范，IU。用它来效果的区域，大小，类型。JS就是一个效果表达器，实现工具。Hbuilder,就能够帮我们，用这三者来实现效果。这一周我们接触到的有：

①照片墙

运用的技术有：盒子的大小定义（包含宽高，背景色，左右居中，相对定位）；盒子内引用的照片的定义（包含宽高，边框，阴影，过渡，绝对定位，层级）；定义每张照片的旋转角度和位置；悬浮鼠标放大1.5倍。

同时，需要注意的是当放大时照片旋转角度恢复正常，鼠标离开则恢复正常大小。用层级可以使照片不会叠加在一起或者相互遮挡。

②幽灵按钮

    这图标是老师事先拷给我们的，这里用到了H5和CSS。首先是定义行级元素，给按钮定义类。用div定义出mission，play，touch三部分。

进入CSS：定义边框距离；盒子的body为黑色；定义按钮背景（图片路径，不平铺，上下居中，左右居中）；定义hover（动画旋转360，放大1.5倍）；定义按钮（边框，文字颜色，加粗，居中，背景图，不平铺，绝对定位）

这时候加一个效果，鼠标悬浮时，从上下左右飞进线，同时进入后消失；鼠标离开按钮，四条线按照原来的轨迹飞出。需要设置100%是外层盒子的宽高的100%。从-100%的位置飞进，长度和按钮盒子的四边相同。

③CANVAS（小球喷泉、移动小球）

这里用到了两个新知识，一个是JS，还有就是canvas。

先说简单的，就是一个位置移动，在移动的同时放大缩小前进后退的过程。同样的，对基本信息定义（宽高，背景色，圆，绝对定位，距离边框的位置）；动画关联（名字，时间，线性执行，无限执行）；定义关键帧动画（从0%到100%分为10段，位置交叉变换，大小在5和1之间交换，颜色不同）

再说小球喷泉。用canvas画圆（创建canvas元素，设置大小和分辨率，设置背景色）；将canvas插入body；取出画笔；创建数组；开启定时器（要执行的方法，执行间隔）；清除画布；随机产生坐标存入数组；绘制数组中所有的粒子并且更新坐标；定义粒子类（定义属性，y方向上的速度）；定义方法（绘制自身）；定义移动位置的方法（更新y坐标）；产生随机颜色。

④隐藏的导航

先定义菜单列表ul（母婴用品，电动牙刷，衣帽，袜子，鞋子，背包）；定义列表盒子的宽高和相对定位；定义每一栏（display是控件的css属性之一，表示的是显示模式。none表示不显示在网页上，但是代码存在；bolck是此元素将显示为块级元素，此元素前后会带有换行符。这里用block）；给每一栏一个标签（1,2,3）；为标签定义大小背景色；给整个列表一个向左的-80px，是列表隐藏，只露出标签；调用关键帧动画（0%和100%，在100%是沿x移动80px）；还有鼠标移开后，列表退回的动画。

第二周，主要是学习了关于手机上的工具，现在用H5写的游戏越来越多，用到了一个类库：jQuery。

①手机绘画工具

    用到了CSS，JS（jQuery），manifest.json，canvas。

    创建canvas；定义颜色列表；画笔粗细滚动条；橡皮擦按钮。进入CSS，定义大小盒子的宽高和背景色；将颜色列表用弹性盒子封装，并且去掉列表样式。给定颜色列表中按钮对应的颜色。进入JS，获取笔，画布，canvas，颜色，粗细，位置。

    当程序所处在绘图状态（进行基本设置，绘图监听，调用颜色）；更新位置，监听滚动条，为橡皮擦按钮添加响应。

②微信场景页

    这个主要就是每一页场景页的切换，以及场景页背景，文字的出现效果。

③TOM猫

    这是一个关键帧动画，每一帧的动画老师都给我们了，我们只需要播放动画，把播放时间和对应按钮定义好就可以了。

④音乐播放器

对于音乐播放器我们并不陌生，首先就是把页面分为三部分，首部显示播放器的名字，中间是播放列表，下部分是切换暂停按钮。我们要实现的很简单：切换歌曲，暂停播放。

向下切换和向上切换要判断是否到顶。当前播放歌曲的背景改变。

⑤坦克大战

    简易的坦克大战，我方和敌方。要实现的点：释放子弹，碰触到子弹则被消灭；敌方坦克随机出现，运动轨迹靠近我方；上下左右键控制坦克（8方位）。

第三周，主要进行的就是3D的些许接触，做了一个飞机。主要思想就是用二维的坐标写出3D的效果。那么视角很重要，另外就是阴影的设置。大多代码都在构造飞机本身，并且把每个部件组合到一起，并且制造运动的效果。

三周的学习任务坐下来，积累了很多动手的经验，对于查错有了更快的速度。我还发现其实思路很重要。一个项目在手，首先从最简单的，一步步的添加效果，并且注意冲突。

五、实习体会

    也许我们的实习和别人的不太一样，我们并没有走进社会，没有走出学校，没有进入工作单位，而是在一个外校老师的带领下，跟着他做了三周的项目。不过要比我们平常上课更直接一些。学校里教的是原理，用的是理论；这个实习学的就是思路，代码。变相的也告诉了我们学校和外面的差别。

    进入大学来已经快要忘记每天早出晚归，坐在那一坐坐一天的日子了。我想我们大概过的太安逸了些。实训的内容很多，给我一种我得到了很多，亦或许我什么也没得到的感觉。通过老师的讲解，跟着老师的思路，照着他编写的代码，我们很快就看到了成果，可是脱离老师之后我们又能得到多少？我现在不得而知，或许有一天我用到了如今接触到的也不一定。

    虽说这种实习和我想的有许多偏差，但是我也欣然接受了，毕竟这也是一种学习。和去社会上磨砺，接触现实，了解企业上下级关系不同的另一种学习，这可能更会让我懂得自己想要些什么。我们都在学习着，进步着。

    时间也许不长，我们接触的或许不多，我能吸收的或许只有些许，但我也是感谢的。经过这段时间的实习，我主要有以下几点感想：

第一，要有坚持不懈的精神

    作为在校生，我们不管到哪家公司，一开始都不会立刻给工作我们做，一般都是先让我们熟悉公司的工作环境，时间短的要几天，时间长的要几周，或更长的时间，在这段时间里很多人会觉得很无聊，没事可做，便会产生离开的念头，在这个时候我们一定要坚持，不能轻易放弃。

第二，要勤劳，任劳任怨

    我们到公司去实习，由于我们不是正式职员，所以公司多数是把我们当学生看待。公司在这个期间一般不会给我们什么重要的工作去做，可又不想让我们闲着，因此，他们会交给我们一些比较简单的工作。与此同时，我们应该自己主动找一些事情来做，从小事做起，刚开始也只有这样。

第三，要虚心学习，不耻下问

    在工作过程中，我们肯定会碰到很多的问题，有很多是我们所不懂的，不懂的东西我们就要虚心向同事请教，当别人教我们知识的时候，我们也应该虚心地接受。同时，我们也不要怕犯错。每一个人都有犯错的时候，工作中第一次做错了不要紧，重要的是知错能改。

第四，要确立明确的目标，并端正自己的态度

    平时，我们不管做什么事，都要明确自己的目标，就像我们到公司工作以后，要知道自己能否胜任这份工作，关键是看你自己对待工作的态度，态度对了，即使自己以前没学过的知识也可以在工作中逐渐的掌握。因此，要树立正确的目标，在实现目标的过程中一定要多看别人怎样做，多听别人怎样说，多想自己应该怎样做，然后自己亲自动手去多做。只有这样我们才能把事情做好。

    通过本次的实习，我还发现自己以前学习中所出现的一些薄弱环节，并为今后的学习指明了方向，同时也会为将来的工作打下一个良好的基础。，但这次的实习为我们提供了一个很好的锻炼机会，使我们及早了解一些相关知识以便以后运用到以后的业务中去。通过这次的实习，我了解到了HTML5的好处与奥妙，能够自如的去运用一些去实现我想要的效果，同时让我THML5对如今社会需求的供应，我知道只有通过刻苦的学习，加强对业务知识的熟练掌握程度，在现实的工作中才会得心应手，应对自如。 更让注意到其实从大一以来我们接触到的专业知识有多重要，如果能过熟练的运用我们所学的知识，我相信我现在或许已经是一个代码大神了。

    总体来说，这次实习不仅仅是锻炼了我在贸易操作方面的一些技能，同时，经过这次实习，我还从中学到了很多课本上所没有提及的知识，还有就是在就业心态上我也有很大的改变，以前我总想找一份适合自己爱好，并且专业对口的工作。可现在我们都知道找工作很难，要专业对口更难，很多东西我们初到社会才接触、才学习。所以我现在要建立起先就业再择业的就业观。应尽快学会在社会上，敢于参加与社会竞争，敢于承受社会压力，使自己能够在社会上快速成长。总的来说，作为一个快要毕业的大学生，无论是在今后的工作或是生活中，实习都将成为我人生中一笔重要的资本。

   “千里之行，始于足下”，这短暂而又充实的实习，我认为对我走向社会起到了一个桥梁的作用，过渡的作用，是人生的一段重要的经历，也是一个重要步骤，对将来走上工作岗位也有着很大帮助。向他人虚心求教，与人文明交往等一些做人处世的基本原则都要在实际生活中认真的贯彻，好的习惯也要在实际生活中不断培养。这一段时间所学到的经验和知识是我一生中的一笔宝贵财富。

    这次实习也让我深刻了解到，和团体保持良好的关系是很重要的。做事首先要学做人，要明白做人的道理，如何与人相处是现代社会的做人的一个最基本的问题。对于自己这样一个即将步入社会的人来说，需要学习的东西很多，他们就是最好的老师，正所谓“三人行，必有我师”，我们可以向他们学习很多知识、道理。

    实践是学生接触社会，了解社会，服务社会，运用所学知识实践自我的最好途径。亲身实践，而不是闭门造车。实现了从理论到实践再到理论的飞跃。增强了认识问题，分析问题，解决问题的能力。为认识社会，了解社会，步入社会打下了良好的基础。同时还需我们在以后的学习中用知识武装自己，用书本充实自己，为以后服务社会打下更坚固的基础!艰辛知人生，实践长才干。 

    无论是怎样的实习方式，我们都学习到了超出课本以外的只是，我相信今后的日子里这些东西会让我受益匪浅。

实习笔记

时间：2016年05月09日

地点：计算机大楼523机房

主要内容：

今天是实习的第一天，对于许久没早上上过课的我来说，接下来的三周我觉得我将痛苦不堪。

先来介绍一下这个即将陪伴我们三周的导师，感觉他似乎并不是很大，而且绝对的媳妇控，整个讲课的过程完全以“我的老婆”为中心 建立了一系列web项目不说，其中还引用了不少他妹子的照片，那叫一个秀恩爱啊。他是个东北人，说话还是蛮有幽默感的，上课节奏也比较容易被接受，是不是的开开小玩笑什么的，这一天还是过得蛮轻松。

下面我来谢谢我今天接收到的东西好了。虽说我们没有去上海，更没有去无锡。还天天按上课时间起早贪黑然后还不出校门，我表示我没有丝毫怨言！对，完全没有。不管你信不信，反正我信了。首先呢，老生常谈的聊了一下现实的问题，主要是告诉我们他曾经也是一个苦逼的男主，因为家道中落，被女朋友的父母所不接受，最后通过自己的打拼为自己赢得了更好的生活。嗯，这就是现实，如果你没钱，别人不会给你时间等你成长。更不会有谁真的能体会到别人的辛酸，唯有自己努力才能赢得别人的尊重。然后呢又说道计算机行业的就业问题，作为一个家里没钱没势的妹子我来说，简直就是愁啊！老师说得对，其实就业什么的还是看人，看个人定位是什么了，心多野可能就越多。不过我完全属于随遇而安的这种，所以我对自己的要求足实在不高，能养活我自己就可以了。

作为愚笨的我们，导师不得不又简单的介绍了一下现在互联网的形势及iOS和Android的发展路途。作为喜欢听故事的我来说，我还是蛮认真的听了课的。iOS和Android什么的我现在大概能分个七七八八了，看法也是有一点的。虽然我用的是Android的，可是我内心是比较欣赏这种高大上的系统的。毕竟说到运行什么的，那iOS可是比Android好了一大截的。但就现在来讲，Android开发还是比较有前途的，可惜我对编程什么的完全不感兴趣，更别说把它当做终生职业了。最重要的一点，老实说程序员是要加班到没人性的地步的，作为妹子，我希望我负责美就好。之后又说道APP，我表示我想做一个属于自己的APP已经很久了的。希望我有机会实现吧。说道跳槽，我一直以为一年跳一次，我觉得很刺激，结果老师告诉我一年三次都是少的，我就呵呵了。接下来就是重点了，也就是我们这次的实习中心-----HTML5。简称H5，一个打败了flash的厉害角色。然后我们就被老师忽悠的分组了还不允许女生在一组。我们的队名叫做TK8，也就是关键八人的意思。我们有八个人，作为队长的我表示其实我就是个打酱油的。

作为第一天接触的小菜鸟的我们，老师带着我们从安装Hbuider开始给我们讲解了H5的神奇。从css选择器的类型、使用、区别；到图片、音频、视频的使用，最后用了一下午的时间做出了一个漂亮的照片墙。虽然过程简直惨目忍睹，面对提出无语问题的老师，用着调侃的语气帮我解答后，我还是小有成就做出了个漂亮的照片墙的。今天还算不错，期待明天看到更好的自己，哈哈。

时间：2016年05月10日

地点：计算机大楼

主要内容：

今天起了个大早，就为了能坐到既可以充电又能看清老师的板书的位置。然而意外发现大家的热情都无比的高涨。以至于我发现坐下后的我被一群小伙伴咬牙，表示我抢了他们的位置。我想说我这么好的孩子怎么会抢座呢？只怪我来的太早。

今天差不多就是两个项目，一个是幽灵按钮，还有一个就是动画了。嗯，按钮的主要思想就是：做一个大盒子里面套着盒子若干，然后定义每个盒子，为了让我们更容易了解，给不同的盒子的背景也不同。然后将准备好的图放入，做出旋转的效果及放大效果。并且告诉我们注意一定注明不能平铺，不然会不断重复出现补充空余区域。再然后就需要空间想象能力了，给按钮的四条边做出流动曲线的样子，自己编译的过程还是蛮不错的。然后我们就着手于一个非常无聊的小球动画，虽说幼稚吧其实我们还是花了一个下午的时间。我就费心得来说说吧！首先要画圆，但是如果没有规定画布的分辨率和大小的话，圆就不是圆了，可想而知我已开始画的有多么惨不忍睹了。想要它流动，方法就是画一个擦点然后再画，为了看起来流动，我们需要它随机的画圆并且记录位置，需要用到数组，记录和更新位置。定义粒子：需要将他的当前位置记录，并且让它沿着x,y轴移动。然后把粒子颜色也随机了后，就像烟花一样的动画就出炉了。看着蛮有成就感的。我发现吧，做web项目思路要清晰而且需要方法，对于老师现在用的方法我还是相当愉快的接受了。对于事情一步一步一步的慢慢来这种说法，我表示我学的蛮快。虽说老师只讲代码但是一边给思路一遍带着我们敲代码，然后指出我们的错误，再告诉我们每个部分的原理及目的，我表示我学的很开心。

时间：2016年05月11日

地点：计算机大楼

主要内容：

今天我起的比昨天要更早一些，所以我还是非常愉快的做到了前面。我表示很满意。今天的内容是做一个隐藏的导航。就是打开页面显示只有航标，当移动到航标出的格子内，则隐藏的内容图标依次出现。首先第一步：就是搭建盒子，在盒子里定义四到五种导航标题，按照有序排列依次写出每个小盒子的内容。第二步：建立css文件，规范盒子的大小，可以给背景色方便分辨。为了让它可以隐藏，所以绝对定位和相对定位很重要。定义弹出和收回两种状态。接下来就是建立js文件，为了定义页面加载完成后一会调用的事件。先定义鼠标的悬停接听，然后将出现的动画属性交给当前图标，然后设置延时。目的是让所有图标能一次出现和弹回。好了，这样就可以了。

下午休息，但是老师还给了一个小小的任务，那就是我们要自己做一个在画布上跟随鼠标移动的小圆。有着失忆症的我表示我已经不太记得怎么画圆了的。应该就是先要定义画布的长宽以及分辨率，然后用canvas写，先拿出画笔画圆，定义圆心，半径，角度。然后呢就是读出鼠标每次移动的位置，以这个位置作为圆的中心，半径不变画圆。记得要清除画布，大概就能做到了。其实就是一个不断移动画圆，不断擦除的过程。对于老师的放心，我表示我压力还是蛮大，因为吧我现在也没搞定，还是那句话：我好像不记得怎么画圆了。嗯，悲剧了。

时间：2016年05月12日

地点：计算机大楼

主要内容：

今天阳光无比的好，热的我简直不要太好。幸亏只有半天，不然我要哭出来了。今天老师带着我们做了一个小小的游戏盒子。为什么说小小的呢？因为啊简直就是半成品中的半成品。

在我还没上学的时候，我记得家里是有小霸王的，那时候还不懂是什么，但是记得里面有一个游戏，关于坦克保卫老挝的，印象中差不多是：可以设定颜色，可以选择关卡或者自由环境，甚至可以自己设置障碍。有水墙，草墙，砖墙，石墙吧，能力和作用不同。当时我还是很喜欢的。为什么说这些呢？ 因为今天我们写的小游戏就是一个会开炮的小坦克。早上一去，老师就给我们分享了一张图，就是坦克的图，第一件事就是把图放到盒子里区。然后给div一个id命名。然后建立一个css文件，设置页面大小和游戏盒子的大小并且给坦克一个初始位置。在之后吧就是建立两个js文件，分别写入坦克移动和发射的设置。

首先把要开启移动按键监听，知道我每次都做了什么操作，坦克又在哪移动。然后把定义一个关于坦克的类。将它的初始速度设定，设置方向和每个方向的移动速度，并且设定松开按键后坦克停止移动。在之后在发射的文件中写出的是将要被刚才文件调用的内容。先创建一个子弹对象设定可以发射子弹的方向。然后设置子弹的大小并且给出初始位置，并且开启计时器，若超出屏幕则清除。回到坦克移动的文件中定义发射子弹的函数。然后呢今天的任务就差不多完成了。别以为这很简单，平常一上午我们可以写一个半的页面的，结果今天一上午，我们还没有完成我说的这些，明天还要继续。

时间：2016年05月13日

地点：计算机大楼

主要内容：

我也不晓得时间过的是快还是慢，总之第一周就这么愉快的结束了。简单接触了一下H5,JS,CSS。

今天的内容简单来说就是上午在完善昨天的坦克游戏。为坦克设置敌人。首先把就是要绘制出敌人，并且给他位置并且任务。要求他追踪坦克并且接近他，如果接触，则坦克自身在画布消除，并且宣布游戏结束。同时，坦克发射子弹接触到敌人，则敌人被消除在画布上。下午吧，就很简单了，接触了一个可以说是如同外挂一样的东西，叫jquery。简单的来说，就是有了框，可以直接套，$就能简化很多定义。所以我们简单做了一个倒计时的弹屏。

然后剩下的时间，老师又谈到了他女朋友，并且谈到了东北文化。作为北方人，我还是比较欣赏北方男生的。下周我们要接触手机上的网页设计，我表示对于第三周的展示我表示很心累。比起上课，我觉得他更喜欢聊天。大家的回应也很热烈，毕竟我们院的老师并不会和我们无尺度的聊天。

看大家都天天来报道，一起聊天，听课，开玩笑，突然觉得这种时候其实很难得，以后大家可不会这么轻松的在一起闲聊了。

时间：2016年05月16日

地点：计算机大楼

主要内容：

起的格外早，周末下了两天雨，结果今天阳光明媚。一大早就被一堆人吐槽，我也是醉了。

写一个运行在手机上的绘图工具。首先，建立jquery的js文件。为了使之后的编译更加简单。设置一个可以满屏的画布，然后为画布的85%的部分做一个背景，为了可以临摹，背景需要虚化，不然也就不需要我们去画了。再搭建一个js文件，获取笔，布，笔的粗细，和位置（这个位置包括开始位置和结束为止）。然后用$进行基本设置监听绘图。在画布上获取画笔和设定画笔的适用范围以及设定笔的粗细。再将接触是所应该做的转换做设定。首先实现了画笔就可以试着改变它的颜色和笔的粗细。回到第一页，定义一个列表，颜色的列表里面输入五种颜色，红、绿、粉、黄、蓝。再在css里定义颜色区域盒子的大小，在这里选用弹性盒子webkit，他可以根据你的表快大小和数目均匀分配。并且给每个写有颜色的列里将背景色设置为相同颜色。画好了，接下来就是更改了，难免我不满意我的画啊，所以啊现在就该设置橡皮。

首先要定义盒子，给他背景色，大小，范围，按钮的设置。当我的鼠标点击是进入橡皮擦状态，那就需要一个判断，一个默认，打开界面我设置画笔为默认状态，那么状态改变就要进入橡皮擦的状态，但当状态切换，橡皮擦消失。同时，要注意橡皮的位置亦需要写入监听。好像就差不多了吧。

今天的任务就这么结束了，剩下的时间又到了每天老师的脱口秀时间，然而今天还加了一个环节就是击鼓传花。到谁居然真心话大冒险，这也太廉价了吧。我表示心塞塞。不过还好问题都很普通。剩下时间他让我们构思每组想做的项目，我想说我现在很方，今天就到这。

时间：2016年05月17日

地点：计算机大楼

主要内容：

作为一个苦逼的程序员，今天无一例外，早早的来点完名。先听老师絮絮叨叨的说着他的故事。其实无非是他女朋友的事。我突然很想吐槽，对于男人来说得不到的永远是最好的。可惜吧女人总会把一切都给了喜欢的人，那么就悲剧喽。不过还好我单身，也不打算把自己这只羊送入哪只狼嘴里就是了。

今天做的是微信场景页。简单地说就是像PPT一样，不过是向下滑动的的动画效果。首先来说，定义一个大盒子，包括五个页面。然后给各个页面设置背景图，我的建议是连续的图。可以是一个漫画故事，一首歌的场景，一个笑话，一个地方的美景分布。这样之后做了效果切换起来也不会太突兀。然后就是给这些图配文字了。我想故事的话就直接给文字说明就好了，如果是风景就可以配一首现代诗。之前也学过音频文件的引入，还可以给个背景音乐，当然记得设置播放时隐藏位置。下面就要定义如何翻页了。一共分四种：当前页向上、当前页向下、下一页向上、下一页向下。用动画定义，在整页翻动时还可以旋转。建立两个JS文件，一个是jQuery，还有就是为了实现翻页的文件。记录总页数、当前页和三个触屏点：开始、结束、移动。判断是否能向上翻然后执行上翻，并且添加动画结束监听。实现当前页向上时同时执行下一页向上，但当动画结束后要将指令移除，等待下个命令。下翻也是这样类似。最后就是设置每一页元素的位置和动画效果，给我们写的字给颜色和出场方式。

老师只讲了一页，剩下的要我们自由发挥，让我们一个小组出一份就行。于是乎我就开始打探军情。有人写的小故事，虽然代码简单，可是故事情节还不错。还有人就是新颖，用了许多老师没讲得效果。最后还设有奖励，结果得奖的不是做的做好的，而是最多的，谁让人家走量呢。明天见！

时间：2016年05月18日

地点：计算机大楼

主要内容：

曾经我以为很幼稚的一款游戏，没想到有一天我会亲手编写它。我想起一句话：曾经你最讨厌的模样，有一天你却变成了那样的人。什么叫此一时彼一时啊。

游戏叫汤姆猫，顾名思义就是大家想的：一个蠢萌的猫，他会朝你卖萌，生病，当然他也有技能就是敲锣、喝奶、逗鸟、放屁、扔毛线球、抓画屏幕。

首先：将图片放入页面，把6个有图片的技能用img的形式写入，剩下没有图标的技能就只能用盒子装起来。

然后：用css，定义图标的位置以及盒子的大小位置，注意要绝对定位，不然你无法在页面上看到盒子按钮。

再有：就是用js，把动画获取后连接给每个图标按钮。定义动画：首先获取动画，开启定时器，但是为了每个定时器之间不打架，所以要清楚当前执行的计时器才能继续下一计时器。播放动画要将图片索引，设定时间。并且判断是否继续播放动画。

差不多就这样了。为了好看一点我还给盒子一个温柔的边框，有点像之前画板的调色盘。嗯，今天只有半天，所以下午放假了。

时间：2016年05月19日

地点：计算机大楼

主要内容：

今天又是上半天，休半天。内容也很简短，老师主要是想让我们试着自己去解决问题，并且能自己往下写去完成它的其他功能，也可以是完善其他功能。

今天的内容是制作一个音乐播放器，但由于我们非常不给力的网，所以我们选择用老师给我们的文件，用一个储备的库，相当于仿照网页访问歌单。下面介绍一下制作过程：第一，就是明确分为三部分，头部是音乐播放器的名字和样式。中间部分是音乐列表的部分，音乐列表中包括音乐图片、音乐名、歌手。尾部是当前播放的音乐图片，播放切换按钮和播放暂停按钮以及添加为喜欢歌曲的按钮。第二，先给一个大盒子包裹这三部分，然后分别给这三部分的小盒子里添加所需要的图片和定义。根据定义的名字，在css中帮他们定义。给大盒子一个背景但要求留出上下部分给头部尾部的盒子。然后给头尾相同的背景色，这样可以防止画面布局太过杂乱。将每个盒子里的每种元素都给定他们的宽高和边距，为了美观给照片的部分都定义为圆形。第三，设计音乐盒子。给音乐盒子定义需要注意加上超出盒子部分滚动。在音乐盒子中显示的三部分，图片部分要给绝对定位，并且为圆形外边；剩下的部分，分别是储存音乐数据模式中数组的第二部分和第三部分。给出相同大小和颜色，一个居于靠左一个靠右，颜色统一是为了盒子美观做考虑。还有就是音乐播放的进度条。第四，除了jquery外，还有一种js叫做zepto。用js为了给存储的音乐数据给一个空的数组。还有一个新知识叫ajax：异步的JavaScript和xml。获取音乐数据的函数调用，当数据传入后则可以调用。然后创建视图，给视图创建div并且插入音乐列表，并且定义用$.

时间：2016年05月20日

地点：计算机大楼

主要内容：

今天是个好日子，但只是针对有男朋友的女朋友们。上午就是对音乐播放器做了进一步的完善。

首先就是要实现音乐的播放功能。定义播放器的类也就是需要管理播放功能。用索引对当前播放的歌曲做定义，再给音乐播放时设置src，将我们实现设置好的尾部与音乐播放做同步，将数组中存入当前播放歌曲，并且给定地址。调用原声audio，设置正在播放的属性：eq为播哪首就取哪首歌的视图，siblings为定义除自身外的属性类。接下来切换播放按钮到暂停按钮，首先要确定是否处在暂停状态，如果在暂停状态就将播放作为下一个指令，相反做切换。下面定义切歌。两部分：一、下一首；先定义下一首是否为最后一首，继续向下移动歌曲播放。二、上一首；是否为第一首。当然要是其可以从第一首切换到最后一首，也要能从最后切换到第一首。还有一点就是启用进度条，是我们知道歌曲的播放进度。设置最大值为总时长即可。还有就是播放时，将播放歌曲的背景设置为不同颜色，并且随歌曲切换而改变。

这么一来一个简陋的音乐盒就差不多了。下午的时间老师带着我们写了一个小代码，就是关于重力加速器的。就三行代码：window.addEventListener("deviceorientation",function(event){document.getElementById("text1").innerHTML = event.gamma;document.getElementById("text2").innerHTML =event.beta;})

然后就把运行方式改为手机，这时候手机上就会出现一个APP，就是hbuider的图标，点开后就是一个重力加速器，随着你手机的摆动，来计算偏差，很多游戏都有用到这一点。

时间：2016年05月23日

地点：计算机大楼

主要内容：

时间过得真快，一转眼就是实习的最后一周了，这周的任务已经告诉我们了，一个就是关于3D效果的接触，还有就是我们自己的成果。

我先说说我们组的打算，我们是打算做个小游戏的，我作为决策者，决定我们做2048，不过现在还在准备当中。作为决策者我表示很揪心啊，就我自己在着急，大家都等着。我已经把任务分好了，接下来就需要大家一起努力了。

今天接触的THREE,js3D飞机。首先老师考了一个包给我们，是我们完成3D效果需要用的封装好的类库，名字叫three.min.js.定义一个盒子封装3D效果的场景，边框隐藏起来，给一个渐变的背景色。接下来就是漫长的设置。定义three,js相关变量：场景，摄像机，视野，纵横比，面，远平面，渲染器。重要的是给他们一个一看就知道是什么的变量名称，老师说最好的代码就是不需要注释也能让别人看懂你的代码。定义场景的宽高。摄像机要分正交摄像机和透视摄像机。光源是分为半球光和平行光。那么半球光是为了模拟户外太阳光源。为了使编写简单，需要定义颜色结构体。接下来就是初始化所有游戏对象。创建游戏必要元素：场景，相机，渲染器。并且创建光源，飞机，渲染效果。设置场景的宽高为屏的宽高，设置场景中的雾以及摄像机的相关参数。定义摄像机的位置。创建渲染器，判断是否渲染。设置渲染器大小，判断渲染阴影，将渲染器中的canvas插入盒子。之后就是创建灯光，灯光包括半球光，平行光，平行光的位置，并且判断是否制造阴影还有显示阴影的区间，设置阴影的分辨率，将光源放入场景当中。创建飞机。飞机分为机身，尾翼，侧翼，螺旋桨。飞机为3D对象，先创建几何座舱，材质，颜色还有阴影的处理：制造阴影，接受阴影，将座舱添加给自身。创建引擎，材质，大小，是否接受阴影，将引擎也将自身。之后创建尾翼、侧翼、螺旋桨。方法类似，但是到螺旋桨的时候，应将他先加给轴，然后一起加给自身。之后就是场景移动。让场景中的飞机沿x轴移动。注意要重新渲染，不断调用，才能使3D飞机动起来。

时间：2016年05月24日

地点：计算机大楼

主要内容：

今天一来，老师都没和我们唠家常，直接开始敲代码，估计是因为这个实在不好写但也许是想多给我们留一些时间让我们自己完成我们的项目。

3D飞机的项目，接下来就是给他定义陆地或者海洋，给飞机一个飞行环境。首先设计位置；定义关于陆地或者海洋的类，先定义长宽高和边数。然后定义材质，是否透明，透明度等。定义自身属性和接受阴影...解决了陆地后就是天空了，天空上除了飞机当然还会有云。首先给一个3D盒子，创建立方体的体积和材质。当然云的数量不可能随处都是相同的，所以定义云中随机产生块；计算出现的位置：随机的上下位置和随机旋转，大小也会随机的缩放。还有就是云也会产生阴影。接下来就是关于天空的类；给定新的3D盒子，天空中云的数量并用数组储存云。用循环体定义云，设计云之间的间隔。云所在的角度，随机半径，计算云的位置，随机z.然后获取类的信息传参。在场景移动中固定的位置飞行要去除改为相对天空和陆地飞行的相对位置，其他不变。差不多这样就结束了。

这个项目结束了，就意味着我们的实习内容也到了尾声，接下来的时间就是需要我们自己利用做项目以及项目的产品介绍。我们可以运用这三周学习的只是再自己查找来实现我们想要的效果。因为有老师给我们领进门，所以接受相关只是我也不算太困难，除了这个我们还要完成体育课的作业，所以相当辛苦。

时间：2016年05月25日

地点：计算机大楼

主要内容：

今天因为不需要讲课，所以我们今天并没有起的很早来占位置。其实我想说的只是我没起来...可是神奇的事情发生了，我的座位并没有人，我们没去大家也给我们留着呢。

过来以后，就发现我们组的项目已经出来个大致的，所以我要做的只是给他加个背景音乐。拿到项目我自然是先看看，大概介绍一下，一共分为三个页面，第一个就是开始页面：由一个3D滚动效果、游戏简介、进入游戏组成。点击进入游戏出现计时之后游戏开始。游戏界面内容很简单，一个游戏盒子然后就是计分部分和重新开始部分。死了以后跳转最后一个部分就是game over！这一页有你的得分和返回首页。这就是我现在看到的部分了。我不想吐槽但是实在是难看，于是我第一件做的事就是换壁纸。因为三个页面他们是分为三个的index完成的，所以加背景音乐的工作很简单。因为每一页之间添加音乐并且循环就好了。然后就是每一页的字体的问题，其实我想说明天解决好了，毕竟今天只用半天。下午我还要复习，毕竟下周考两门。

时间：2016年05月26日

地点：计算机大楼

主要内容：

今天的任务很简单，就是完善项目，制作PPT。先来说说项目的事情。一开始建项目的时候是APP项目，可是做出来却是网页的，然后现在的意思是要换成APP。

我的想法是如果要做APP，那么所有的按键都应该换成按钮式的。并且背景盒子都应该是相应是的，随屏幕的改变而改变，字体什么的也会比之前的要大才可以。做完这些所需要的就是美化，可是他们还在完善功能，就比如暂停，记录最高分，页面上一页跳转这些。我表示我想帮忙但发现好像并没有我能插足的地方，我只好乖乖等了。剩下就是帮小组成员写PPT了。首先就是设计我们的logo。我们的名字是TK8，为了效果好我们用了美图秀秀，我绝对不会承认我们是懒。用美图秀秀设计字样，设计八的时候有一种效果就是一个恶魔头像，所以我们就随性的决定给他头上加上TK。

今天最后的部分就是加效果和按钮，因为之前做过幽灵按钮，现在做起来还算不错。

时间：2016年05月27日

地点：计算机大楼

主要内容：

今天我们去了就是为了答辩的。时间过得很快，转眼间就是实习的最后一天了，每组都准备好了作品和PPT，为的就是能有个好成绩。我们一大早就去了，进一步改进了我们的游戏之后，九点半就开始了。

首先用抽签的形式来决定演示的顺序。第一组：做的是APP小游戏，一个关于记单词的游戏，四个角随机出现单词的中文解释，中间有可以动的气泡，气泡中是单词，将相应的单词与中文相匹配，错了游戏结束。但是这里有一个bug，就是当气泡移动到一起就吸住了，分不开。下一组就是一个大混合，因为是两组一起，所以他们相当于整合了老师交给我们的所有进一步完善了罢了。接下来的一组：就是做了一个3D效果，没有用库，完全自己打的，我也是佩服，就是关于一个他们组的介绍，照片盒子这个样子差不多，效果很漂亮，不过照片的话有点黑，应该处理一下。之后就是我们的，我就不多说了。第五组：是超级学霸组的作品，一个比较大型的游戏了，用了很多动漫元素和情景，是这些当中最为完整的一个游戏。然后是球球大作战的一个简洁版，做的有点怪，遇小的死，遇到大的反而可以穿过去。最后一组是接苹果的游戏，一边掌控篮子的位置，一边还要看苹果的掉落，而且苹果还会飞出去，苹果还会越来越多，长得越来越快。我觉得这是最难得一个游戏。展示完了以后，老师就开始打分，每组都在90分以上，任务结束，今天也就结束了三周的实习。为实习画上了的句号。下载本文