JS新版激流勇进附地图详解

你玩过激流勇进吗？我把地图开源供大家学习和改良，希望你能有所收获，加油！

如果关注栏还有空间的话，留一个给我吧！博主精通各种动画，无论哄男孩子还是哄女孩子，关注我就够了。

①通道	球体可自由通过，不受任何限制
②墙壁	移动受阻，行动壁垒
③水	减速，可在水中游动
④气流	默认向上，按 ↑ 可顺气流飞起
⑤弹簧	落在弹簧上，可增大弹力
⑥泥	阻碍移动，无法叠加弹力
⑦皮肤	像变色龙一样，有(透明)色
⑧终点	触摸通关
⑨岩浆	触摸死亡
⑩特殊墙壁	能阻碍移动，能转换为通道
⑪机关	打开所有的10，将其转换为1
⑫其它数字	占位符，除颜色外不具备任何功能

球球每一次下落之后都有一次叠加弹力的机会，直到弹力叠满，弹簧可突破弹力限制。在游戏过程中，可以按住 ↑ 观察球球上升高度的变化。每一个关卡我都反复尝试，确认没有bug存在，如有疑问，请在文章底部留言。

这是一段完整的脚本语言，不需要任何的删改，复制即玩，没有插入脚本，注释也十分详细，可以保存到桌面上，仔细研读

