原生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.........完整代码请登录后点击上方下载按钮下载查看