HTML5推箱子实现

最新推荐文章于 2021-04-14 15:28:27 发布

北漂程序员-阿力

最新推荐文章于 2021-04-14 15:28:27 发布

阅读量4.2k

点赞数 4

分类专栏： JavaScript 文章标签： html5 canvas 推箱子游戏源码

本文链接：https://blog.csdn.net/qq_24082497/article/details/51952700

版权

结果图
这里写图片描述

首先创建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=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

北漂程序员-阿力

关注关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
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,
复制链接

扫一扫