纵横填字最终版

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <title>天天填字012</title>
    <meta name="Keywords" content="天天填字网 填字游戏 填字制作 在线填字游戏" />
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <style type="text/css"><!--

    body, h1, h2, h3, h4, h5, h6
    {
        font-family: Segoe UI, Franklin Gothic Medium, Arial, sans-serif;
    }

    h1, h2, h3, h4, h5, h6
    {
        color: #5d6a86;
    }

    body
    {
        cursor: default;
        font-size: small;
    }

    .ecw-answerbox
    {
        color: black;
        background-color: #F0F0F0;
        border-color: #808080;
        border-style: solid;
        border-width: 1px;
        display: block;
        padding: .75em;
        width: 240pt;
    }

    .ecw-box
    {
        border-style: solid;
        border-width: 1pt;
        cursor: pointer;
        font-size: .24in;
        font-weight: bold;
        height: .35in;
        overflow: hidden;
        text-align: center;
        width: .35in;
    }

    .ecw-boxcheated_sel
    {
        background-color: #FFF1D7;
        border-color: #C00000;
        color: #2080D0;
    }

    .ecw-boxcheated_unsel
    {
        background-color: #ffffff;
        border-color: #606060;
        color: #2080D0;
    }

    .ecw-boxerror_sel
    {
        background-color: #FFF1D7;
        border-color: #C00000;
        color: #BF0000;
    }

    .ecw-boxerror_unsel
    {
        background-color: #FFF0F0;
        border-color: #606060;
        color: #BF0000;
    }

    .ecw-boxnormal_sel
    {
        background-color: #FFF1D7;
        border-color: #C00000;
        color: #000000;
    }

    .ecw-boxnormal_unsel
    {
        background-color: #ffffff;
        border-color: #606060;
        color: #000000;
    }

    .ecw-button
    {
        width: 64pt;
    }

    /*.ecw-cluebox*/
       /*{*/
           /*border-bottom-width: 1px;*/
           /*border-color: #c0c0c0;*/
           /*border-left-width: 0px;*/
           /*border-right-width: 0px;*/
           /*border-style: solid;*/
           /*border-top-width: 1px;*/
           /*margin-top: 1em;*/
           /*padding-bottom: .5em;*/
           /*padding-left: 0pt;*/
           /*padding-right: 0pt;*/
           /*padding-top: .5em;*/
       /*}*/

    .ecw-crosswordarea
    {
        background-color: #8E8E8E;
        border-color: #808080;
        border-style: solid;
        border-width: 2px;
        padding: .5em;
        font-family: Segoe UI, Verdana, Arial, sans-serif;
        font-size: small;
    }

    .ecw-copyright
    {
        margin-bottom: 1em;
        font-size: x-small;
        font-family: Segoe UI, Franklin Gothic Medium, Arial, sans-serif;
    }

    .ecw-input
    {
        font-family: Segoe UI, Franklin Gothic Medium, Arial, sans-serif;
    }

    .ecw-wordlabel
    {
        text-transform: uppercase;
        margin: 0;
    }

    .ecw-wordinfo
    {
        font-size: 8pt;
        color: #808080;
    }

    .ecw-worderror
    {
        color: #c00000;
        font-weight: bold;
        display: none;
        margin-top: 1em;
    }

    --></style>

</head><body>

<h1>天天填字012</h1>
<h3 style="margin-top: -1em;"></h3>

<div id="waitmessage" class="ecw-answerbox">
    本填字游戏,需要您的浏览器支持JavaScript。
</div>

