JQ简单游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Leo,HEnT Studio,LAMP,PHP,MySQL" />
    <meta name="DEscription" content="HEnT Studio" />
    <meta name="Author" content="Leo,HEnT Studio" />

    <title>New Page | xHTML1.0 Transitional</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <!--CSS&JS is here
    <link rel="stylesheet" type="text/css" href="css.css" />
    -->
    <style type="text/css">
    #mydiv{
           width:600px;height:600px;border:1px solid #000000;display: none;
        }
    </style>
    <script type="text/javascript" src="jquery-1.8.2.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){
            start_game();
        });
        function start_game(){
            var all_num=Math.ceil(Math.random()*(10-5)+5);
            var img_html='';
            var x;
            var y;
            for(i=0;i<all_num;i++){
                x = Math.random()*(380-20)+20;
                y = Math.random()*(800-500)+500;
                img_html = img_html + '<img class="j_click" ifcheck='+i+' src="j.png" style="position:absolute;top:'+x+'px;left:'+y+'px;z-index:3;" onclick="click_img(this,'+i+')">';
            }
                $('#game').html(img_html);
        }
        function click_img(obj,i){
        var ad=$(obj).attr("src");
            if(ad=='j0.png'){
                $(obj).attr({ifcheck:i,src:"j.png"});
            }else{
                var num = getnum(1);
                if(num<=2){
                    $(obj).attr({ifcheck:i,src:"j0.png"});
                }else{
                    alert('小于3');
                }
            }
        }
        function getnum(k){
            var num=0;
                $(".j_click").each(function(){
                    if(k==0){
                        if($(this).attr("src")=='j.png'){
                            num++;
                        }
                    }else if(k==1){
                        if($(this).attr("src")=='j0.png'){
                            num++;
                        }
                    }else if(k==2){
                            num++;
                    }
                });
            return num;
        }
        function remove_img(){
            $(".j_click").each(function(){
                if($(this).attr("src")=='j0.png'){
                    $(this).remove();
                }
            });
        }
        function remove_user(){
            var num=getnum(0);
            var nums=getnum(1);
            if(nums==0){
                alert('请至少选择一个');
            }else{
                remove_img();
                if(num==0){
                    alert('你赢了');
                }else{
            var cen_html='<div id="cen" style="position:absolute;top:10px;left:400px;background-color:red;width:600px;height:600px;filter:alpha(opacity=10);opacity: 0.01;z-index:4;"></div>';
            $("span").html(cen_html);
                comput_img();
                }
            }
        }
        function comput_img(){
            var cen_html='<div id="cen" style="position:absolute;top:10px;left:400px;background-color:red;width:600px;height:600px;filter:alpha(opacity=10);opacity: 0.01;z-index:4;"></div>';
            $("span").html(cen_html);
            var num=getnum(2);
            if(num%4==0){
                var rm_num=Math.floor(Math.random()*(3-1)+1);
            }else{
                rm_num = num%4;
            }
            $(".j_click").each(function(i){
                if(i<rm_num){
                    $(this).attr("src","j0.png");
                }
            });
            setTimeout("remove_computer()",2500);

        }
        function remove_computer(){
            remove_img();
            var num=getnum(0);
            if(num==0){
                alert('你输了');
            }
            $("#cen").remove();
        }
    </script>
</head>
<body>
    <span></span>
    <div  style="margin:0px auto;width:500px;height:500px;border:gray 1px solid;">
        <div id="game" style="border:gray 0px solid;"></div>
    </div>
    <div style="border:gray 1px solid;text-align:center;">
    每次选择1-3个，最后拿完则赢</br>
    <input type="button" value="玩家开始" onclick="remove_user()" />
    <input type="button" value="电脑开始" onclick="comput_img()" />
    <input type="button" value="再来一盘" onclick="start_game()" />
    </div>

</body>
</html>
posted on 2013-01-25 16:45 hrc 阅读(375) 评论(0) 收藏举报