计算机程序设计网上竞赛,计算机程序设计大赛竞赛题.pdf

计算机程序设计大赛竞赛

题

计算机程序设计大赛

竞赛题

□JS 竞赛题

题目要求：用 HTML + CSS + JavaScript 制作一个前台页面(index.html)。你可以使用

纯 JavaScript 实现页面的动态效果，也可以使用 JavaScript 库，但最好是 jQuery。注：

CSS 、JavaScript 要独立于 html 文件，单独保存为外部文件( 如 index.css 、

index.js)。具体要求如下：

1、设计一个有布局的界面，你可以使用 tab 或者 tree 形目录作为导航，但每级导航的

内容不可存在于该文件 (index.html)中，要放在另外的 html 文件里。tree 形目录

作为导航的，要至少支持 3 级导航。希望你能够把以下要求的实现作为某级导航的

内容放在该级导航下。该页面是你展示后续实现的门户，所以请尽量注意美观。

2、使用“题目要求”中提及的技术，实现一个 4×4 的拼图游戏。在实现以下“基本要

求”的前提下才可以实现后续的“扩展要求”。“基本要求”务必全部实现，“扩展要

求”请尽可能多地实现。

基本要求：

1)格子内必须是图片而不是字符。示例如图 1。

图 1

2)通过鼠标点击有图片的格子，将其移动到相邻的无图片的格子。

3)要有游戏功能控制按钮，如“开始”、“重来”等。

4)游戏成功完成后要有提示。

5)需要时请考虑 JavaScript 的执行效率。

6)游戏的 CSS、JavaScript 要独立于 html 文件，单独保存为外部文件。

扩展要求：

1)必须考虑 JavaScript 的执行效率。

2)支持键盘方向键操作，即←↑↓→键的操作。

3)支持“计时”、“计步”玩法。

第 1 页第 1 页

计算机程序设计大赛竞赛

题

4)支持预定义好的几种矩阵(方阵)大小，甚至自定义的矩阵(方阵)大小，5×

5、6×6 等等。

5)支持不只 1 张拼图背景图片，甚至自定义的拼图背景图片。

6)支持智能拼图，即游戏初始时或游戏进行过程中，通过智能拼图功能完成余下步

骤，当然，每一步的时间间隔要足以让肉眼辨别。

3、页面的美观度，布局的合理性，动态效果的流畅度也是评分的重点。请尽可能地展

现你对网页设计的理解。

技术简介：以下将对你在完成题目过程中一定或可能用到的技术作一个简单介绍。

1、HTML：HTML (HyperTextMark-up Language)即超文本标记语言或超文本链接标示语

言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。相信有过

网页制作经历的同学对它不会陌生。

2、CSS：CSS (Cascading Style Sheet)即层叠样式表或级联样式表是一组格式设

置规则，用于控制 Web 页面的外观。通过使用 CSS 样式设置页面的格式，可将

页面的内容与表现形式分离。相信有过网页制作经历的同学对它也不会陌生。

3、JavaScript：JavaScript 是一种由 Netscape 的LiveScript 发展而来的原型化继承

的面向对象的动态类型的区分大小写的客户端脚本语言。相信有过网页制作经历的

同学对它也早有耳闻。

4、jQuery：jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架。其宗旨是

——WRITE LESS,DO MORE 即写更少的代码，做更多的事情。 jQuery 由美国人John

Resig 创建，至今已吸引了来自世界各地的众多 JavaScript 高手加入其 Team。它是

轻量级的 js 库，这