原生js实现多关卡小人推箱子游戏代码-html代码-BFW代码库

原生js实现多关卡小人推箱子游戏代码

代码语言：html

所属分类：游戏

代码描述：原生js实现多关卡小人推箱子游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
	<head><!--头部-->
		<meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
		<meta name="Keywords" content="关键词">
		<meta name="Description" content="描述">
		<title>HTML5 canvas小人推箱子小游戏代码</title>
		<style>/*css样式表的衣柜*/
		*{
			margin:0px;
			padding:0px;
		}
		body{
			overflow:hidden;
		}
		.game{
			width:560px;
			margin:50px auto;
		}
		</style>
	</head>
	<body onkeydown="doKeyDown(event)"><!--身体-->
		<div class="game">
			<canvas id="canvas" width="560" height="560"></canvas>
			<div id="msg"></div>
			<input type="button" value="上一关" onClick="NextLevel(-1)">
			<input type="button" value="下一关" onClick="NextLevel(1)">
			<input type="button" value="重玩本关" onClick="NextLevel(0)">
			<input type="button" value="游戏说明" onClick="showHelp()">
		</div>
	
	<script src="//repo.bfw.wiki/bfwrepo/images/tuigame/mapdata100.js"></script>
	<script>
		var can = document.getElementById("canvas");
		var msg = document.getElementById("msg");
		var cxt = can.getContext("2d");
		var w = 35,h = 35;
		var curMap;//当前的地图
		var curLevel;//当前等级的地图
		var curMan;//初始化小人
		var iCurlevel = 0;//关卡数
		var moveTimes = 0;//移动了多少次
		//预加载所有图片
		var oImgs = {
			"block" : "//repo.bfw.wiki/bfwrepo/images/tuigame/block.gif",
			"wall" : "//repo.bfw.wiki/bfwrepo/images/tuigame/wall.png",
			"box" : "//repo.bfw.wiki/bfwrepo/images/tuigame/box.png",
			"ball" : "//repo.bfw.wiki/bfwrepo/images/tuigame/ball.png",
			"up" : "//repo.bfw.wiki/bfwrepo/images/tuigame/up.png",
			"down" : "//repo.bfw.wiki/bfwrepo/images/tuigame/down.png",
			"left" : "//repo.bfw.wiki/bfwrepo/images/tuigame/left.png",
			"right" : "//repo.bfw.wiki/bfwrepo/images/tuigame/right.png",
		}
		function imgPreload(srcs,callback){
			var count = 0,imgNum = 0,images = {};

			for(src in srcs){
				imgNum++;
			}
			for(src in srcs ){
				images[src] = new Image();
				images[src].onload = function(){
					//判断是否所有的图片都预加载完成
					if (++count >= imgNum)
					{
						callback(images);
					}
				}
				images[src].src = srcs[src];
			}
		}
		var block,wall,box,ball,up,down,left,right;
		imgPreload(oImgs,function(images){
			//console.log(images.block);
			block = images.block;
			wall = images.wall;
			box = images.box;
			ball = images.ball;
			up = images.up;
			down = images.down;
			left = images.left;
			right = images.right;
			init();
		});
		//初始化游戏
		function init(){
			//InitMap();
			//DrawMap(levels[0]);
			initLevel();//初始化对应等级的游戏
			showMoveInfo();//初始化对应等级的游戏数据
		}
		//绘制地板
		function InitMap(){
			for (var i=0;i<16 ;i++ )
			{
				for (var j=0;j<16 ;j++ )
				{
					cxt.drawImage(block,w*j.........完整代码请登录后点击上方下载按钮下载查看