<table cellpadding="0" cellspacing="0" border="0"><tr>

    <td class="ecw-crosswordarea"><table id="crossword" cellpadding="0" cellspacing="0" style="display: none; border-collapse: collapse;">

        <script type="text/javascript"><!--

        var map = new Map();


        CrosswordWidth = 10;
        CrosswordHeight = 10;


        var dataJson = {
            "杜甫": {
                "description": "最近很忙的一位诗人",
                "posArray": [
                    "0,0",
                    "0,1"
                ]
            },
            "皇甫": {
                "description": "《百家姓》中的一个复姓。",
                "posArray": [
                    "0,3",
                    "0,4"
                ]
            },
            "女红": {
                "description": "旧时指女子所作的纺织、缝纫等工作。",
                "posArray": [
                    "0,8",
                    "0,9"
                ]
            },
            "道家": {
                "description": "我国古代的一个学派,代表人物有老子、庄子等。",
                "posArray": [
                    "1,2",
                    "1,3"
                ]
            },
            "赵氏孤儿": {
                "description": "元朝的一部杂剧,作者纪君祥。",
                "posArray": [
                    "1,5",
                    "1,6",
                    "1,7",
                    "1,8"
                ]
            },
            "马晓旭": {
                "description": "女足球星,中国女足核心人物",
                "posArray": [
                    "2,3",
                    "2,4",
                    "2,5"
                ]
            },
            "堂吉诃德": {
                "description": "塞万提斯笔下的著名人物,他仿效骑士的生活,把风车看作巨人, 把羊群当做敌军。",
                "posArray": [
                    "3,0",
                    "3,1",
                    "3,2",
                    "3,3"
                ]
            },
            "里昂": {
                "description": "法国一座大城市,世界高级丝织品的最大产地之一。",
                "posArray": [
                    "4,3",
                    "4,4"
                ]
            },
            "得寸进尺": {
                "description": "比喻贪心不足,有了小的,又要大的。",
                "posArray": [
                    "4,6",
                    "4,7",
                    "4,8",
                    "4,9"
                ]
            },
            "丘吉尔": {
                "description": "二战时期的英国首相,与斯大林、罗斯福并立的“三巨头”之一",
                "posArray": [
                    "5,0",
                    "5,1",
                    "5,2"
                ]
            },
            "汉皇重色思倾国": {
                "description": "白居易《长恨歌》的首句,下句为“御宇多年求不得”。",
                "posArray": [
                    "6,3",
                    "6,4",
                    "6,5",
                    "6,6",
                    "6,7",
                    "6,8",
                    "6,9"
                ]
            },
            "斯坦福大学": {
                "description": "美国一所知名私立高等学府,位于加利福尼亚州。",
                "posArray": [
                    "8,0",
                    "8,1",
                    "8,2",
                    "8,3",
                    "8,4"
                ]
            },
            "火山灰": {
                "description": "粒径很小的火山固态喷发物。因细小,喷发时可送达数十千米的大气层中,并可长期悬浮在空中。",
                "posArray": [
                    "9,5",
                    "9,6",
                    "9,7"
                ]
            },
            "杜甫草堂": {
                "description": "“横向1”的故居。",
                "posArray": [
                    "0,0",
                    "1,0",
                    "2,0",
                    "3,0"
                ]
            },
            "皇家马德里": {
                "description": "西班牙著名足球俱乐部",
                "posArray": [
                    "0,3",
                    "1,3",
                    "2,3",
                    "3,3",
                    "4,3"
                ]
            },
            "女儿国": {
                "description": "《西游记》中的一个国家,该国境内没有男子。",
                "posArray": [
                    "0,8",
                    "1,8",
                    "2,8"
                ]
            },
            "赵旭日": {
                "description": "男足球星,效力于广州恒大俱乐部",
                "posArray": [
                    "1,5",
                    "2,5",
                    "3,5"
                ]
            },
            "吉尔吉斯斯坦": {
                "description": "中亚内陆国,东邻中国,首都比什凯克。",
                "posArray": [
                    "3,1",
                    "4,1",
                    "5,1",
                    "6,1",
                    "7,1",
                    "8,1"
                ]
            },
            "一寸相思一寸灰": {
                "description": "李商隐《无题》中“春心莫共花争发”的下句。",
                "posArray": [
                    "3,7",
                    "4,7",
                    "5,7",
                    "6,7",
                    "7,7",
                    "8,7",
                    "9,7"
                ]
            },
            "戒尺": {
                "description": "旧时教师对学生施行体罚时所用的木板",
                "posArray": [
                    "3,9",
                    "4,9"
                ]
            },
            "三重门": {
                "description": "作家韩寒的一部代表作",
                "posArray": [
                    "5,5",
                    "6,5",
                    "7,5"
                ]
            },
            "汉武大帝": {
                "description": "陈宝国、归亚蕾、陶红等主演的大型历史连续剧。",
                "posArray": [
                    "6,3",
                    "7,3",
                    "8,3",
                    "9,3"
                ]
            },
            "国际米兰": {
                "description": "意甲一支实力强劲的球队,被称为“蓝黑军团”。",
                "posArray": [
                    "6,9",
                    "7,9",
                    "8,9",
                    "9,9"
                ]
            },
            "斯文": {
                "description": "指文化或文人。",
                "posArray": [
                    "8,0",
                    "9,0"
                ]
            }
        };

        LastHorizontalWord = 12;//最后一个水平词

        OnlyCheckOnce = false;
        //-->
        </script>

        <script type="text/javascript"><!--


        function strMapToObj(strMap){
            let obj= Object.create(null);
            for (let[k,v] of strMap) {
                obj[k] = v;
            }
            return obj;
        }

        function getWordIndex(word) {
            var index = 0;
            for (let[k,v] of map) {
                if(k==word)
                {
                    break;
                }
                index++;
            }
            return index;
        }
        //x,y
        function posInMapEx(pos)
        {
            if(mapPos2Words.has(pos) == false)
            {
                return null;
            }
            var obj = mapPos2Words.get(pos);
            var ret = obj.arr[obj.selectIndex];
            var index = ret.indexOf(obj.char);
            var retObj = new Object();
            retObj.index = index;
            retObj.word = ret;
            retObj.char = obj.char;
            if(obj.arr.length > 1)
            {
                obj.selectIndex++;
                obj.selectIndex = obj.selectIndex%2;
            }
            return retObj;
        }

        var mapPos2Words = new Map();



        function GenMapPos2Words(map) {
            for (let[k,v] of map) {
                for(var i = 0; i < v.posArray.length; i++)
                {
                    if(mapPos2Words.has(v.posArray[i]))
                    {
                        mapPos2Words.get(v.posArray[i]).arr.push(k);
                    }
                    else{
                        var obj = new Object();

                        obj.arr = [];
                        obj.arr.push(k);

                        obj.selectIndex = 0;
                        obj.char=k.charAt(i);
                        mapPos2Words.set(v.posArray[i],obj);
                    }
                }
            }
        }

        for(var obj in dataJson)
        {
            map.set(obj,dataJson[obj]);
        }


        GenMapPos2Words(map);
        var mapjson = JSON.stringify(strMapToObj(map));
        console.info(mapjson);
