C#程序设计-猜猜看

程序介绍：

该程序设计实现了随机显示三张学生照片一个名字学号猜其中哪张照片与名字对应的功能，开发平台是用jetbrains公司旗下一款JavaScript开发工具WebStrom,开发语言用html和css,javascript语言，其中部分程序运用了jQuery和bootstrap框架来实现，总的来说就是运用前端语言来开发程序。

程序展示如下：

一：下面是通过三张图片来获得名字所对应图片的界面。

二：单击图片下方按钮，再通过最下方的“确定”按钮来判定是否正确猜对人物，图所示为猜对的界面。

三：图所示为猜错的界面。

开发过程：因为是使用自己熟悉的语言，所以就用了javascript语言来开发，并通过浏览器来编译，不过是无数据库的单机版本，时间大概花了半天的时间，程序界面使用的html语言和css样式表来写的，在界面中定义了随机选择人物的名字，嵌入图像位置，图像下方按钮和“确定”按钮四个主要节点好方便js文件进行Dom操作，一开始最下方的“确定”按钮老是跟图像在同一层上，后来才想到是没有定义margin属性，这也是html学的不精的后果….在写js文件的时候定义随机数组这块想的确实挺久的，最后写出来的代码复杂，比较了其他同学的思想是打乱数组并选取前三个数组，感觉这种方法更加方便理解，最后提交表单，反复执行获取图片函数基本上就大功告成了。

核心代码：

如下所示：定义一组数组，一个数组里面包含一个对象的name和src地址。

/* global $ */window.onload=function() {    var  data= [        {name: '谭思萍', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671221谭思萍.jpg'},        {name: '陈柏安', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671103陈柏安.jpg'},        {name: '周绿锋', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671130周绿锋.jpg'},        {name: '朱文婷', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671132朱文婷.jpg'},        {name: '林瑜红', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671212林瑜红.jpg'},        {name: '罗思阳', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671216罗思阳.jpg'},        {name: '吴瑞琦', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671223吴瑞琦.jpg'},        {name: '袁春丽', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671228袁春丽.jpg'},        {name: '黄树森', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671209黄树森.jpg'},        {name: '余姣', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671126余姣.jpg'},        {name: '吴明辉', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671124吴明辉.jpg'},        {name: '黎绮霞', src: 'C:/Users/Administrator/Desktop/猜猜看/guess/student_photo/201211671111黎绮霞.jpg'}    ];

随机三个数组的获取，在函数getArrayItems()中从一个给定的数组arr中，随机返回num个不重复项，再新建一个数组temp_array,将传入的数组复制过来，用于运算，而不要直接操作传入的数组data，取出的数值项保存在以下数组中var return_array = new Array()，用一个for循环来判断如果数组还有可以取出的元素，以防下标越界，并在数组中产生一个随即索引，将此随机索引的对应的数组元素复制出来，然后删掉此索引的数组元素，这时候temp_array变为新的数组，数组中数据项取完后，退出循环，比如数组本来只有10项，但要求取出20项。

    var leadName = "";    var randomArr = function () {        var newImgArr = getArrayItems(data, 3);        function getArrayItems(arr, num) {            var temp_array = new Array();            for (var index in arr) {                temp_array.push(arr[index]);            }            var return_array = new Array();aaa            for (var i = 0; i < num; i++) {                if (temp_array.length > 0) {                    var arrIndex = Math.floor(Math.random() * temp_array.length);                    return_array[i] = temp_array[arrIndex];                    temp_array.splice(arrIndex, 1);                } else {                    break;                }            }            return return_array;        };

接下来利用jQuery框架获取html中img和input两个节点，通过forEach遍历随机选出来的新数组newImgArr中的三个图片渲染到网页上，getLeadName随机获得对象的名字。

        var imgArr = $("img");        var radioArr = $("input[type=radio]");        newImgArr.forEach(function(img, index){            imgArr[index].src = img.src;            radioArr[index].value = img.name;        });        var getLeadName = function (arr) {            var random = Math.round(Math.random() * 2);            return arr[random].name;        }        leadName = getLeadName(newImgArr);        $("#leadName").html(leadName);    }

最后一步定义鼠标点击事件，通过一个if..else语句来判断图片的value值与随机获取的人物问题是否相对应，是否对应都继续执行函数randomArr().

    randomArr();    $("#form").click(function (event) {        var value =$("input[type=radio]:checked").val();        if (value == leadName) {            alert("恭喜你答对了！")        } else {            alert("很遗憾你答错了！");        }        $("input[type=radio]").prop("checked", false);        randomArr();    });}

开发后的感受和体会：一开始搞这个程序其实是挺有压力的，后来不限语言就采用了javascript语言，一开始还以为js这种前端脚本语言只能搞一些网页交互设计，后来问了大神才发现也是可以做一些小程序的，但也发现自己在javascript语言所运用的不足，主要的难点是随机数组的选择和Dom操作，数据库没学过，所以就没搞。通过本次课程设计，一个看似简单的程序其实做起来很复杂，但是用心去做，多多请教同学，是可以做出来的，困难在你的勇气和毅力下是抬不了头的。

下载链接：http://pan.baidu.com/s/1gdAiv3l