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

计算机科学与技术学院课程设计成绩单课程名称：平面设计课程设计 指导教师： 姓名性别学号班级综合成绩成绩等级设计整体表现力（占总成绩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分 中等：7079分 及格：6069分 不及格0分59分 武汉科技大学计算机科学与技术学院制表计算机科学与技术学院 课 程 设 计 报 告课程名称： 平面设计课程设计 专 业： 计算机应用技术 班 级： 学 号： 姓 名： 指导老师： 二一 二年十 二月28日一、 题目Web五子棋二、 设计思想 利用html5，javascript制作棋盘，棋盘对应一个二维数组，五子棋棋盘落子点对应的二维数组元素。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子，数组元素值为1表示该元素对应的落子点有白棋子，数组元素值为2表示该元素对应的落子点有黑棋子; 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。 判断五子棋赢棋算法：函数可以实现判断五子棋赢棋的算法，其中函数的参数xx.yy为数组下标，chess数组实现五子棋棋盘落子点的数据结构映射。 算法的思想方法是：以当前落子点对应的下标为基点，向其周围8个方向进行搜索，如果有同色子连五子，返回1，或2，否则返回0。返回1代表白棋方胜，返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。程序用到的棋子三、 应用主要技术说明html5和javascript，制作网页元素实现页面呈现，数据结构算法实现输赢判断。四、 制作过程1. 准备棋子素材到网上下载五子棋黑白棋子图片，用ps处理图片，背景透明，像素36*36.黑棋图片命名为b，白棋命名为w。2. 利用DWcs6制作html网页，编写代码。画棋盘函数：function drawRect() /画棋盘 canvas = document.getElementById(canvas); context = canvas.getContext(2d); for (var i = 0; i = 0 & x = 0 & y = 0; i-) if (chessDataiy != chess) break; /当前位置往左判断计数 count1+; for (var i = x + 1; i = 0; i-) if (chessDataxi != chess) break; /上 count2+; for (var i = y + 1; i = 0, j = 0; i-, j-) if (chessDataij != chess) break; /左上 count3+; for (var i = x + 1, j = y + 1; i 15, j = 0, j 15; i-, j+) if (chessDataij != chess) break; /左下 count4+; for (var i = x + 1, j = y - 1; i = 0; i+, j-) if (chessDataij != chess) break; /右上 count4+; /判断输赢，是否有同色五子连在一起 if (count1 = 5 | count2 = 5 | count3 = 5 | count4 = 5) if (chess = 1) alert(白棋赢了); else alert(黑棋赢了); isWell = true;/设置该局棋盘已经赢了，不可以再走了 测试截图：五、 小结 这个五子棋游戏是网页版的小游戏，打开网页就可以玩，主要利用了html5中的canvas画布标签，JavaScript和一些数据结构算法。最重要的是算法，包括下棋位置点的判断，输赢判断。下棋位置就是一个个棋盘线交叉点，用一个二维数组对应位置点，数组元素值表示此位置下子情况。判断输赢的方法就是每下一个棋就对此棋子周围八个方向搜索，如果有同色子连五子，就判断赢。玩法就是数据结构，要用数据结构算法表达出来，所以重点是数据结构的算法。虽然这个小游戏比较简单，算法也比较简单，但觉得挺有趣的，算法改一点，游戏规则就变了。附完整代码： web五子棋 body margin: 10px; var canvas; var context; var isWhite = true;/设置是否该轮到白棋 var isWell = false;/设置该局棋盘是否赢了，如果赢了就不能再走了 var img_b = new Image(); img_b.src = file:/D|/myweb/b.png;/黑棋图片 var img_w = new Image(); img_w.src = file:/D|/myweb/w.png;/白棋图片 var chessData = new Array(15);/棋盘的二维数组，用来保存棋盘信息，初始化0为此位置没有走过的，1为白棋走的，2为黑棋走的 for (var x = 0; x 15; x+) chessDatax = new Array(15); for (var y = 0; y 15; y+) chessDataxy = 0;/初始化没有棋子走过 function drawRect() /画棋盘 canvas = document.getElementById(canvas); context = canvas.getContext(2d); for (var i = 0; i = 0 & x = 0 & y = 0; i-) if (chessDataiy != chess) break; /当前位置往左判断计数 count1+; for (var i = x + 1; i = 0; i-) if (chessDataxi != chess) break; /上 count2+; for (var i = y + 1; i = 0, j = 0; i-, j-) if (chessDataij != chess) break; /左上 count3+; for (var i = x + 1, j = y + 1; i 15, j = 0, j 15; i-, j+) if (chessDataij != chess) break; /左下 count4+; for (var i = x + 1, j = y - 1; i = 0; i+, j-) if (chessDataij != chess) break; /右上 coun