//        var mapjson = JSON.stringify(strMapToObj(mapPos2Words));
//        alert(mapjson);

//        var selObj.CurrentWord;
        var PrevWordHorizontal, x, y, i, j;
        var CrosswordFinished, Initialized;

        // Check the user's browser and then initialize the puzzle.
        if (document.getElementById("waitmessage") != null)
        {
            document.getElementById("waitmessage").innerHTML = "填字游戏正在载入...";


            // Now, insert the row HTML into the table.
            for (var x = 0; x < CrosswordWidth; x++)
            {
                document.writeln("<tr>");
                for (var y = 0; y< CrosswordHeight; y++)
                {
                    var pos = x+","+y;
                    var obj = posInMapEx(pos);
                    if (obj!=null)
                        document.write("<td id=\"c" + PadNumber(x) + PadNumber(y) + "\" class=\"ecw-box ecw-boxnormal_unsel\" onclick=\"SelectThisWord(event);\">&nbsp;</td>");
                    else
                        document.write("<td></td>");
                }
                document.writeln("</tr>");
            }

            // Finally, show the crossword and hide the wait message.
            Initialized = true;
            document.getElementById("waitmessage").style.display = "none";
            document.getElementById("crossword").style.display = "block";
        }

        // ----------
        // Event handlers

        // Raised when a key is pressed in the word entry box.
        function WordEntryKeyPress(event)
        {
            if (CrosswordFinished) return;
            // Treat an Enter keypress as an OK click.
            if (selObj.CurrentWord >= 0 && event.keyCode == 13) OKClick();
        }

        // ----------
        // Helper functions

        // Called when we're ready to start the crossword.
        function BeginCrossword()
        {
            if (Initialized)
            {
                document.getElementById("welcomemessage").style.display = "";
                document.getElementById("checkbutton").style.display = "";
            }
        }


        // Pads a number out to three characters.
        function PadNumber(number)
        {
            if (number < 10)
                return "00" + number;
            else if (number < 100)
                return "0" + number;
            else
                return "" +  number;
        }

        // Returns the table cell at a particular pair of coordinates.
        function CellAt(x, y)
        {
            return document.getElementById("c" + PadNumber(x) + PadNumber(y));
        }


        // Deselects the current word, if there's a word selected.  DOES not change the value of selObj.CurrentWord.
        function DeselectCurrentWord()
        {


            document.getElementById("answerbox").style.display = "none";
            ChangeCurrentWordSelectedStyle(false);
//            selObj.CurrentWord = -1;

        }

        // Changes the style of the cells in the current word.
        function ChangeWordStyle(WordNumber, NewStyle)
        {


            if (WordNumber<= LastHorizontalWord)
                for (i = 0; i < selObj.word.length; i++)
                    CellAt(selObj.x, selObj.y-selObj.index + i).className = NewStyle;
            else
                for (i = 0; i < selObj.word.length; i++)
                    CellAt(selObj.x-selObj.index+ i, selObj.y ).className = NewStyle;
        }

        // Changes the style of the cells in the current word between the selected/unselected form.
        function ChangeCurrentWordSelectedStyle(IsSelected)
        {

            if(selObj.CurrentWord == undefined || selObj.CurrentWord == -1)
                return;

            console.info(selObj.word+IsSelected+selObj.CurrentWord);
            if (selObj.CurrentWord <= LastHorizontalWord)
                for (i = 0; i < selObj.word.length; i++)
                    CellAt(selObj.x, selObj.y-selObj.index+ i).className = CellAt(selObj.x , selObj.y-selObj.index+ i).className.replace(IsSelected ? "_unsel" : "_sel", IsSelected ? "_sel" : "_unsel");
            else
                for (i = 0; i < selObj.word.length; i++)
                    CellAt(selObj.x -selObj.index+ i, selObj.y ).className = CellAt(selObj.x-selObj.index + i, selObj.y).className.replace(IsSelected ? "_unsel" : "_sel", IsSelected ? "_sel" : "_unsel");

            if(IsSelected==false)
            {
                selObj.CurrentWord = -1;

            }


        }

        // Selects the new word by parsing the name of the TD element referenced by the
        // event object, and then applying styles as necessary.
        var selObj = {};
        
        function SelectThisWord(event)
        {
            if (CrosswordFinished) return;
            var i, TheirWord, TableCell;

            // Deselect the previous word if one was selected.
            document.getElementById("welcomemessage").style.display = "none";
//            if (selObj.CurrentWord >= 0)
//                OKClick();
            DeselectCurrentWord();

            // Determine the coordinates of the cell they clicked, and then the word that
            // they clicked.
            var target = (event.srcElement ? event.srcElement: event.target);
            console.info(target);
            selObj.x = parseInt(target.id.substring(1, 4), 10);
            selObj.y = parseInt(target.id.substring(4, 7), 10);
//            DeselectCurrentWord();

            var wordObj = posInMapEx(selObj.x+','+selObj.y);
            selObj.index = wordObj.index;
            selObj.CurrentWord = getWordIndex(wordObj.word);
            selObj.word=wordObj.word;
            // Now, change the style of the cells in this word.
            ChangeCurrentWordSelectedStyle(true);
            // Then, prepare the answer box.


            TheirWord = "";
            var TheirWordLength = 0;
            for (i = 0; i < selObj.word.length; i++)
            {
                // Find the appropriate table cell.
                if (selObj.CurrentWord <= LastHorizontalWord)
                    TableCell = CellAt(selObj.x, selObj.y-selObj.index + i);
                else
                    TableCell = CellAt(selObj.x-selObj.index+ i, selObj.y);
                // Add its contents to the word we're building.
                if (TableCell.innerHTML != null && TableCell.innerHTML.length > 0 && TableCell.innerHTML != " " && TableCell.innerHTML.toLowerCase() != "&nbsp;")
                {
                    TheirWord += TableCell.innerHTML.toUpperCase();
                    TheirWordLength++;
                }
                else
                {
                    TheirWord += "&bull;";
                }
            }

            document.getElementById("wordlabel").innerHTML = TheirWord;
            document.getElementById("wordinfo").innerHTML = ((selObj.CurrentWord <= LastHorizontalWord) ? "横向, " : "纵向, ") + selObj.word.length + " 个字.";
            document.getElementById("wordclue").innerHTML = map.get(wordObj.word).description;
            document.getElementById("worderror").style.display = "none";
//            document.getElementById("cheatbutton").style.display = (Word.length == 0) ? "none" : "";
            if (TheirWordLength == selObj.word.length)
                document.getElementById("wordentry").value = TheirWord;
            else
                document.getElementById("wordentry").value = "";

            // Finally, show the answer box.
            document.getElementById("answerbox").style.display = "block";
            try
            {
                document.getElementById("wordentry").focus();
                document.getElementById("wordentry").select();
            }
            catch (e)
            {
            }

        }

        // Called when the user clicks the OK link.
        function OKClick()
        {
            var TheirWord,  i, TableCell;
            if (CrosswordFinished) return;
            if (document.getElementById("okbutton").disabled) return;

            // First, validate the entry.
            TheirWord = document.getElementById("wordentry").value.toUpperCase();
            if (TheirWord.length == 0)
            {
                DeselectCurrentWord();
                return;
            }

            if (TheirWord.length < selObj.word.length)
            {
                document.getElementById("worderror").innerHTML  = "您输入的字太少了,这个词应该有 " + selObj.word.length + " 个字。";
                document.getElementById("worderror").style.display = "block";
                return;
            }
            if (TheirWord.length > selObj.word.length)
            {
                document.getElementById("worderror").innerHTML = "您输入的字太多了,这个词只有 " + selObj.word.length + " 个字。";
                document.getElementById("worderror").style.display = "block";
                return;
            }


            for (i = 0; i < TheirWord.length; i++)
            {
                TableCell = CellAt(selObj.x + (selObj.CurrentWord <= LastHorizontalWord ?0 : i-selObj.index), selObj.y + (selObj.CurrentWord > LastHorizontalWord ? 0 : i-selObj.index));
                TableCell.innerHTML = TheirWord.substring(i, i + 1);
            }
            DeselectCurrentWord();
        }

        // Called when the "check puzzle" link is clicked.
        function CheckClick()
        {
            if (CrosswordFinished) return;
            var CrosswordFinished=true;
            for (var x = 0; x < CrosswordWidth; x++)
            {

                for (var y = 0; y< CrosswordHeight; y++)
                {
                    var pos = x+","+y;

                    var TableCell = CellAt(x,y);
                    if(TableCell!=null)
                    {
                        var obj = posInMapEx(pos);
                        if(TableCell.innerHTML!=obj.char){
                            CrosswordFinished = false;
                            break;
                        }


                    }
                }

            }


            if(CrosswordFinished==false)
            {
                document.getElementById("welcomemessage").innerHTML = "error";
                document.getElementById("welcomemessage").style.display = "block";
                return;
            }
            // They finished the puzzle!

            document.getElementById("checkbutton").style.display = "none";
            document.getElementById("congratulations").style.display = "block";
            document.getElementById("welcomemessage").style.display = "none";
        }

        // Called when the "cheat" link is clicked.
        function CheatClick()
        {
            if (CrosswordFinished) return;
            var OldWord = selObj.CurrentWord;
            document.getElementById("wordentry").value = selObj.word;
            OKClick();
            ChangeWordStyle(OldWord, "ecw-box ecw-boxcheated_unsel");
        }



        //-->
        </script>

    </table></td>

    <td valign="top" style="padding-left: 1em;">
        <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
            <div>
                <input type="hidden" name="cx" value="partner-pub-3335021892863532:fdww32yut17" />
                <input type="hidden" name="ie" value="GB2312" />
                <input type="text" name="q" size="40" />
                <input type="submit" name="sa" value="&#x641c;&#x7d22;" />
            </div>
        </form>


        <div id="welcomemessage" class="ecw-answerbox" style="display:none;">
            <span>为确保最佳显示效果,请保持本页面最大化。</span><br>
            <p style="color: #ff0000;padding: 12px 0px 2px 0px; margin: 0px; border-bottom: 1px solid #ccc;"><b>说明:</b></p>
            <span><ol><li>点击一个白色格子开始填字。</li>