如果你没接触过前端，“ 点我 ”

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas激流勇进</title><style>
* {margin: 0;padding: 0;
}body {background: #f2f2f2;
}canvas {display:block;margin: 40px auto 20px;border: 1px solid #333;box-shadow: 0 0 16px 2px rgba(0,0,0,0.8);
}p, a {font-family: Helvetica, Arial, sans-serif;font-size: 19px;color: #777;display: block;width: 400px;margin: 0 auto;text-align: center;text-decoration:none;
}.info {margin:14px auto;text-align: justify;font-size: 18px;color: #999;
}a {color:#3377ee;
}
</style>
</head>
<body><canvas id="canvas"></canvas><p>使用键盘方向键(上、左、右)控制移动</p><script>
/* Customisable map data */var map = {tile_size: 16,keys: [{id: 0, colour: '#333', solid: 0},{id: 1, colour: '#888', solid: 0},{id: 2,colour: '#555',solid: 1,bounce: 0.35},{id: 3,colour: 'rgba(121, 220, 242, 0.4)',friction: {x: 0.9,y: 0.9},gravity: {x: 0,y: 0.1},jump: 1,fore: 1},{id: 4,colour: '#777',jump: 1},{id: 5,colour: '#E373FA',solid: 1,bounce: 1.1},{id: 6,colour: '#666',solid: 1,bounce: 0},{id: 7,colour: '#73C6FA',solid: 0,script: 'change_colour'},{id: 8,colour: '#FADF73',solid: 0,script: 'next_level'},{id: 9,colour: '#C93232',solid: 0,script: 'death'},{id: 10,colour: '#555',solid: 1},{id: 11,colour: '#0FF',solid: 0,script: 'unlock'}],data: [[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 11, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 10, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 1, 7, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 10, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 2, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 10, 10, 10,10,10,10,10,10, 2, 2, 2, 2, 0, 2, 1, 1, 1, 2, 2, 2, 2, 3, 3, 2, 1, 1],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2,  2, 10,  2, 2, 2, 2, 0, 2, 1, 1, 1, 1, 1, 1, 2, 3, 3, 2, 2, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 10, 10, 10, 10, 10, 10, 10, 10,  2, 2, 0, 0, 0, 2, 1, 2, 2, 2, 2, 1, 6, 6, 6, 2, 9, 9, 9, 9, 9],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 10, 10,  2,  2,  2,  2,  2,  2,  2, 2, 0, 0, 0, 2, 1, 2, 1, 1, 2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 9],[2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 2, 10, 10, 10, 10, 10, 10, 10, 10, 10, 2, 0, 0, 0, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 9],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 10, 2, 2, 10, 10, 10, 10, 10,  0,  0,  0, 0, 2, 2, 2, 2, 4, 2, 2, 1, 1, 1, 2, 0, 0, 0, 0, 9],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 10, 2, 2, 2,10, 10, 10, 10, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 2, 1, 1, 1,      2, 2, 2, 0, 0, 9, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 10, 2, 2, 2, 2, 10, 10, 10, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 2, 1, 1, 1, 1, 1,      2, 0, 0, 9, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 10, 10, 2, 2, 2, 2, 2, 2, 2, 0, 0, 2, 0,  2, 0, 0, 2, 4, 2, 2, 4, 2, 2, 2, 1,       2, 4, 1, 9, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 10, 2, 2, 2, 2, 2, 2, 2, 2, 9, 9, 2, 1, 2, 9, 9, 2,  4,  2, 2, 4, 2, 1, 1, 1,       2, 4, 1, 9, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 10, 2, 2, 2, 2, 2, 2, 2, 2, 9, 9, 2, 1, 2,  9,  9, 2, 4, 2, 2, 4, 2, 1, 2, 2,       2, 4, 1, 9, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 2, 2, 9, 9, 2, 1, 2, 9, 9, 2, 4, 2, 2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 2, 2, 9, 9, 2, 1, 2, 9, 9, 2, 4, 2, 2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 1, 2, 9, 9, 2, 4, 2, 2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 10, 1, 2, 2, 2, 2, 4, 2,2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 10, 10, 10, 10, 1, 1, 1, 1,1,4,2,2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 1, 2, 2, 2, 0, 0, 0, 2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 1, 2, 2, 2, 0, 0, 0, 2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 0, 0, 0, 2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 0, 0, 0, 2, 4, 2, 1, 2, 0, 0, 0, 0],[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 1, 2, 3, 3, 3, 3, 2, 9, 9, 9, 9, 9, 9, 9, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 3, 3, 3, 3, 2, 9, 9, 9, 9, 9, 9, 9, 2, 9],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],[2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 3, 3, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 9],[2, 1, 2, 2, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 3, 3, 2, 2, 2, 2, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 9],[2, 1, 2, 2, 2, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 3, 3, 2, 2, 2, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 9],[2, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 2, 1, 2, 2, 2, 2, 3, 3, 3, 3, 8, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 9],[2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 9],[2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 9, 9, 9, 2, 10, 10, 10, 10, 10, 10, 1, 1, 1, 1, 1, 1, 1, 11, 2, 2, 2, 2, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 9],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 10, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 0, 0, 0, 0, 2, 9, 9, 9, 9],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 0, 0, 0, 0, 2, 9, 9, 9, 9],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],[2, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 1, 1, 1, 1, 1, 1, 2],[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2],[2, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 6, 6, 2, 2, 2, 2, 2, 2, 6, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],[2, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 2, 5, 5, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 5, 5, 5, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]],gravity: {x: 0,y: 0.3},vel_limit: {x: 2,y: 16},movement_speed: {jump: 6,left: 0.3,right: 0.3},player: {x: 2,y: 2,colour: '#FF9900'},scripts: {change_colour: 'game.player.colour = "#"+(Math.random()*0xFFFFFF<<0).toString(16);',next_level: 'alert("Yay! You won! Reloading map.");game.load_map(map);',death: 'alert("You died!");game.load_map(map);',unlock: 'game.current_map.keys[10].solid = 0;game.current_map.keys[10].colour = "#888";'}
};var Clarity = function () {this.alert_errors   = false;this.log_info       = true;this.tile_size      = 16;this.limit_viewport = false;this.jump_switch    = 0;this.viewport = {x: 200,y: 200};this.camera = {x: 0,y: 0};this.key = {left: false,right: false,up: false};this.player = {loc: {x: 0,y: 0},vel: {x: 0,y: 0},can_jump: true};window.onkeydown = this.keydown.bind(this);window.onkeyup   = this.keyup.bind(this);
};Clarity.prototype.error = function (message) {if (this.alert_errors) alert(message);if (this.log_info) console.log(message);
};Clarity.prototype.log = function (message) {if (this.log_info) console.log(message);
};Clarity.prototype.set_viewport = function (x, y) {this.viewport.x = x;this.viewport.y = y;
};Clarity.prototype.keydown = function (e) {var _this = this;switch (e.keyCode) {case 37:_this.key.left = true;break;case 38:_this.key.up = true;break;case 39:_this.key.right = true;break;}
};Clarity.prototype.keyup = function (e) {var _this = this;switch (e.keyCode) {case 37:_this.key.left = false;break;case 38:_this.key.up = false;break;case 39:_this.key.right = false;break;}
};Clarity.prototype.load_map = function (map) {if (typeof map      === 'undefined'|| typeof map.data === 'undefined'|| typeof map.keys === 'undefined') {this.error('Error: Invalid map data!');return false;}this.current_map = map;this.current_map.background = map.background || '#333';this.current_map.gravity = map.gravity || {x: 0, y: 0.3};this.tile_size = map.tile_size || 16;var _this = this;this.current_map.width = 0;this.current_map.height = 0;map.keys.forEach(function (key) {map.data.forEach(function (row, y) {_this.current_map.height = Math.max(_this.current_map.height, y);row.forEach(function (tile, x) {_this.current_map.width = Math.max(_this.current_map.width, x);if (tile == key.id)_this.current_map.data[y][x] = key;});});});this.current_map.width_p = this.current_map.width * this.tile_size;this.current_map.height_p = this.current_map.height * this.tile_size;this.player.loc.x = map.player.x * this.tile_size || 0;this.player.loc.y = map.player.y * this.tile_size || 0;this.player.colour = map.player.colour || '#000';this.key.left  = false;this.key.up    = false;this.key.right = false;this.camera = {x: 0,y: 0};this.player.vel = {x: 0,y: 0};this.log('Successfully loaded map data.');return true;
};Clarity.prototype.get_tile = function (x, y) {return (this.current_map.data[y] && this.current_map.data[y][x]) ? this.current_map.data[y][x] : 0;
};Clarity.prototype.draw_tile = function (x, y, tile, context) {if (!tile || !tile.colour) return;context.fillStyle = tile.colour;context.fillRect(x,y,this.tile_size,this.tile_size);
};Clarity.prototype.draw_map = function (context, fore) {for (var y = 0; y < this.current_map.data.length; y++) {for (var x = 0; x < this.current_map.data[y].length; x++) {if ((!fore && !this.current_map.data[y][x].fore) || (fore && this.current_map.data[y][x].fore)) {var t_x = (x * this.tile_size) - this.camera.x;var t_y = (y * this.tile_size) - this.camera.y;if(t_x < -this.tile_size|| t_y < -this.tile_size|| t_x > this.viewport.x|| t_y > this.viewport.y) continue;this.draw_tile(t_x,t_y,this.current_map.data[y][x],context);}}}if (!fore) this.draw_map(context, true);
};Clarity.prototype.move_player = function () {var tX = this.player.loc.x + this.player.vel.x;var tY = this.player.loc.y + this.player.vel.y;var offset = Math.round((this.tile_size / 2) - 1);var tile = this.get_tile(Math.round(this.player.loc.x / this.tile_size),Math.round(this.player.loc.y / this.tile_size));if(tile.gravity) {this.player.vel.x += tile.gravity.x;this.player.vel.y += tile.gravity.y;} else {this.player.vel.x += this.current_map.gravity.x;this.player.vel.y += this.current_map.gravity.y;}if (tile.friction) {this.player.vel.x *= tile.friction.x;this.player.vel.y *= tile.friction.y;}var t_y_up   = Math.floor(tY / this.tile_size);var t_y_down = Math.ceil(tY / this.tile_size);var y_near1  = Math.round((this.player.loc.y - offset) / this.tile_size);var y_near2  = Math.round((this.player.loc.y + offset) / this.tile_size);var t_x_left  = Math.floor(tX / this.tile_size);var t_x_right = Math.ceil(tX / this.tile_size);var x_near1   = Math.round((this.player.loc.x - offset) / this.tile_size);var x_near2   = Math.round((this.player.loc.x + offset) / this.tile_size);var top1    = this.get_tile(x_near1, t_y_up);var top2    = this.get_tile(x_near2, t_y_up);var bottom1 = this.get_tile(x_near1, t_y_down);var bottom2 = this.get_tile(x_near2, t_y_down);var left1   = this.get_tile(t_x_left, y_near1);var left2   = this.get_tile(t_x_left, y_near2);var right1  = this.get_tile(t_x_right, y_near1);var right2  = this.get_tile(t_x_right, y_near2);if (tile.jump && this.jump_switch > 15) {this.player.can_jump = true;this.jump_switch = 0;} else this.jump_switch++;this.player.vel.x = Math.min(Math.max(this.player.vel.x, -this.current_map.vel_limit.x), this.current_map.vel_limit.x);this.player.vel.y = Math.min(Math.max(this.player.vel.y, -this.current_map.vel_limit.y), this.current_map.vel_limit.y);this.player.loc.x += this.player.vel.x;this.player.loc.y += this.player.vel.y;this.player.vel.x *= .9;if (left1.solid || left2.solid || right1.solid || right2.solid) {/* fix overlap */while (this.get_tile(Math.floor(this.player.loc.x / this.tile_size), y_near1).solid|| this.get_tile(Math.floor(this.player.loc.x / this.tile_size), y_near2).solid)this.player.loc.x += 0.1;while (this.get_tile(Math.ceil(this.player.loc.x / this.tile_size), y_near1).solid|| this.get_tile(Math.ceil(this.player.loc.x / this.tile_size), y_near2).solid)this.player.loc.x -= 0.1;/* tile bounce */var bounce = 0;if (left1.solid && left1.bounce > bounce) bounce = left1.bounce;if (left2.solid && left2.bounce > bounce) bounce = left2.bounce;if (right1.solid && right1.bounce > bounce) bounce = right1.bounce;if (right2.solid && right2.bounce > bounce) bounce = right2.bounce;this.player.vel.x *= -bounce || 0;}if (top1.solid || top2.solid || bottom1.solid || bottom2.solid) {/* fix overlap */while (this.get_tile(x_near1, Math.floor(this.player.loc.y / this.tile_size)).solid|| this.get_tile(x_near2, Math.floor(this.player.loc.y / this.tile_size)).solid)this.player.loc.y += 0.1;while (this.get_tile(x_near1, Math.ceil(this.player.loc.y / this.tile_size)).solid|| this.get_tile(x_near2, Math.ceil(this.player.loc.y / this.tile_size)).solid)this.player.loc.y -= 0.1;/* tile bounce */var bounce = 0;if (top1.solid && top1.bounce > bounce) bounce = top1.bounce;if (top2.solid && top2.bounce > bounce) bounce = top2.bounce;if (bottom1.solid && bottom1.bounce > bounce) bounce = bottom1.bounce;if (bottom2.solid && bottom2.bounce > bounce) bounce = bottom2.bounce;this.player.vel.y *= -bounce || 0;if ((bottom1.solid || bottom2.solid) && !tile.jump) {this.player.on_floor = true;this.player.can_jump = true;}}// adjust cameravar c_x = Math.round(this.player.loc.x - this.viewport.x/2);var c_y = Math.round(this.player.loc.y - this.viewport.y/2);var x_dif = Math.abs(c_x - this.camera.x);var y_dif = Math.abs(c_y - this.camera.y);if(x_dif > 5) {var mag = Math.round(Math.max(1, x_dif * 0.1));if(c_x != this.camera.x) {this.camera.x += c_x > this.camera.x ? mag : -mag;if(this.limit_viewport) {this.camera.x = Math.min(this.current_map.width_p - this.viewport.x + this.tile_size,this.camera.x);this.camera.x = Math.max(0,this.camera.x);}}}if(y_dif > 5) {var mag = Math.round(Math.max(1, y_dif * 0.1));if(c_y != this.camera.y) {this.camera.y += c_y > this.camera.y ? mag : -mag;if(this.limit_viewport) {this.camera.y = Math.min(this.current_map.height_p - this.viewport.y + this.tile_size,this.camera.y);this.camera.y = Math.max(0,this.camera.y);}}}if(this.last_tile != tile.id && tile.script) {eval(this.current_map.scripts[tile.script]);}this.last_tile = tile.id;
};Clarity.prototype.update_player = function () {if (this.key.left) {if (this.player.vel.x > -this.current_map.vel_limit.x)this.player.vel.x -= this.current_map.movement_speed.left;}if (this.key.up) {if (this.player.can_jump && this.player.vel.y > -this.current_map.vel_limit.y) {this.player.vel.y -= this.current_map.movement_speed.jump;this.player.can_jump = false;}}if (this.key.right) {if (this.player.vel.x < this.current_map.vel_limit.x)this.player.vel.x += this.current_map.movement_speed.left;}this.move_player();
};Clarity.prototype.draw_player = function (context) {context.fillStyle = this.player.colour;context.beginPath();context.arc(this.player.loc.x + this.tile_size / 2 - this.camera.x,this.player.loc.y + this.tile_size / 2 - this.camera.y,this.tile_size / 2 - 1,0,Math.PI * 2);context.fill();
};Clarity.prototype.update = function () {this.update_player();
};Clarity.prototype.draw = function (context) {this.draw_map(context, false);this.draw_player(context);
};window.requestAnimFrame =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {return window.setTimeout(callback, 1000 / 60);};var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d');canvas.width = 400;
canvas.height = 400;var game = new Clarity();game.set_viewport(canvas.width, canvas.height);game.load_map(map);game.limit_viewport = true;var Loop = function() {ctx.fillStyle = '#333';ctx.fillRect(0, 0, canvas.width, canvas.height);game.update();game.draw(ctx);window.requestAnimFrame(Loop);
};Loop();
</script>
</body>
</html>

