巧妙青蛙过河Javascript游戏代码

最新推荐文章于 2022-02-16 18:45:41 发布
最新推荐文章于 2022-02-16 18:45:41 发布
阅读量3.6k 收藏 1
点赞数
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>
tianpeiwen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小青蛙过河HTML5游戏源码
06-23
小青蛙过河HTML5游戏源码，运行需要服务器环境，已经反复测试，放心使用。
leetcode 403. 青蛙过河
_ostreamBaba
09-06 438
一只青蛙想要过河。 假定河流被等分为 x 个单元格，并且在每一个单元格内都有可能放有一石子（也有可能没有）。 青蛙可以跳上石头，但是不可以跳入水中。 给定石子的位置列表（用单元格序号升序表示）， 请判定青蛙能否成功过河（即能否在最后一步跳至最后一个石子上）。 开始时， 青蛙默认已站在第一个石子上，并可以假定它第一步只能跳跃一个单位（即只能从单元格1跳至单元格2）。 如果青蛙上一步...
jquery青蛙过河小游戏源码
ICode联盟
08-29 233
下载地址jquery实现的青蛙过河小游戏源码，js小游戏源码。 dd:
scratch跳一跳游戏脚本_幼儿园小班体育游戏教案《小青蛙跳荷叶》
weixin_39644614的博客
11-09 372
小班体育游戏教案《小青蛙跳荷叶》适用于小班的体育主题教学活动当中，让幼儿喜欢参加户外活动，并能遵守游戏规则，学习弹跳的方法，练习跳的动作，快来看看幼儿园小班体育游戏《小青蛙跳荷叶》教案吧。幼儿园小班体育游戏教案《小青蛙跳荷叶》　　活动目标：　　1.学习弹跳的方法，练习跳的动作　　2.喜欢参加户外活动，并能遵守游戏规则　　活动准备：　　1.在室外平整的场地上，用垫子作为荷叶　　2.根据幼儿的弹跳能力...
403. 青蛙过河
bao__zao的博客
10-22 131
/** * @param {number[]} stones * @return {boolean} */ var canCross = function(stones) { const set = new Set() // 记忆化存储，降低时间复杂度 return h(stones,0,0,set) // 初始在石头0，上一次跳了0步 }; function h(stones, index, k, set){ const key = index * 1000 + k
c语言青蛙过河小游戏.zip
12-20
源码清晰，适合学习
基于C++语言开发的青蛙过河小游戏(完整源码+可执行exe文件)
09-21
程序名称：基于C++语言开发的青蛙过河小游戏 编译环境：Visual C++ 游戏规则： -WSAD控制，ESC退到主界面，再按则退出。 -木板间隔是随机的。 -生命归零时游戏结束。 -渡河会导致1条河道速度+2。 -死亡会导致所有...
c语言青蛙过河小游戏完整版.zip
06-05
c语言青蛙过河小游戏完整版
c语言小游戏之青蛙过河源代码
03-27
C语言项目源码大全的50套源代码资源，这里是其中的c语言实现打字母游戏源码，大家一起学习交流哈！
c语言青蛙过河小游戏.rar
最新发布
04-22
c语言青蛙过河小游戏.rar
JS网页小游戏：过河游戏代码
10-23
JavaScript网页小游戏：过河游戏代码，好像是几个人都需要做船，但只能坐两人个人，应该采取什么办法让几个人都顺利过河呢？游戏玩法： 　　1.无论大人、小孩，每次最多只能承载两人。2.只有爸爸、妈妈、警察可以驾船。 　　3.妈妈看到爸爸离开儿子打儿子。4.爸爸看到妈妈离开女儿打女儿。 　　5.土匪离开警察会伤害家人。6.先选择人物，然后点击"移动"按钮。 　　7.移动过程中若出现提示，说明违反上述规则。
HTML5 益智小青蛙过河游戏.rar
07-10
HTML5 益智小青蛙过河游戏，为什么说是益智游戏呢，请先看游戏规则: 　　1.点击青蛙跳动 　　2.青蛙不能向后跳,最多只能跳过1个青蛙. 　　3.使左右两边青蛙交换位置即可胜利! 　　不动脑筋，一时半会还真找不到合适办法让青蛙逐个过河，跳来跳去是一场空，若实在不能过河，可单击“查看正确答案”按钮，游戏会演示出如何才能让青蛙过河。
青蛙の日常游戏源码
02-05
一个文字类游戏.一个很简单的历程 比较适合新手 代码也不难
智力游戏-小青蛙过河源码 v1.0
11-09
青蛙过河，六只小青蛙过河小游戏。适合在移动端展示就是有7块石头，6只青蛙要过河，结束应该是3只公的和3只母的换个位置和方向，一款很经典的过河游戏。
青蛙过河游戏
11-01
青蛙过河小游戏，测试程序员逻辑能力，如果3次以内可以通过的话，说明你已经具备天赋了，接下来就是努力le.com
C语言青蛙过河游戏超详细教程【附源码】
kxtxdy的博客
02-16 8129
今天给大家带来一个青蛙过河小游戏代码，先看看效果吧！ 开始界面： 游戏界面 ： 游戏中界面： 胜利界面： 死亡界面：代码我们分了几个模块来写，这样不容易写乱，也方便后续修改 木板模块： #include "stdafx.h" void createBoard(BoardType board[],int channel,int interval) { for(int i=0;i<BOARD_AMOUNT;i++) { if(0==board[channel].b[i]...
CSS Flexbox 青蛙游戏
前端开发博客
11-01 3086
关注前端开发博客，回复“加群”加入我们一起学习，天天进步导语在学习CSS中，Flexbox是一个比较实用的CSS 布局属性，但很复杂，有些人可能没法很快掌握，今天我要推荐一个跟这个相关...
智力游戏-小青蛙过河源码v1.0
07-31
青蛙过河，六只小青蛙过河小游戏。 适合在移动端展示 就是有7块石头，6只青蛙要过河，结束应该是3只公的和3只母的换个位置和方向， 一款很经典的过河游戏。
flexbox Froggy 小青蛙跳荷叶源码答案
08-03
flex中有12个属性，除去一些融合缩写属性，属性值可谓五花八门，而且组合使用的话，还有很多注意点，建议大家可以玩下这个flexbox小青蛙的游戏，游戏几乎包含了所有的常用属性和属性值，形象且容易记忆。做出出来的同学可以看下里面的游戏答案
青蛙过河小游戏系统设计思想
07-25
青蛙过河小游戏的系统设计思想主要包括以下几个方面： 1. 游戏规则设计：明确游戏的规则，包括青蛙的移动方式、河道的障碍物等。青蛙可以在河道中上下移动，并且需要避开障碍物才能到达对岸。规则设计需要考虑游戏...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值