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>