h5 小球走迷宫游戏源代码
最编程
2024-06-29 21:27:57
...
无意中找到的一个挺有意思的小游戏，关键是用h5写的，下面就分享给大家源码
还是先来看小游戏的截图
可以用键盘的三个键去控制它，然后通关
下面是源代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</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, /* Key vairables: id [required] - an integer that corresponds with a tile in the data array. colour [required] - any javascript compatible colour variable. solid [optional] - whether the tile is solid or not, defaults to false. bounce [optional] - how much velocity is preserved upon hitting the tile, 0.5 is half. jump [optional] - whether the player can jump while over the tile, defaults to false. friction [optional] - friction of the tile, must have X and Y values (e.g {x:0.5, y:0.5}). gravity [optional] - gravity of the tile, must have X and Y values (e.g {x:0.5, y:0.5}). fore [optional] - whether the tile is drawn in front of the player, defaults to false. script [optional] - refers to a script in the scripts section, executed if it is touched. */ 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'} ], /* An array representing the map tiles. Each number corresponds to a key */ data: [ [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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2], [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, 2], [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, 2], [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, 2], [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 6, 6, 6, 6, 6, 2], [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 2], [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, <