flying19880517 · March 14, 2012 15:54
diff --git a/有字有谋.html b/有字有谋.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>有字有谋</title> 
 <script type="text/javascript">
    /* 小学一年级生字 */
    var dicts = ["一二三十木禾上下土个八入大天人火文六七儿九无口日中了子门月不开四五目耳头米见白田电也长山出飞马鸟云公车牛羊小少巾牙尺毛卜又心风力手水广升足走方半巴业本平书自已东西回片皮生里果几用鱼今正雨两瓜衣来年左右万百丁齐冬说友话春朋高你绿们花红草爷亲节的岁行古处声知多忙洗真认父扫母爸写全完关家看笑着兴画会妈合奶放午收女气太早去亮和李语秀千香听远唱定连向以更后意主总先起干明赶净同专工才级队蚂蚁前房空网诗黄林闭童立是我朵叶美机她过他时送让吗往吧得虫很河借姐呢呀哪谁凉怕量跟最园脸因阳为光可法石找办许别那到都吓叫再做象点像照沙海桥军竹苗井面乡忘想念王这从进边道贝男原爱虾跑吹乐地老快师短淡对热冷情拉活把种给吃练学习非苦常问伴间共伙汽分要没孩位选北湖南秋江只帮星请雪就球跳玩桃树刚兰座各带坐急名发成动晚新有么在变什条", "宜实色华谷金尽层丰壮波浪灯作字苹丽劳尤其区巨它安块站已甲豆识纷经如好娃洼于首枝枫记刘胡戏棋钢观弹琴养休伸甜歌院除息您牵困员青宁室样校切教响班欠元包钟叹哈迟闹及身仔细次外计怦礼加夕与川州台争民族亿洁欢祖旗帜庆曲央交市旁优阴坛城国图申匹互京泪洋拥抱相扬讲打指接惊故侯奇寸落补拔功助取所信沿拾际蛙错答还言每治棵挂哇怪慢怎思穿弯比服浅漂啦啊夫表示号汗伤吸极串免告诉狐狸猴颗斤折挑根独满容易采背板椅但傍清消由术吐注课铅笔桌景拿坏松扎抓祝福句幸之令布直当第现期轮路丑永饥饱温贫富户亚角周床病始张寻哭良食双体操场份粉昨晴姑娘妹读舟乘音客何汪丛牢拍护保物鸡猫羽领捉理跃蹦灵晨失觉扔掉眼睛纸船久乎至死腰捡粒被并夜喜重味轻刻群卫运宇宙航舰冲晒池浮灾害黑器岸纹洞影倒游圆围杯件住须能飘必事历史灭克化代孙植厂产介农科技纺织脱冻溪棉探摇野躲解未追店枯徐烧荣菜宿冈世界轰笋芽喊呼唤弟哥骨抽拐浇终静躺谢渐微瓦泉然结股脆塔杜鹃冒雷迈迷迹叔锋滴洒泥泞扑托摸利铃弱末芬芳夏应该岛展建纱环绕胜隐约省茂盛吾季留杏密蜜坡搭摘钉沟龙寿泼敬脚凤束府夺扮伟够恩柏特鲜度凰色勾单宫雄烁辉另题漫哄骗尔仍便票式且煌志提朗喝刀求使英整而丹乌显丝眨陈斜含炉鸣银泊柳艺忽杆涛转吴窗岭绝烟流垂乱压越彩蝉蛛岩趴刨陆质厚沉逃阵虹蜘蛛册宝印埋铁底导盏稠针稀碰兄商挤决钱批报破碎滑继续封骄傲拎桶停聪胳膊甸晃荡叭玲狗糟梯楼肯脑筋讶谈望算此桩肥灰讨厌冰蛋壳鸭欺负鹅翅膀勺斗玉组珍珠数钻研睡距离油检查团斥责炎夸奖亡肉耐谜传染类严寒", "坪坝戴招蝴蝶孔雀舞铜粗尾要装劲绒朝些钓察瓣拢掌趣爬峰顶似苍仰咱奋辫勇居郊散步胸脯渣或者敢惜低诚基突按摆弄准备侧胶卷辆秘杂社著藏悄闪坑臣推旅考秦纪遗究震促深忆异逢佳倍遥遍插精希却依拼命奔村抖丧磨坊扇枚邮爽柿仙梨菠萝粮紧杨艳内梦醒苏湿娇嫩强适昆播修致论试验袋证概减阻测括确误途超堂镜闲待阅腿随调简拜访具闻尘仆纳闷丘迎等止境授品暗降丈肢肌肤辽阔血液滋润创造县设参部横跨举击坚固栏案爪贵断楚孤帆蓝懒披划威武拣颜形状渔料辈汇欣赏映挡视线浸献药村软刮舌矛盾集持般架龟攻炮坦战神兵退挖鞋斧锯免屋抢难初管敌阶懂陶谦虚嘴恼怒吵感荒捧朴素值受愿姿势投况吞烈绪述普通鼓励育瓶系绳茶危险顺俩索激堵获矛担宽裕买猜糖即卡盼仁贴筝鹰端稳嚷橘墨斑闹宇宙荡衬赛拨警惕膝毫套倾探扎搂贯局昼耘未耕织桑蓬稚纶莓苔叮嘱排而幅却哈审肃晌悦悉诲例芝卵匀寸呆增隔壁搬烛慈肩捧匠伟砌跨创既毁固且案智慧登阶厅礼席灿烂党描敞椅议宾翠秆绣腹赤衫疾泛泡脱锐晃饲贪狭桂刺软触滑唇汁津腐虽味亭移泊愁旷萤簇烧喂盈寿合茄跪猛庙蹲镇须揉挨挤之莲胀姿仿裳翩随涛依否窃私汪类镜煤属珍诊职扶除疑效缺况编尝传延庆扬叠涌股螺旋桨掠励顾融腾掩盗铛偷碰株待窜撞桩捡锄魏箭猎雁弦悲惨愈痛", "歇联雕厘甚鼻藏概淘楚侵衅驻抗鲁绍馆戒段务奔厉弛忧哀持慰谜梭狂赢益若凳锅替抄印嗓捆俯投轰隆爆叨役营占攻枪怒艰牺顽暴臂规膛仇鹭含岭帝辞陵猿啼殿廊漆栏昆爽阁辉煌葱朱痕堤哄驾耀亩丈拇镰笋伏丘折缝抚糖配饮钟程闯训选择验资源宋拴陷论尚潜舱绳绑铲拖亚匣挖鞋锯避倍庐瀑炉潮据罩薄闷沸踮犹浩崩霎余恢涨虎隙拂漾柄曲逐瞧型陈搏促企犯罪殊夹即碎改集付启抛剧翼纵跃挣距丧纽抉曾践获堡瘦纠掏乞轧躺饥质趵纯乏藻扁崇峻蜿蜒砖屯垒峭凝魄惠莺郭酒哺络绎桶吱旬拐缸酬俺歉仅治坦谓梯坚茏览械愧疚嫌辛嗅奈绒躯拯幼浑哑搏庞愣虑凭痒稿腔要摔跌胆辟遭殃责倔荒忍惫牵翘鬼吻递嘛港邦芜巫婆逼扮旱绸褂徒烦饶渠灌溉吩咐茅榨价榴慕矮浙罗呈郁聚适昏稍额估损皇组般征苏宏唐凡统销略奉执维予素浸凯遗硕贡圣协吁妻充孟帆唯偶鬓衰查克迫睫垫泣呜咽拳竭亿抵钢兽繁殖蔬炭蒸杀菌预疗捷购屏访辅邮贺羡宜恋妙", "范刹镶裹泻镀润杰截溢则燃缘溜货奏衡诵杖超肌拘耽误哲仪悼逝餐枣搞冠骂嚼悟摊奥咳嗽拄槐耐挽饰腮洲陪检阅矫锁暂糕阻谊捣谣侦混吵耗嫂勒骏限鞭驰蹄茶貌杯跤尼艇叉耸寂梁寇晋挥葛尸悬崖斩磨罢豪屈沃刘龄匪拒醉剂施哼晕勉堪承吟残瑟捏扭胯郑拜租允厨颈缚稻贼畜鲸肢滤吨肺判胎宅蔽弃慎址掘搜骤糙朴燥钳嘻舀掺逗棍逮萝卜筷哗哇托批糟蹋尔肆痰核呻究律俊俏拢添沾倦谱符塞笠蓑戈晰介疆萎汲赖旦番锻炼雅勃艘航桅撕唬龇咧鸥瞄莱茵幽券蜡瞎陌盲键粼缕恬汹录扣潋滟亦抹置载循昙秉秧砸忌膑瞪惑讥讽蔑序率瑜遣渡策滔眺幔遮苇硫磺缆盔骼椎颌趾炙烤栎羚鸵椭政瞬琥珀蝇脂掸拭辣渗澎湃黏测伍坨啸劣酷袭僵倚秃塑豹覆莹援妄诡溃扯撤瓢褐聋疯委钧召狈赴伦典纳喻曼庸捅刁罚释绪漏抑榜寄噢杈监笛嗡惧凄憋惩樱狱", "厦伐综砚锤焚协檐汇泽宣钮徐瞻帜袖挪谋辈脉漓澜瑕翡峦障筏绵凌酿剥妥帖藉偿馋媒诞埃渺矿赐慷慨滥睹礴丸岷咨询浏碟晖迪誉篇版皱歧谨巢梢暇茸甸屑掷俗瑞兆谚枕馒柜锈摩爹袄筒揪粥吉炕叙肤签缩脾册熄唉欠谅俱矣曰盂沧汤阀娱僻怖宪胖刑押舅绞彻迁鸿旺标炊葬权溅嘹魅萍敏滨拆申挠控嘲毅扛绘桨岔竣藐蔡羹煎诸妒督寨擂呐丞璧臣诺廉颇御侮辱袍荆祭乃涕洛碗伶俐徘徊裸兜蜷焰烘哎梗填橱烁魂搁帐怨掀寡揍魁霉勺熬鼎铸铭湛昌溶构寓矛盾誉吾履遂"];
    var dict = dicts[0];
    var char;
    var back_can, main_can, back_ctx, main_ctx, aim;
    var rad = 100;
    var charInput, button;
    var usable_looks = 3;
    
    var play_times = 0, average_looks = 0, total_looks = 0, correct_times = 0, 
        win_times = 0, correct_rate = '-', remain_looks = usable_looks,
        game_stopped = false;
    
    function new_game(){
        remain_looks = usable_looks;
        updateLabels();
        
        char = dict.charAt( parseInt(Math.random()*dict.length) );
        draw_font(back_ctx, char, 'black');
        main_ctx.clearRect(0, 0, main_can.width, main_can.height);
    }
    
    function draw_font(ctx, x, col){
        ctx.clearRect(0, 0, main_can.width, main_can.height);
        
            ctx.shadowOffsetX = 5;
            ctx.shadowOffsetY = 5;
            ctx.shadowBlur = 5;
            ctx.shadowColor = "rgba(128,128,128,0.5)";
         
        ctx.fillStyle = col;
        ctx.font = "bold 500px 黑体";
        ctx.textBaseline = "top";
        ctx.fillText(x, (600-500)/2, (600-500)/2);
    }
    
    function guess(){
        var input = charInput.value;
        ++ play_times;
        
        if(input == char){
            ++ win_times;
            document.getElementById('result').innerHTML = '<span class="highlight_green">正确</span>';
            draw_font(main_ctx, char, 'green');
        }else{
            document.getElementById('result').innerHTML = '<span class="highlight_red">错误</span>';
            draw_font(main_ctx, char, 'red');
        }
        total_looks += usable_looks - remain_looks;
        average_looks = Math.round (total_looks / play_times * 100) / 100;
        correct_rate = Math.round (win_times / play_times * 100) / 100;
        updateLabels();
        
        button.disabled = true;
        button.value = '3';
        setTimeout(count_timer, 1000);
    }
    
    function count_timer(){
        if(button.value == '1'){
            button.value = '确定';
            document.getElementById('result').innerHTML = '请输入';
            button.disabled = false;
            charInput.value = '';
            new_game();
            game_stopped = false;
        }else{
            button.value = parseInt(button.value) - 1;
            setTimeout(count_timer, 1000);
        }
    }
    
    function updateLabels(){
        if(remain_looks == 0)
            document.getElementById('remain_looks').innerHTML = '<span class="highlight_red">' + remain_looks + '</span>';
        else
            document.getElementById('remain_looks').innerHTML = remain_looks;
        document.getElementById('play_times').innerHTML = play_times;
        document.getElementById('correct_rate').innerHTML = correct_rate;
        document.getElementById('average_looks').innerHTML = average_looks;
    }
    
    function click(e){
        charInput.focus();
        if(remain_looks == 0 || game_stopped)
            return;
        remain_looks --;
        updateLabels();
        var r_main = main_can.getBoundingClientRect();
        var r_aim = aim.getBoundingClientRect();
        var data = back_ctx.getImageData(r_aim.left-r_main.left, r_aim.top-r_main.top, r_aim.right-r_aim.left, r_aim.bottom-r_aim.top);
        main_ctx.putImageData(data, r_aim.left-r_main.left, r_aim.top-r_main.top);
    };
    
    function move_aim(e){
        var position = main_can.getBoundingClientRect();
        var x = e.clientX - position.left, y = e.clientY - position.top;
        if(x - rad < 0.) x = rad;
        if(y - rad < 0.) y = rad;
        if(e.clientX + rad > position.right) x = position.right - rad - position.left;
        if(e.clientY + rad > position.bottom) y = position.bottom - rad - position.top;
        aim.style.top = position.top + y - rad + 'px';
        aim.style.left = position.left + x - rad + 'px';
    }
    
    function init(){
        button = document.getElementById('button');
        charInput = document.getElementById('charInput');
        main_can = document.getElementById('main');
        main_ctx = main_can.getContext('2d');
        back_can = document.getElementById('back');
        back_ctx = back_can.getContext('2d');
        back_can.style.display = 'none';
        
        aim = document.getElementById('aim');
        
        main_can.onclick = click;
        aim.onclick = click;
        main_can.onmousemove = move_aim;
        aim.onmousemove = move_aim;
        
        aim.style.width = rad * 2 + 'px';
        aim.style.height = rad * 2 + 'px';
        
        new_game();
    }
    
    function select_dict(){
        var dict_index = document.getElementById('dict_index').value;
        dict = dicts[dict_index];
        if(remain_looks == usable_looks)
            new_game();
    }
    
 </script>
 <style type="text/css">
    body{
        background-color: #EEE;
        font-size: 14px;
    }
    #container {
        margin: auto; 
        width: 800px;
    }
    #sidebar {
        width: 190px; 
        height: 598px; 
        background-color: #DDD; 
        float:left;
        border: 1px solid #CCC;
        border-radius: 5px;
        box-shadow: 0 0 20px #CCC;
    }
    #content {
        width: 598px; 
        height: 598px; 
        float: right; 
        background-color: #EEE;
        border: 1px solid #CCC;
        border-radius: 5px;
        box-shadow: 0 0 20px #CCC;
    }
    
    #aim {
        border: 1px solid black; 
        position: absolute; 
        z-index: 9991; 
        width: 100px; 
        height: 100px; 
        background-color: #CCC; 
        opacity: .5
    }
    
    #footer{
        text-align: center; 
        color: #555; 
        border: 1px solid #CCC;
        margin-top: 10px;
        padding-top: 2px;
        border-radius: 5px;
        background-color: #FFF;
        box-shadow: 0 0 20px #CCC;
        font-size: 13px;
        height: 18px;
    }
    
    .unselectable {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    h3{
        text-align: center;
        box-shadow: 0 0 20px #aaa;
        padding: 5px;
        color: #555;
        background-color: orange;
        margin-bottom: 30px;
    }
    
    .title span {
        border-radius: 8px;
        box-shadow: 5px 5px 20px #aaa;
        padding: 5px;
        background-color: #aaa;
        color: #ddd;
        font-weight: bold;
        margin-left: 10px;
    }
    
    .title {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    
    .label{
        width: 120px;
        height: 20px;
        text-align: right;
    }
    
    #charInput{ 
        width: 30px;
        font-size: 16px;
        font-weight: bold;
        border: 1px solid #555;
        background-color: #EEE;
    }
    
    .highlight_red{
        color: red;
    }
    
    .highlight_green{
        color: green;
    }
 </style>
 </head>

 <body onload="javascript: init();" class="unselectable">
 <div id="container">

 <div id="sidebar">
    <h3>有字有谋</h3>
    <div class="title"><span>文字来源</span></div>
    <table>
        <tr><td class="label">字典选择</td><td><select id="dict_index" onchange="javascript: select_dict();"><option value="0">一年级</option>
            <option value="1">二年级</option>
            <option value="2">三年级</option>
            <option value="3">四年级</option>
            <option value="4">五年级</option>
            <option value="5">六年级</option></select></td></tr>
    </table>
    <div class="title"><span>成绩统计</span></div>
    <table>
        <tr><td class="label">游戏次数：</td><td><span id="play_times">0</span></td></tr>
        <tr><td class="label">正确率：</td><td><span id="correct_rate">0</span></td></tr>
        <tr><td class="label">平均查看次数：</td><td><span id="average_looks">0</span></td></tr>
    </table>
    
    
    <div class="title"><span>本次使用</span></div>
    <table>
        <tr><td class="label">剩余查看次数：</td><td><span id="remain_looks">0</span></td></tr>
    </table>
    
    <div class="title"><span>游戏</span></div>
    <form onsubmit="javascript: guess(); return false;">
    <table>
        <tr><td class="label">我猜是 <input id="charInput" type="text" maxlength="1" value="" /> 字 </td><td><input id="button" type="submit" value="确定" /></td></tr>
        <tr><td class="label">结果：</td><td><span id="result">请输入</span></td></tr>
    </table></form>
    <div class="title"><span>游戏说明</span></div>
 </div>

 <div id="content">
 <div id="aim"></div>
 <canvas id="back" width="598" height= "598" >
    对不起，你的浏览器不支持！
 </canvas>
 <canvas id="main" width="598" height= "598">
 </canvas>

 </div>
 <div style="clear: both"></div>
 <div id="footer">
 <address> &copy; xiaoxia.org </address>
 </div>

 </div>
 </body>

 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>有字有谋</title>
	<script type="text/javascript">
	/* 小学一年级生字 */
	var dicts = ["一二三十木禾上下土个八入大天人火文六七儿九无口日中了子门月不开四五目耳头米见白田电也长山出飞马鸟云公车牛羊小少巾牙尺毛卜又心风力手水广升足走方半巴业本平书自已东西回片皮生里果几用鱼今正雨两瓜衣来年左右万百丁齐冬说友话春朋高你绿们花红草爷亲节的岁行古处声知多忙洗真认父扫母爸写全完关家看笑着兴画会妈合奶放午收女气太早去亮和李语秀千香听远唱定连向以更后意主总先起干明赶净同专工才级队蚂蚁前房空网诗黄林闭童立是我朵叶美机她过他时送让吗往吧得虫很河借姐呢呀哪谁凉怕量跟最园脸因阳为光可法石找办许别那到都吓叫再做象点像照沙海桥军竹苗井面乡忘想念王这从进边道贝男原爱虾跑吹乐地老快师短淡对热冷情拉活把种给吃练学习非苦常问伴间共伙汽分要没孩位选北湖南秋江只帮星请雪就球跳玩桃树刚兰座各带坐急名发成动晚新有么在变什条", "宜实色华谷金尽层丰壮波浪灯作字苹丽劳尤其区巨它安块站已甲豆识纷经如好娃洼于首枝枫记刘胡戏棋钢观弹琴养休伸甜歌院除息您牵困员青宁室样校切教响班欠元包钟叹哈迟闹及身仔细次外计怦礼加夕与川州台争民族亿洁欢祖旗帜庆曲央交市旁优阴坛城国图申匹互京泪洋拥抱相扬讲打指接惊故侯奇寸落补拔功助取所信沿拾际蛙错答还言每治棵挂哇怪慢怎思穿弯比服浅漂啦啊夫表示号汗伤吸极串免告诉狐狸猴颗斤折挑根独满容易采背板椅但傍清消由术吐注课铅笔桌景拿坏松扎抓祝福句幸之令布直当第现期轮路丑永饥饱温贫富户亚角周床病始张寻哭良食双体操场份粉昨晴姑娘妹读舟乘音客何汪丛牢拍护保物鸡猫羽领捉理跃蹦灵晨失觉扔掉眼睛纸船久乎至死腰捡粒被并夜喜重味轻刻群卫运宇宙航舰冲晒池浮灾害黑器岸纹洞影倒游圆围杯件住须能飘必事历史灭克化代孙植厂产介农科技纺织脱冻溪棉探摇野躲解未追店枯徐烧荣菜宿冈世界轰笋芽喊呼唤弟哥骨抽拐浇终静躺谢渐微瓦泉然结股脆塔杜鹃冒雷迈迷迹叔锋滴洒泥泞扑托摸利铃弱末芬芳夏应该岛展建纱环绕胜隐约省茂盛吾季留杏密蜜坡搭摘钉沟龙寿泼敬脚凤束府夺扮伟够恩柏特鲜度凰色勾单宫雄烁辉另题漫哄骗尔仍便票式且煌志提朗喝刀求使英整而丹乌显丝眨陈斜含炉鸣银泊柳艺忽杆涛转吴窗岭绝烟流垂乱压越彩蝉蛛岩趴刨陆质厚沉逃阵虹蜘蛛册宝印埋铁底导盏稠针稀碰兄商挤决钱批报破碎滑继续封骄傲拎桶停聪胳膊甸晃荡叭玲狗糟梯楼肯脑筋讶谈望算此桩肥灰讨厌冰蛋壳鸭欺负鹅翅膀勺斗玉组珍珠数钻研睡距离油检查团斥责炎夸奖亡肉耐谜传染类严寒", "坪坝戴招蝴蝶孔雀舞铜粗尾要装劲绒朝些钓察瓣拢掌趣爬峰顶似苍仰咱奋辫勇居郊散步胸脯渣或者敢惜低诚基突按摆弄准备侧胶卷辆秘杂社著藏悄闪坑臣推旅考秦纪遗究震促深忆异逢佳倍遥遍插精希却依拼命奔村抖丧磨坊扇枚邮爽柿仙梨菠萝粮紧杨艳内梦醒苏湿娇嫩强适昆播修致论试验袋证概减阻测括确误途超堂镜闲待阅腿随调简拜访具闻尘仆纳闷丘迎等止境授品暗降丈肢肌肤辽阔血液滋润创造县设参部横跨举击坚固栏案爪贵断楚孤帆蓝懒披划威武拣颜形状渔料辈汇欣赏映挡视线浸献药村软刮舌矛盾集持般架龟攻炮坦战神兵退挖鞋斧锯免屋抢难初管敌阶懂陶谦虚嘴恼怒吵感荒捧朴素值受愿姿势投况吞烈绪述普通鼓励育瓶系绳茶危险顺俩索激堵获矛担宽裕买猜糖即卡盼仁贴筝鹰端稳嚷橘墨斑闹宇宙荡衬赛拨警惕膝毫套倾探扎搂贯局昼耘未耕织桑蓬稚纶莓苔叮嘱排而幅却哈审肃晌悦悉诲例芝卵匀寸呆增隔壁搬烛慈肩捧匠伟砌跨创既毁固且案智慧登阶厅礼席灿烂党描敞椅议宾翠秆绣腹赤衫疾泛泡脱锐晃饲贪狭桂刺软触滑唇汁津腐虽味亭移泊愁旷萤簇烧喂盈寿合茄跪猛庙蹲镇须揉挨挤之莲胀姿仿裳翩随涛依否窃私汪类镜煤属珍诊职扶除疑效缺况编尝传延庆扬叠涌股螺旋桨掠励顾融腾掩盗铛偷碰株待窜撞桩捡锄魏箭猎雁弦悲惨愈痛", "歇联雕厘甚鼻藏概淘楚侵衅驻抗鲁绍馆戒段务奔厉弛忧哀持慰谜梭狂赢益若凳锅替抄印嗓捆俯投轰隆爆叨役营占攻枪怒艰牺顽暴臂规膛仇鹭含岭帝辞陵猿啼殿廊漆栏昆爽阁辉煌葱朱痕堤哄驾耀亩丈拇镰笋伏丘折缝抚糖配饮钟程闯训选择验资源宋拴陷论尚潜舱绳绑铲拖亚匣挖鞋锯避倍庐瀑炉潮据罩薄闷沸踮犹浩崩霎余恢涨虎隙拂漾柄曲逐瞧型陈搏促企犯罪殊夹即碎改集付启抛剧翼纵跃挣距丧纽抉曾践获堡瘦纠掏乞轧躺饥质趵纯乏藻扁崇峻蜿蜒砖屯垒峭凝魄惠莺郭酒哺络绎桶吱旬拐缸酬俺歉仅治坦谓梯坚茏览械愧疚嫌辛嗅奈绒躯拯幼浑哑搏庞愣虑凭痒稿腔要摔跌胆辟遭殃责倔荒忍惫牵翘鬼吻递嘛港邦芜巫婆逼扮旱绸褂徒烦饶渠灌溉吩咐茅榨价榴慕矮浙罗呈郁聚适昏稍额估损皇组般征苏宏唐凡统销略奉执维予素浸凯遗硕贡圣协吁妻充孟帆唯偶鬓衰查克迫睫垫泣呜咽拳竭亿抵钢兽繁殖蔬炭蒸杀菌预疗捷购屏访辅邮贺羡宜恋妙", "范刹镶裹泻镀润杰截溢则燃缘溜货奏衡诵杖超肌拘耽误哲仪悼逝餐枣搞冠骂嚼悟摊奥咳嗽拄槐耐挽饰腮洲陪检阅矫锁暂糕阻谊捣谣侦混吵耗嫂勒骏限鞭驰蹄茶貌杯跤尼艇叉耸寂梁寇晋挥葛尸悬崖斩磨罢豪屈沃刘龄匪拒醉剂施哼晕勉堪承吟残瑟捏扭胯郑拜租允厨颈缚稻贼畜鲸肢滤吨肺判胎宅蔽弃慎址掘搜骤糙朴燥钳嘻舀掺逗棍逮萝卜筷哗哇托批糟蹋尔肆痰核呻究律俊俏拢添沾倦谱符塞笠蓑戈晰介疆萎汲赖旦番锻炼雅勃艘航桅撕唬龇咧鸥瞄莱茵幽券蜡瞎陌盲键粼缕恬汹录扣潋滟亦抹置载循昙秉秧砸忌膑瞪惑讥讽蔑序率瑜遣渡策滔眺幔遮苇硫磺缆盔骼椎颌趾炙烤栎羚鸵椭政瞬琥珀蝇脂掸拭辣渗澎湃黏测伍坨啸劣酷袭僵倚秃塑豹覆莹援妄诡溃扯撤瓢褐聋疯委钧召狈赴伦典纳喻曼庸捅刁罚释绪漏抑榜寄噢杈监笛嗡惧凄憋惩樱狱", "厦伐综砚锤焚协檐汇泽宣钮徐瞻帜袖挪谋辈脉漓澜瑕翡峦障筏绵凌酿剥妥帖藉偿馋媒诞埃渺矿赐慷慨滥睹礴丸岷咨询浏碟晖迪誉篇版皱歧谨巢梢暇茸甸屑掷俗瑞兆谚枕馒柜锈摩爹袄筒揪粥吉炕叙肤签缩脾册熄唉欠谅俱矣曰盂沧汤阀娱僻怖宪胖刑押舅绞彻迁鸿旺标炊葬权溅嘹魅萍敏滨拆申挠控嘲毅扛绘桨岔竣藐蔡羹煎诸妒督寨擂呐丞璧臣诺廉颇御侮辱袍荆祭乃涕洛碗伶俐徘徊裸兜蜷焰烘哎梗填橱烁魂搁帐怨掀寡揍魁霉勺熬鼎铸铭湛昌溶构寓矛盾誉吾履遂"];
	var dict = dicts[0];
	var char;
	var back_can, main_can, back_ctx, main_ctx, aim;
	var rad = 100;
	var charInput, button;
	var usable_looks = 3;

	var play_times = 0, average_looks = 0, total_looks = 0, correct_times = 0,
	win_times = 0, correct_rate = '-', remain_looks = usable_looks,
	game_stopped = false;

	function new_game(){
	remain_looks = usable_looks;
	updateLabels();

	char = dict.charAt( parseInt(Math.random()*dict.length) );
	draw_font(back_ctx, char, 'black');
	main_ctx.clearRect(0, 0, main_can.width, main_can.height);
	}

	function draw_font(ctx, x, col){
	ctx.clearRect(0, 0, main_can.width, main_can.height);

	ctx.shadowOffsetX = 5;
	ctx.shadowOffsetY = 5;
	ctx.shadowBlur = 5;
	ctx.shadowColor = "rgba(128,128,128,0.5)";

	ctx.fillStyle = col;
	ctx.font = "bold 500px 黑体";
	ctx.textBaseline = "top";
	ctx.fillText(x, (600-500)/2, (600-500)/2);
	}

	function guess(){
	var input = charInput.value;
	++ play_times;

	if(input == char){
	++ win_times;
	document.getElementById('result').innerHTML = '<span class="highlight_green">正确</span>';
	draw_font(main_ctx, char, 'green');
	}else{
	document.getElementById('result').innerHTML = '<span class="highlight_red">错误</span>';
	draw_font(main_ctx, char, 'red');
	}
	total_looks += usable_looks - remain_looks;
	average_looks = Math.round (total_looks / play_times * 100) / 100;
	correct_rate = Math.round (win_times / play_times * 100) / 100;
	updateLabels();

	button.disabled = true;
	button.value = '3';
	setTimeout(count_timer, 1000);
	}

	function count_timer(){
	if(button.value == '1'){
	button.value = '确定';
	document.getElementById('result').innerHTML = '请输入';
	button.disabled = false;
	charInput.value = '';
	new_game();
	game_stopped = false;
	}else{
	button.value = parseInt(button.value) - 1;
	setTimeout(count_timer, 1000);
	}
	}

	function updateLabels(){
	if(remain_looks == 0)
	document.getElementById('remain_looks').innerHTML = '<span class="highlight_red">' + remain_looks + '</span>';
	else
	document.getElementById('remain_looks').innerHTML = remain_looks;
	document.getElementById('play_times').innerHTML = play_times;
	document.getElementById('correct_rate').innerHTML = correct_rate;
	document.getElementById('average_looks').innerHTML = average_looks;
	}

	function click(e){
	charInput.focus();
	if(remain_looks == 0 \|\| game_stopped)
	return;
	remain_looks --;
	updateLabels();
	var r_main = main_can.getBoundingClientRect();
	var r_aim = aim.getBoundingClientRect();
	var data = back_ctx.getImageData(r_aim.left-r_main.left, r_aim.top-r_main.top, r_aim.right-r_aim.left, r_aim.bottom-r_aim.top);
	main_ctx.putImageData(data, r_aim.left-r_main.left, r_aim.top-r_main.top);
	};

	function move_aim(e){
	var position = main_can.getBoundingClientRect();
	var x = e.clientX - position.left, y = e.clientY - position.top;
	if(x - rad < 0.) x = rad;
	if(y - rad < 0.) y = rad;
	if(e.clientX + rad > position.right) x = position.right - rad - position.left;
	if(e.clientY + rad > position.bottom) y = position.bottom - rad - position.top;
	aim.style.top = position.top + y - rad + 'px';
	aim.style.left = position.left + x - rad + 'px';
	}

	function init(){
	button = document.getElementById('button');
	charInput = document.getElementById('charInput');
	main_can = document.getElementById('main');
	main_ctx = main_can.getContext('2d');
	back_can = document.getElementById('back');
	back_ctx = back_can.getContext('2d');
	back_can.style.display = 'none';

	aim = document.getElementById('aim');

	main_can.onclick = click;
	aim.onclick = click;
	main_can.onmousemove = move_aim;
	aim.onmousemove = move_aim;

	aim.style.width = rad * 2 + 'px';
	aim.style.height = rad * 2 + 'px';

	new_game();
	}

	function select_dict(){
	var dict_index = document.getElementById('dict_index').value;
	dict = dicts[dict_index];
	if(remain_looks == usable_looks)
	new_game();
	}

	</script>
	<style type="text/css">
	body{
	background-color: #EEE;
	font-size: 14px;
	}
	#container {
	margin: auto;
	width: 800px;
	}
	#sidebar {
	width: 190px;
	height: 598px;
	background-color: #DDD;
	float:left;
	border: 1px solid #CCC;
	border-radius: 5px;
	box-shadow: 0 0 20px #CCC;
	}
	#content {
	width: 598px;
	height: 598px;
	float: right;
	background-color: #EEE;
	border: 1px solid #CCC;
	border-radius: 5px;
	box-shadow: 0 0 20px #CCC;
	}

	#aim {
	border: 1px solid black;
	position: absolute;
	z-index: 9991;
	width: 100px;
	height: 100px;
	background-color: #CCC;
	opacity: .5
	}

	#footer{
	text-align: center;
	color: #555;
	border: 1px solid #CCC;
	margin-top: 10px;
	padding-top: 2px;
	border-radius: 5px;
	background-color: #FFF;
	box-shadow: 0 0 20px #CCC;
	font-size: 13px;
	height: 18px;
	}

	.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	}

	h3{
	text-align: center;
	box-shadow: 0 0 20px #aaa;
	padding: 5px;
	color: #555;
	background-color: orange;
	margin-bottom: 30px;
	}

	.title span {
	border-radius: 8px;
	box-shadow: 5px 5px 20px #aaa;
	padding: 5px;
	background-color: #aaa;
	color: #ddd;
	font-weight: bold;
	margin-left: 10px;
	}

	.title {
	margin-bottom: 20px;
	margin-top: 20px;
	}

	.label{
	width: 120px;
	height: 20px;
	text-align: right;
	}

	#charInput{
	width: 30px;
	font-size: 16px;
	font-weight: bold;
	border: 1px solid #555;
	background-color: #EEE;
	}

	.highlight_red{
	color: red;
	}

	.highlight_green{
	color: green;
	}
	</style>
	</head>

	<body onload="javascript: init();" class="unselectable">
	<div id="container">

	<div id="sidebar">
	<h3>有字有谋</h3>
	<div class="title"><span>文字来源</span></div>
	<table>
	<tr><td class="label">字典选择</td><td><select id="dict_index" onchange="javascript: select_dict();"><option value="0">一年级</option>
	<option value="1">二年级</option>
	<option value="2">三年级</option>
	<option value="3">四年级</option>
	<option value="4">五年级</option>
	<option value="5">六年级</option></select></td></tr>
	</table>
	<div class="title"><span>成绩统计</span></div>
	<table>
	<tr><td class="label">游戏次数：</td><td><span id="play_times">0</span></td></tr>
	<tr><td class="label">正确率：</td><td><span id="correct_rate">0</span></td></tr>
	<tr><td class="label">平均查看次数：</td><td><span id="average_looks">0</span></td></tr>
	</table>


	<div class="title"><span>本次使用</span></div>
	<table>
	<tr><td class="label">剩余查看次数：</td><td><span id="remain_looks">0</span></td></tr>
	</table>

	<div class="title"><span>游戏</span></div>
	<form onsubmit="javascript: guess(); return false;">
	<table>
	<tr><td class="label">我猜是 <input id="charInput" type="text" maxlength="1" value="" /> 字 </td><td><input id="button" type="submit" value="确定" /></td></tr>
	<tr><td class="label">结果：</td><td><span id="result">请输入</span></td></tr>
	</table></form>
	<div class="title"><span>游戏说明</span></div>
	</div>

	<div id="content">
	<div id="aim"></div>
	<canvas id="back" width="598" height= "598" >
	对不起，你的浏览器不支持！
	</canvas>
	<canvas id="main" width="598" height= "598">
	</canvas>

	</div>
	<div style="clear: both"></div>
	<div id="footer">
	<address> © xiaoxia.org </address>
	</div>

	</div>
	</body>

	</html>