Hello,I am Waleee

Java狗在成长

HTML5推箱子实现

结果图
这里写图片描述

首先创建canvas

<body>
    <canvas id="canvas" width="400" height="400">
        浏览器不兼容
    </canvas>
</body>

第一步:画二维数组地图

0表示平地 1表示墙 2表示小人 3表示箱子 4表示目标

var gameMap1=[
    [1,1,1,1,1,1,1,1,1,1],
    [1,1,1,0,0,0,0,4,1,1],
    [1,1,1,1,0,0,1,1,1,1],
    [1,4,0,0,0,0,0,0,0,1],
    [1,0,0,0,1,2,0,0,0,1],
    [1,0,0,0,1,0,0,0,0,1],
    [1,0,0,0,1,0,3,0,0,1],
    [1,0,0,0,3,3,0,0,0,1],
    [1,0,0,0,0,4,0,0,0,1],
    [1,1,1,1,1,1,1,1,1,1]
];

第二步:导入图片

var block=new Image();//0
block.src="img/block.gif";
var wall=new Image();//1
wall.src="img/wall.png";
var man=new Image();//2
man.src="img/down.png";
var box=new Image();//3
box.src="img/box.png";
var target=new Image();//4
target.src="img/ball.png";
var completedBox=new Image();//5
completedBox.src="img/comp_box.png";

第三步:初始化

window.onload=function(){

    canvas=document.getElementById("canvas");
    ctx=canvas.getContext("2d");
    /**
     * 地图初始化
     */
    gameMap=gameMap1;
    initMap(gameMap);
}
/**
 * 地图初始化
 */
function initMap(gameMap){
    for(var i=0;i<gameMap.length;i++){
        for(var j=0;j<gameMap[i].length;j++){
            var pic = block;
            switch(gameMap[i][j]){
                case 0:
                    pic = block;
                    break;
                case 1:
                    pic = wall;
                break;
                case 2:
                    manPosX=w*j;
                    manPosY=h*i;
                    pic = man;
                    break;
                case 3:
                    pic = box;
                    break;
                case 4:
                    pic = target;
                    break;
            }
            ctx.drawImage(pic,w*j,h*i,pic.width,pic.height);
        }
    }
}

第四步:添加键盘事件

//body绑定键盘事件
<body onkeydown="doKeyDown(event)">
    <canvas id="canvas" width="400" height="400" >
            浏览器不兼容
    </canvas>
</body>

实现doKeyDown(event)方法

/**
* 键盘事件处理
 * @param {Object} e
 */
function doKeyDown(e){
    console.info(e);
    switch(e.keyCode){
        case 37://left
            go('left');
            break;
        case 38://up
            go('up');
            break;
        case 39://right
            go('right');
            break;
        case 40://down
            go('down')
            break;
    }
}

第五步:实现对象移动

    /**
    * 移动对象
    * @param {Object} obj
    * @param {Object} originX
    * @param {Object} originY
    * @param {Object} newX
    * @param {Object} newY
    */
function move(obj,originX,originY,newX,newY){
    //画一个新的对象
    ctx.drawImage(obj,newX,newY,w,h);
    //原来位置的对象的删除
    ctx.clearRect(originX,originY,w,h);
    //在原来的位置画block对象
    ctx.drawImage(block,originX,originY,block.width,block.height);
}

第六步实现上下左右移动
向下移动为例:

/**
 * 向下移动
 */
function goDown(){
    //原来位置暂存到tempX,tempY,为了删除原来位置的对象做好准备
    var tempX=manPosX;
    var tempY=manPosY;
    //算出对象在二位数组中的位置i,j
    var i=manPosY/h;
    var j=manPosX/w;
    //判断二位数组中的下一个位置能不能走,如果等于0表示能走
    if(gameMap[i+1][j]==0){
        man.src="img/down.png";
        manPosY+=h;
        move(man,tempX,tempY,manPosX,manPosY);
        //人走到了下一个位置以后下一个位置的值为2原来的位置的值改成0
        gameMap[i+1][j]=2;
        gameMap[i][j]=0;
        //如果人遇到了箱子,先移动箱子,移动箱子之前要判断箱子的下一个位置能不能走,如果能走把箱子移到下一个位置,人到箱子的位置
    }else if(gameMap[i+1][j]==3){
        var boxX=j*w;
        var boxY=(i+1)*h;
        if(gameMap[i+2][j]==0){
            move(box,boxX,boxY,boxX,boxY+h);
            man.src="img/down.png";
            manPosY+=h;
            move(man,tempX,tempY,manPosX,manPosY);

            gameMap[i+1][j]=2;
            gameMap[i+2][j]=3;
            gameMap[i][j]=0;
    //如果下一个位置是目标点箱子移到目标然后目标点的位置改成5
        }else if(gameMap[i+2][j]==4){
            move(completedBox,boxX,boxY,boxX,boxY+w);
            man.src="img/down.png";
            manPosY+=w;
            move(man,tempX,tempY,manPosX,manPosY);
            gameMap[i+2][j]=5;
            gameMap[i+1][j]=2;
            gameMap[i][j]=0;
        }
    }
}

向上,向左,向右同理。

第七步:判断胜利

/**
 * 判断胜利
 */
function checkFinish(){
    for(var i=0;i<gameMap.length;i++){
        for(var j=0;j<gameMap[i].length;j++){
            if(gameMap[i][j]==3 || gameMap[i][j]==4){
                return false;
            }
        }
    }
    return true;
}

源码下载:http://download.csdn.net/detail/qq_24082497/9579876

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_24082497/article/details/51952700
个人分类: JavaScript
想对作者说点什么? 我来说一句

HTML5推箱子简单实现

2016年07月19日 24KB 下载

Javascript 推箱子经典游戏

2009年04月06日 1KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