C#程序设计-猜猜看

原创 2015年07月07日 20:19:28

程序介绍:

该程序设计实现了随机显示三张学生照片一个名字学号猜其中哪张照片与名字对应的功能,开发平台是用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






《C#程序设计》猜猜看游戏开发总结

《猜猜看》游戏开发总结: 开发目的: 在校园中,我们经常遇到某个学生叫自己老师,但老师却想不出该学生的名字,彼此显得有点尴尬。不仅师生之间的互动交流会有这样的问题存在,就连我们身边的同学之间也有这样的...
  • qy_WLX
  • qy_WLX
  • 2015年06月29日 09:46
  • 608

C#程序设计开发总结(猜猜看游戏开发)

《C#程序设计》开发总结 李 杰 信息学院;物联1121;201211672114 一、课程设计的任务     设计一个猜数字游戏程序,该游戏可以由程序产生随机数字,玩家通过输入数字来匹配程序...

<C# 程序设计>之猜猜看

程序主界面 程序文件目录 (xcode开发程序模板自动生成目录,内含各种方法可以重写,而我的程序是单界面,所以只用一个ViewController, .h为接口文件, .m为实现文件,代码...

《JAVA程序设计》实训第一天——《猜猜看》游戏

课程实训是做一个猜猜看的小游戏。对于对代码不熟悉不了解的我来说的确挺难的。但是我还是会努力的。import java.awt.EventQueue; import javax.swing.JFrame...

《Java程序设计》第17周课程设计:《猜猜看》游戏 第三天

今天的进度并不是很理想,原计划是从文本中获取学生信息的,可惜我根据网上参考做出根据文件名而显示其信息; 今天至少完成了两个方面图片的缩放和选择按钮; 图片的缩放: try { ...

《Java程序设计》第17周课程设计:《猜猜看》游戏 第一天

这次完成的方面并不多,仅仅完成上面两个选择文本框可以选取并显示目录路径,但是选择班级txt文件哪里我不能从文件目录的文件夹直接读取,只能从默认目录再去寻找路径。 import java.awt.Ev...

《Java程序设计》第17周课程设计:《猜猜看》游戏 第四天

今天我为了实现按钮判断进行了少量的调整,利用输出的text进行判断是否其图片与标记的名字相对应; 可惜我还不能在上方对话框显示名字; 图片旁边的三个黑点其实获取的图片的名称,因为避免被看见我把他隐...

《JAVA程序设计》实训第二天——《猜猜看》游戏

课程实训第二天,我在第一天的基础上去导入文件夹,第一天那时候一直修改都是修改不到,上网找了相关的知识,问了同学该怎么去导入显示图片。 public class weiwei extends JFra...

《Java程序设计》第四次作业:《猜猜看》之图像的随机显示与结果保存到文本文件

作业要求: 本次作业       大家完成“目标1:从相片文件夹中随机挑选三张相片,显示在图形用户界面上;并实现对用户结果的保存(选择了哪一张相片,是否准确?)”     比如 随机显示...

《JAVA程序设计》第三次——《猜猜看》游戏

这次仔细地把一些注释打了上去。希望自己能更好地理解与修改。这个小游戏还有很多需要改进的地方,不知道我还能不能做到我想要的效果。加油 import javax.imageio.ImageIO; i...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:C#程序设计-猜猜看
举报原因:
原因补充:

(最多只允许输入30个字)