<li>根据提示,将答案填写在文本框中,然后按<b>回车键</b>或者点击<b>确定</b>按钮。</li>
<li>重复以上两步,完成填字游戏。</li>
<li>点击<b>答案</b>按钮可查看当前词条的答案。</li>
</ol><br></span>

        </div>

        <div id="answerbox" class="ecw-answerbox" style="display:none;">
            <h3 id="wordlabel" class="ecw-wordlabel"> &nbsp;</h3>
            <div id="wordinfo" class="ecw-wordinfo"> </div>
            <div id="wordclue" class="ecw-cluebox"> </div>
            <div style="margin-top: 1em;">
                <input class="ecw-input" id="wordentry" type="text" size="24" style="font-weight: bold; text-transform:uppercase;" onkeypress="WordEntryKeyPress(event)" onchange="WordEntryKeyPress(event)" autocomplete="off" />
            </div>
            <div id="worderror" class="ecw-worderror"></div>

            <table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin-top:1em;"><tbody><tr><td>
                <button id="cheatbutton" type="button" class="ecw-input ecw-button" onclick="CheatClick();">答案</button>
                <button id="checkbutton" type="button" class="ecw-input ecw-button" onclick="CheckClick();">check</button>
            </td><td align="right">
                <button id="okbutton" type="button" class="ecw-input ecw-button" onclick="OKClick();" style="font-weight: bold;">确定</button> &nbsp;
                <button id="cancelbutton" type="button" class="ecw-input ecw-button" onclick="DeselectselObj.CurrentWord();">取消</button>
            </td></tr></tbody></table>

        </div>

        <div id="congratulations" class="ecw-answerbox" style="display:none;">
            <h3>恭喜你!答对了!</h3>
            <p>更多填字游戏,请访问<a href="http://www.tzgame.net" style="color: black; text-decoration:none;">天天填字网。</a></p>
        </div>

    </td></tr></table>
<div><p><b>版权所有,严禁转载!更多在线填字请访问<a href="http://www.tzgame.net/" target="_blank">天天填字网</a>!</b></p></div>

<script language="JavaScript" type="text/javascript"><!--
BeginCrossword();
//-->
</script>

<br>


</body></html>

 

posted @ 2017-10-04 15:56  xchsp  阅读(246)  评论(0编辑  收藏  举报
友情链接 豆约翰博客备份专家 IT行业观察