游戏制作-推箱子游戏html5版（可以在线预览）

最新推荐文章于 2023-05-25 13:20:01 发布

鱿鱼酱紫

最新推荐文章于 2023-05-25 13:20:01 发布

阅读量2.1k

点赞数 4

分类专栏：游戏开发 html5 文章标签：游戏 html html5 javascript 游戏开发

本文链接：https://blog.csdn.net/dayouyu001/article/details/115627594

版权

用 html 做了一款推箱子的小游戏（只做了一个关卡），屏幕触控和键盘方向键控制小人推箱子、重新开始、上一步及通关等功能，直接上图：

预览地址

效果链接（只看看不如亲自体验一下，因为写了键盘监听的缘故，键盘事件都被停用了）：
http://h5demo.yyfuncdn.com/res/gameDemo/sokoban/

手机扫码运行：
在这里插入图片描述

下面是所有的项目文件：

game.html 文件是项目的运行文件，里面包含了创建舞台、创建游戏场景、人物等内容的操作，最后还设置了键盘操控
.

游戏源码被放到下面公众号里面啦，有需要的小伙伴可以扫码关注，发送 “推箱子” 获取哦
在这里插入图片描述

感谢大家支持……^ ^
.

项目代码

<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
    <script src='js/pixi.js'></script>
    <script src='js/background.js'></script>
    <script src="js/wall.js"></script>
    <script src="js/box.js"></script>
    <script src="js/ball.js"></script>
    <script src="js/role.js"></script>
    <script src="js/text.js"></script>
    <script src="js/reset.js"></script>
    <meta name="viewport" content="width=device-width,height=device-height"/>
    <style>
        body{
   
            background-color:black;
        }
        canvas{
   
            width:100%;
            max-width:500px;
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        }
     </style>
</head>
<body>
    <script>
        //创建舞台
        var app = new PIXI.Application(560,800);
        document.body.appendChild(app.view);
        //生成背景
        var bg = new Background(560,800);
        //创建地图数组
        var mapArr = [];
        //地图二维数组初始化
        function init(){
   
            var width = 40;
            var height = 40;
            var left = 20;
            var up = 200;
            for(var i = 0;i < 14;i++) {
   
                mapArr.push([]);
                for(var j = 0;j < 9;j++) {
   
                    mapArr[i].push([]);
                    mapArr[i][j] = {
   type:null};
                }
            }
            //墙方块在数组中的位置
            var wallx = [0,0,0,0,0,0,0,1,1,2,2,2,2,2,3,3,3,4,4,4,5,5,5,5,5,5,5,6,6,7,7,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10,11,11,11,12,12,12,13,13,13,13,13,13,13,13,13];
            var wally = [0,1,2,3,4,5,6,0,6,0,6,7,8,9,0,6,9,0,6,9,0,1,2,3,5,6,9,0,9,0,3,5,6,8,9,0,3,6,9,0,3,4,9,0,3,4,9,0,1,9,1,5,9,1,2,3,4,5,6,7,8,9];
            //生成墙方块
            for(var i = 0;i < wallx.length;i++) {
   
                var x = wallx[i];
                var y = wally[i];
                var wall = new Wall();
                wall.pos(left+x*width,up+y*height);
                wall.posArr = {
   x:x,y:y};
                mapArr[x][y] = {
   type:"wall"};
            }
            //箱子在数组中的位置
            var boxx = [4,6,7,7,9,9,10,10,11,11];
            var boxy = [7,3,2,7,6,7,2,5,6,7];
            //生成箱子
            for(var i = 0;i < boxx.length;i++) {
   
                var x = boxx[i];
                var y = boxy[i];
                var box = new Box();
                box.pos(left+x*width,up+y*height);
                box.posArr = {
   x:x,y:y};
                mapArr[x][y] = {
   type:"box",obj:box};
                boxArr.push(box);
            }
            //球体在数组中的位置
            var ballx = [1,1,1,1,1,2,2,2,2,2];
            var bally = [1,2,3,4,5,1,2,3,4,5];
            //生成球体
            for(var i = 0;i < ballx.length;i++) {
   
                var x = ballx[i];
                var y = bally[i];
                var ball = new Ball();
                ball.pos(left+x*width,up+y*height);
                ball.posArr = {
   x:x,y:y

最低0.47元/天解锁文章

鱿鱼酱紫

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
游戏制作-推箱子游戏html5版（可以在线预览）

介绍又用 html 做了一款推箱子的小游戏，废话不说直接上图：预览地址效果链接（只看看不如亲自体验一下）：xxxx手机扫码运行：xxxx距上次开发一款洛克人小游戏之后，又搞了一个推箱子的小游戏（只做了一个关卡），控制小人推箱子以及通关，下面的是源码下载链接：点击下载xxxx下面是所有的项目文件：game.html...
复制链接

扫一扫