平面设计课程设计报告.docVIP

PAGE8

计算机科学与技术学院课程设计成绩单

课程名称：平面设计课程设计指导教师：

姓名

性别

学号

班级

综合成绩

成绩等级

设计整体表现力

（占总成绩20%）

□能正确表现□基本能正确表现□能表现但不完善

（20分）（15分）（10分）

设计功能完善程度

（占总成绩10%）

□完善□基本完善□不完善

（10分）（8分）（5分）

设计结构的合理性

（占总成绩10%）

□合理□基本合理□不太合理

（10分）（8分）（5分）

对问题的答辩情况

（占总成绩30%）

□概念正确有创新□能正确回答所有问题□基本能正确回答

（30分）（25分）（20分）

□部分问题回答概念不清晰

（10分）

学生的工作态度与独立工作能力

（占总成绩10%）

□工作态度认真能独立完成任务□工作态度认真但独立性较差

（10分）（8分）

□工作态度基本认真但缺乏独立性

（5分）

设计报告的规范性

（占总成绩20%）

□符合规范□基本符合规范□规范性较差

（20分）（15分）（10分）

优秀：90分~100分良好：80分~89分中等：70~79分及格：60~69分不及格0分~59分

武汉科技大学计算机科学与技术学院制表

计算机科学与技术学院

课程设计报告

课程名称：平面设计课程设计

专业：计算机应用技术

班级：

学号：

姓名：

指导老师：

二〇一二年十二月28日

题目

Web五子棋

设计思想

利用html5，javascript制作棋盘，棋盘对应一个二维数组，五子棋棋盘落子点对应的二维数组元素。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子，数组元素值为1表示该元素对应的落子点有白棋子，数组元素值为2表示该元素对应的落子点有黑棋子;

判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。

判断五子棋赢棋算法：函数可以实现判断五子棋赢棋的算法，其中函数的参数xx.yy为数组下标，chess数组实现五子棋棋盘落子点的数据结构映射。

算法的思想方法是：以当前落子点对应的下标为基点，向其周围8个方向进行搜索，如果有同色子连五子，返回1，或2，否则返回0。返回1代表白棋方胜，返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。

程序用到的棋子

应用主要技术说明

html5和javascript，制作网页元素实现页面呈现，数据结构算法实现输赢判断。

制作过程

准备棋子素材

到网上下载五子棋黑白棋子图片，用ps处理图片，背景透明，像素36*36.黑棋图片命名为b，白棋命名为w。

利用DWcs6制作html网页，编写代码。

画棋盘函数：

functiondrawRect(){//画棋盘

canvas=document.getElementById(canvas);

context=canvas.getContext(2d);

for(vari=0;i=640;i+=40){//绘制棋盘的线

context.beginPath();

context.moveTo(0,i);

context.lineTo(640,i);

context.closePath();

context.stroke();

context.beginPath();

context.moveTo(i,0);

context.lineTo(i,640);