巧妙青蛙过河Javascript游戏代码

最新推荐文章于 2021-08-29 19:28:40 发布
tianpeiwen
最新推荐文章于 2021-08-29 19:28:40 发布
阅读量3.6k
点赞数
001<html>
 
 002<head>
 
 003<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 004<!--[if IE]>
 
 005<script type="text/javascript" src="http://code.taobao.org/svn/gpms/trunk/gpms/web/resource/js/json2.js"></script>
 
 006<![endif]-->
 
 007<title>青蛙公主</title>
 
 008<style>
 
 009#pool {}
 
 010.lotus_leaf {width: 30px; height: 30px; margin: 2px; float:left; background-color:#dddddd;font-size:24px;line-height:30px;text-align:center;}
 
 011.on { background-color:#99cc66;cursor:pointer;}
 
 012.off { background-color:#cccc99;cursor:default;}
 
 013.clear {clear:both;}
 
 014</style>
 
 015</head>
 
 016<body>
 
 017<div>
 
 018    <h3>青蛙公主游戏玩法</h3>
 
 019    <p>绿色为荷叶，带箭头的为青蛙。操作方法：鼠标点击操作，单击荷叶跳，背对着荷叶是不能跳的，只能走直线跳，并且中间不能隔着荷叶，要全把荷叶跳了才可以过关。</p>
 
 020    <p>祝您好运！</p>
 
 021</div>
 
 022<div  id="pool">
 
 023    <div class="lotus_leaf" id="leaf_1_1"></div>
 
 024    <div class="lotus_leaf" id="leaf_1_2"></div>
 
 025    <div class="lotus_leaf" id="leaf_1_3"></div>
 
 026    <div class="lotus_leaf" id="leaf_1_4"></div>
 
 027    <div class="lotus_leaf" id="leaf_1_5"></div>
 
 028    <div class="lotus_leaf" id="leaf_1_6"></div>
 
 029 
 
 030    <div class="lotus_leaf" id="leaf_2_1"></div>
 
 031    <div class="lotus_leaf" id="leaf_2_2"></div>
 
 032    <div class="lotus_leaf" id="leaf_2_3"></div>
 
 033    <div class="lotus_leaf" id="leaf_2_4"></div>
 
 034    <div class="lotus_leaf" id="leaf_2_5"></div>
 
 035    <div class="lotus_leaf" id="leaf_2_6"></div>
 
 036 
 
 037    <div class="lotus_leaf" id="leaf_3_1"></div>
 
 038    <div class="lotus_leaf" id="leaf_3_2"></div>
 
 039    <div class="lotus_leaf" id="leaf_3_3"></div>
 
 040    <div class="lotus_leaf" id="leaf_3_4"></div>
 
 041    <div class="lotus_leaf" id="leaf_3_5"></div>
 
 042    <div class="lotus_leaf" id="leaf_3_6"></div>
 
 043 
 
 044    <div class="lotus_leaf" id="leaf_4_1"></div>
 
 045    <div class="lotus_leaf" id="leaf_4_2"></div>
 
 046    <div class="lotus_leaf" id="leaf_4_3"></div>
 
 047    <div class="lotus_leaf" id="leaf_4_4"></div>
 
 048    <div class="lotus_leaf" id="leaf_4_5"></div>
 
 049    <div class="lotus_leaf" id="leaf_4_6"></div>
 
 050</div>
 
 051<div  class="clear"></div>
 
 052<div  id="levels">
 
 053    <p>
 
 054        <a href="javascript:void(0);" onclick="javascript:loadMap([[[3,5],[3,4],[3,3],[2,3],[1,3],[1,4]],[3,5]]);">第1关</a>
 
 055        <a href="javascript:void(0);" onclick="javascript:loadMap([[[1,1],[2,1],[3,1],[4,1],[1,2],[2,2],[3,2],[4,2],[1,3],[2,3],[3,3],[1,4],[2,4],[3,4],[4,4],[1,5],[2,5],[3,5],[4,5]],[1,1]]);">第2关</a>
 
 056        <a href="javascript:void(0);" onclick="javascript:loadMap([[[1,1],[2,1],[3,1],[4,1],[4,2],[4,3],[4,4],[4,5]],[1,1]]);">第3关</a>
 
 057        <a href="javascript:void(0);" onclick="javascript:loadMap([[[1,1],[1,2],[1,4],[1,5],[1,6],[2,1],[2,2],[2,3],[2,4],[2,6],[3,1],[3,3],[3,4],[3,6],[4,1],[4,3],[4,4],[4,5],[4,6]],[4,1]]);">第4关</a>
 
 058        <a href="javascript:void(0);" onclick="javascript:mapEditorMode();return false;">地图编辑器</a>
 
 059    </p>
 
 060</div>
 
 061 
 
 062<div  class="clear"></div>
 
 063<div>
 
 064    <textarea rows="5" cols="30" id="mapEditorResult" ></textarea>
 
 065    <input type="button" value="试玩" onclick="return mapEditorPreview();"/>
 
 066</div>
 
 067</body>
 
 068</html>
 
 069 
 
 070 
 
 071 
 
 072 
 
 073<script type="text/javascript">
 
 074    var ROW = 12, COL = 16, SIZE = 30;
 
 075    var g_map = [[[3,2],[3,3],[3,4],[3,5]],[3,2]];
 
 076    //var g_map = [[[3,5],[3,4],[3,3],[2,3],[1,3],[1,4]],[3,5]];
 
 077    var g_cur = [-1,-1];
 
 078    var g_cnt = [0, 0];// [total, remaining]
 
 079 
 
 080    function g(x){return document.getElementById(x);}
 
 081    function loadMap(map) {
 
 082        var html = '';
 
 083        for (var i=1; i<=ROW; i++) {
 
 084            for (var j=1; j<=COL; j++) {
 
 085                html += '<div class="lotus_leaf" id="leaf_'+i+'_'+j+'"></div>';
 
 086                /*var me = g('leaf_'+i+'_'+j);
 
 087                me.className = 'lotus_leaf';
 
 088                me.removeAttribute('x');
 
 089                me.removeAttribute('y');
 
 090                me.onclick = null;
 
 091                me.innerHTML = '';*/
 
 092            }
 
 093        }
 
 094        if (!map) {
 
 095            alert('本关开发中！');
 
 096            return false;
 
 097        }
 
 098        var pool = g('pool');
 
 099        pool.style.width = ( (SIZE+4)*COL )+ 'px';
 
 100        pool.innerHTML = html;
 
 101        for (var i in map[0]) {
 
 102            setLeaf(map[0][i]);
 
 103        }
 
 104        g_cnt = [map[0].length, map[0].length];
 
 105        setFlog(map[1]);
 
 106    }
 
 107    function setLeaf(x) {
 
 108        var me = g('leaf_'+x[0]+'_'+x[1]);
 
 109        me.className = 'lotus_leaf on';
 
 110        me.setAttribute('x', x[0]);
 
 111        me.setAttribute('y', x[1]);
 
 112        me.onclick=function(){
 
 113            var o = this;
 
 114            var x = o.getAttribute('x'), y = o.getAttribute('y');
 
 115            var dist = Math.abs(x - g_cur[0]) + Math.abs(y - g_cur[1]);
 
 116            if (dist < 2 && dist > 0) {
 
 117                jumpTo([x,y]);
 
 118            }
 
 119        }
 
 120    }
 
 121    function unsetLeaf(x) {
 
 122        var me = g('leaf_'+x[0]+'_'+x[1]);
 
 123        me.className = 'lotus_leaf off';
 
 124        me.innerHTML = '';
 
 125        me.onclick=null;
 
 126    }
 
 127    function setFlog(x) {
 
 128        g('leaf_'+x[0]+'_'+x[1]).innerHTML = '→';//←↑↓';
 
 129        g_cur = x;
 
 130    }
 
 131    function jumpTo(x) {
 
 132        unsetLeaf(g_cur);
 
 133        setLeaf(x);
 
 134        setFlog(x);
 
 135        if (--g_cnt[1] == 1) {
 
 136            alert('过关了！');
 
 137        }
 
 138    }
 
 139 
 
 140    
 
 141    function mapEditorMode() {
 
 142        for (var i=1; i<=ROW; i++) {
 
 143            for (var j=1; j<=COL; j++) {
 
 144                var me = g('leaf_'+i+'_'+j);
 
 145                me.className = 'lotus_leaf';
 
 146                me.setAttribute('x', i);
 
 147                me.setAttribute('y', j);
 
 148                me.onclick = function() {
 
 149                    var i = this.getAttribute('x'),
 
 150                        j = this.getAttribute('y');
 
 151                    mapEditorMark([i,j]);
 
 152                };
 
 153                me.innerHTML = '';
 
 154            }
 
 155        }
 
 156    }
 
 157    function mapEditorMark(x) {
 
 158        var me = g('leaf_'+x[0]+'_'+x[1]);
 
 159        me.className = (me.className == 'lotus_leaf')?'lotus_leaf on':'lotus_leaf';
 
 160        //
 
 161        var mapData = [[], [0,0]];
 
 162        for (var i=1; i<=ROW; i++) {
 
 163            for (var j=1; j<=COL; j++) {
 
 164                var me = g('leaf_'+i+'_'+j);
 
 165                if (me.className == 'lotus_leaf on') {
 
 166                    mapData[0].push([i,j]);
 
 167                }
 
 168            }
 
 169        }
 
 170 
 
 171        g('mapEditorResult').value = JSON.stringify(mapData);
 
 172    }
 
 173    function mapEditorPreview() {
 
 174        var data = g('mapEditorResult').value;
 
 175        if (!data){
 
 176            alert('先编辑地图！');
 
 177            return false;
 
 178        };
 
 179        var mapData = JSON.parse(data);
 
 180        if (!mapData || !mapData[0] || !mapData[1]) {
 
 181            alert('数据非法！');
 
 182            return false;
 
 183        }
 
 184        if (!mapData[1][0] || !mapData[1][1]) {
 
 185            alert('请手动修改修改青蛙初始位置！（最后两个数字坐标）');
 
 186            return false;
 
 187        }
 
 188 
 
 189        var x = mapData[1], me = g('leaf_'+x[0]+'_'+x[1]);
 
 190        if (!me || me.className != 'lotus_leaf on') {
 
 191            alert('青蛙初始位置必须是荷叶！');
 
 192            return false;
 
 193        }
 
 194        loadMap(mapData);
 
 195        return false;
 
 196    }
 
 197    loadMap(g_map);
 
 198 
 
199</script>