我预设了好几种通关方式，快来探索吧！

如果你觉得我的代码还算有趣，在你的学习中能有所帮助，请查看我的置顶文章，我由衷感谢！

前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？

JS新版激流勇进附地图详解相关推荐

苹果谷歌微软三国混战附地图详解
导读:据Gizmodo报道,令人吃惊的并不是微软或者苹果的规模,他们有几十年的历史,打造了行业的巨擘(现在又一致困在时空隧道里),真正令人吃惊的是Google.在十几年时间里,Google一举成为网络 ...
java国王毒酒答案,换换脑子500桶酒国王用囚犯找毒酒答案-500桶酒其中1桶是毒酒找毒酒答案最新版【附公式详解】-东坡下载...
烧下脑子,请诸位为国王出个主意:500桶酒,其中1桶是毒酒:48小时后要举行酒会:毒酒喝下去会在之后的第23-24小时内毒死人:国王决定用囚犯来试酒,不介意囚犯死多少,只要求用最少的囚犯来测试出哪一桶 ...
我的世界天空之城服务器位置,我的世界天空之城建筑地图详解（附存档）
我的世界空岛生存地图详解首次制作的空岛地图.那废话就不多说了,那下面就一起来看看下面的这个玩家首次制作的空岛生存地图吧!喜欢的玩家还可以下载下来玩玩哦~ 游戏园我的世界官方群: 325049520 ...
分治算法小结（附例题详解）
分治算法小结(附例题详解) 我的理解: 分治算法我的理解就是看人下菜碟,我们要解决的问题就好像一群人构成的集体,要我们解决这个问题,那我们就要满足这群人里面每个人不同的需求,也就是写出解决的代码,把每 ...
js showModalDialog参数的使用详解（转）
js showModalDialog参数的使用详解_javascript技巧_脚本之家 http://www.jb51.net/article/45281.htm 本篇文章主要是对js中showMod ...
[js]JavaScript Number.toPrecision() 函数详解
[js]JavaScript Number.toPrecision() 函数详解 JavaScript: numberObject.toPrecision( [ precision ] ) 如果没有提 ...
wow mysql dbc_DBC中悲观锁介绍附案例详解
DBC中悲观锁介绍附案例详解了解下DBC中悲观锁: 代码如下: BDUtils 工具类: package JDBC; import java.sql.*; public class BDUtils ...
java web试题_Java web开发经典面试题汇总（内附答案详解）
原标题:Java web开发经典面试题汇总(内附答案详解) 1.说出Servlet 的生命周期,并说出Servlet 和CGI 的区别? 答:Web 容器加载Servlet 并将其实例化后,Servl ...
node mysql 查询_Node.js使用mysql进行查询详解
本篇教程介绍了Node.js使用mysql进行查询详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < 因为返回的是个对象 var selectSql1=&quo ...

JS新版激流勇进附地图详解

JS新版激流勇进附地图详解相关推荐

最新文章

热门文章