关闭

猜猜看游戏开发总结

标签: js学习总结
174人阅读 评论(0) 收藏 举报
分类:

一、   设计目的

通过完成课程设计,熟悉和掌握JavaScript编程语言的编程规则和技巧,深化对已掌握的编程技术和方法的理解与应用。了解JavaScript、JSP和C#编程的优缺点,为今后更进一步的学习作出系统的总结,并在软件开发、实践应用方面打下一定的基础。

二、   设计内容概要

作品功能:利用网页技术中实现猜猜看功能,根据页面提供的学生名字,在随机显示出来的三幅学生照片中选择正确的学生。图片选择正确或错误,均会有相应的提示。

作品效果演示:

   ①点击猜猜看工程文件夹下的show.html文件,在浏览器中可显示运行界面:


在某一张图片的下方点击选择按钮,单击确定

如果选择正确,提醒如下:

选择错误,提醒如下:


作品要求:

①  随机显示一个名字与若干张相片(如3张),选择正确的相片。

②  记录老师对每个学生的认识概率P,并根据认识概率,确定“猜猜看”游戏中学生出现的频率。

作品实现:

由于刚接触JavaScript技术几天的时间,仅仅是实现了随机显示图片并进行选择的功能,尚未完成概率选择的功能,会在今后的继续学习中进行完善和修整。

 

一、  JavaScript、JSP和C#的特点对比

    在开发猜猜看程序之前,仔细考虑过几种开发方式:C#、JSP以及刚刚接触 的JavaScript。在不断的学习过程中,也对这三种不同的编程方式做了一个简略的总结和对比。

C#利用面向对象的封装性将大量的应用封装为类。在C#中,任何的数据元素都属于一个类,都是一个对象。在界面开发上,C#更是提供了大量已封装好的基本控件,重新开发人员只需轻轻拖动控件即可开发出简单的界面程序。但在使用过程中个人感觉C#开发还是有一些缺点:如果开发较简单的程序的话,使用C#会程序显得略微复杂和臃肿;不管是开发完成什么样功能的程序,都需要建立一个完整工程,使用较为麻烦;至于什么不能跨平台的,在我的开发经历中还没遇到过,不予以点评。

JSP和JavaScript都是用来作网页开发的,在使用上都追求简单快捷。JSP的优势在于其强大的后台数据处理能力;而对于前端的页面效果开发则显得力不从心。JavaScript是当下最流行的前端开发技术,在动态或静态的特效开发上可以说是得心应手,同时JavaScript还具备了简单的数据处理能力,因此在开发简单的应用方面JavaScript是一个很好的选择。另外,JavaScript和其他的编程语言相比一个最大的特点就是没有特定的数据类型,其开发的灵活性是其他编程语言难以比拟的。当然了,如果没有足够的驾驭能力,这一特点很可能给开发带来灾难性的后果(这也是其他语言比不了的,哈哈)。

之所以选择JavaScript开发猜猜看程序,首先是觉得在保证功能的前提下,利用JavaScript开发代码量是最少的,而且更有助于学习这个刚上手的编程技术。

 

二、   开发心得

相对来说实现的功能较为简单,因此开发的时间也并不是太久,前后总共花了大概一个下午的时间,其中有效书写代码的时间不足两个小时。虽说时间不多,但是问题还不少,主要是一些细节问题,一点点的失误就足以引出令人抓狂的问题。

在不断的学习中慢慢发现,其实编程使用什么语言并不重要,关键是要适合,一个是适合自己的开发方式,另一方面是适合开发的需求,只要满足这一点,其他的都是一个熟能生巧的过程和讲究细心耐心的程度。这可能也是老师不限制我们编程语言开发猜猜看应用的一个原因。

 

三、   附录

开发出来的网页版猜猜看主要包括三个部分:show.html、data.js和test.js。show.js主要是完成浏览器效果显示的功能;test.js的功能是保证图片的随机显示以及对选择正确与否的提示;data.js则是添加猜猜看用到的图片。

1.部分代码如下:

①  随机显示图片

    var randomArr = function () {

      

       // 随机获取前三个数组

       var newImgArr = dataSet.sort(function (){

           return Math.random() - 0.5;

       }).slice(0, 3);

      

       // 将获得的数组的随机三个图片,渲染到网页上

       var imgArr = $("img");

       var radioArr =$("input[type=radio]");

       newImgArr.forEach(function(img, index){

           imgArr[index].src = img.src;

           radioArr[index].value = img.name;

       });

      

       // 随机获得问题名字

       var getCurrentName = function (arr) {

           var random = Math.round(Math.random()* 2);

 

           return arr[random].name;

       }

      

       currentName = getCurrentName(newImgArr);

       $("#currentName").html(currentName);

      

    }

②选择事件的处理

   $("#oBtn").click(function(event) {

 

       varvalue =$("input[type=radio]:checked").val();

             

       if(value == currentName) {

          alert("恭喜你答对了!")

       }else {

          alert("不好意思,回答错误!");

       }

      

       $("input[type=radio]").prop("checked",false);

      

       randomArr();

   });

 

③添加图片

   vardataSet = [

       {

          name:'周荃',

          src:'./student_photo/201211671230周荃.jpg ',

          rightCount:5,

          falseCount:7

       }

]

2.代码下载

链接:http://pan.baidu.com/s/1jGvPh1G 密码:vl6t



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7261次
    • 积分:286
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:1篇
    • 译文:0篇
    • 评论:16条
    文章分类