推箱子游戏JS实现

已于 2022-07-11 13:52:36 修改
阅读量1.7k 收藏 16
点赞数 1
分类专栏： Web前端 文章标签： html5 javascript
于 2022-07-07 15:49:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whrjxyygx/article/details/125660567
版权
这篇博客通过一系列HTML和JavaScript代码展示了如何利用Canvas画布创建一个推箱子游戏。首先，定义了游戏地图和各种元素，然后逐步实现了地图绘制、玩家角色移动以及碰撞检测和游戏结束条件的判断。文章提供了关键代码片段，帮助读者理解游戏逻辑和交互处理。
摘要由CSDN通过智能技术生成

参考以下教学视频编写

教学视频：Canvas画布实现推箱子游戏-HTML5前端设计JavaScript原生开发_哔哩哔哩_bilibili

箱子地图

Boxdata.js

//1：围墙 2：目标点 3：箱子 4：角色 5：在目标点的箱子
var levels = [];
levels[0]=[
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
    [0,0,0,0,0,1,2,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,0,1,0,3,0,4,1,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
]

1.地图绘制

pushBox.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Boxdata.js"></script>
</head>
<body>
    <canvas id="mycanvas" height="800" width="800">     
    </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canv = document.getElementById("mycanvas");
        var ctx = canv.getContext("2d");

        var level = levels[0];

        var g={
            wall:{color:'#333',data:[]},
            target:{color:'#9f3',data:[]},
            box:{color:'rgba(255,50,0,0.8)',data:[]},
            player:{color:'rgba(255,220,0,0.8)',data:[]}
        }

        var objects = ['wall','target','box','player'];

        for(let i=0;i<16;i++){
            for(let j=0;j<16;j++){
                let d=level[i][j];
                let id = i*16+j;
                if(d>0){
                    if(d==5){
                        g['target'].data.push(id);
                        g['box'].data.push(id);
                    }else{
                        g[objects[d-1]].data.push(id);
                    }
                }
            }
        }

      g['wall'].data.forEach(n=>drawRRect('wall',n))
      g['target'].data.forEach(n=>drawRRect('target',n))
      g['box'].data.forEach(n=>drawRRect('box',n))
      g['player'].data.forEach(n=>drawRRect('player',n))
      
     
// 绘制圆角矩形
       function drawRRect(object,id){
           let w = 800/16,r=5,m=2;
           let [x,y] = [id%16*w,~~(id/16)*w]; //~~取整
           ctx.save();
           if(object=='target'){
               r=24              
           }
           ctx.beginPath();
           ctx.moveTo(x,y+r);
           ctx.arcTo(x,y+w-m,x+w-m,y+w-m,r);
           ctx.arcTo(x+w-m,y+w-m,x+w-m,y+w-m-r,r);
           ctx.arcTo(x+w-m,y,x,y,r);
           ctx.arcTo(x,y,x,y+w-m,r);
           ctx.fillStyle=g[object].color;
           ctx.fill();
           ctx.restore();
       }
    </script>
</body>
</html>

2.移动玩家角色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Boxdata.js"></script>
</head>
<body>
    <canvas id="mycanvas" height="800" width="800">     
    </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canv = document.getElementById("mycanvas");
        var ctx = canv.getContext("2d");
 
        var level = levels[0];
 
        var g={
            wall:{color:'#333',data:[]},
            target:{color:'#9f3',data:[]},
            box:{color:'rgba(255,50,0,0.8)',data:[]},
            player:{color:'rgba(255,220,0,0.8)',data:[]}
        }
 
        var objects = ['wall','target','box','player'];
 
        for(let i=0;i<16;i++){
            for(let j=0;j<16;j++){
                let d=level[i][j];
                let id = i*16+j;
                if(d>0){
                    if(d==5){
                        g['target'].data.push(id);
                        g['box'].data.push(id);
                    }else{
                        g[objects[d-1]].data.push(id);
                    }
                }
            }
        }
 
      g['wall'].data.forEach(n=>drawRRect('wall',n))
      g['target'].data.forEach(n=>drawRRect('target',n))
      g['box'].data.forEach(n=>drawRRect('box',n))
      g['player'].data.forEach(n=>drawRRect('player',n))
      
     
        // 绘制圆角矩形
       function drawRRect(object,id){
           let w = 800/16,r=5,m=2;
           let [x,y] = [id%16*w,~~(id/16)*w]; //~~取整
           ctx.save();
           if(object=='target'){
               r=24              
           }
           ctx.beginPath();
           ctx.moveTo(x,y+r);
           ctx.arcTo(x,y+w-m,x+w-m,y+w-m,r);
           ctx.arcTo(x+w-m,y+w-m,x+w-m,y+w-m-r,r);
           ctx.arcTo(x+w-m,y,x,y,r);
           ctx.arcTo(x,y,x,y+w-m,r);
           ctx.fillStyle=g[object].color;
           ctx.fill();
           ctx.restore();
       }

       //添加键盘监听
       document.addEventListener('keydown',ev=>{
           //方向键,根据方向键，dir移动的id
           let dir = [-1,-16,1,16][ev.keyCode-37]
           console.log(ev.code,ev.keyCode,dir)
           let player = g.player.data[0]
           let index = g['player'].data.indexOf(player)
           console.log(player,index)
           move('player',player,dir)
       })

       //移动玩家角色和箱子
       function move(who,id,dir){
            let next = id+dir
            let index = g[who].data.indexOf(id)
            g[who].data[index]=next
            //重绘地图
            ctx.clearRect(0,0,800,800)
            objects.forEach(obj=>g[obj].data.forEach(n=>drawRRect(obj,n)))
       }
    </script>
</body>
</html>

3. 添加撞墙判断，移动箱子和过关判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Boxdata.js"></script>
</head>
<body>
    <canvas id="mycanvas" height="800" width="800">     
    </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canv = document.getElementById("mycanvas");
        var ctx = canv.getContext("2d");
 
        var level = levels[0];
 
        var g={
            wall:{color:'#333',data:[]},
            target:{color:'#9f3',data:[]},
            box:{color:'rgba(255,50,0,0.8)',data:[]},
            player:{color:'rgba(255,220,0,0.8)',data:[]}
        }
 
        var objects = ['wall','target','box','player'];
 
        for(let i=0;i<16;i++){
            for(let j=0;j<16;j++){
                let d=level[i][j];
                let id = i*16+j;
                if(d>0){
                    if(d==5){
                        g['target'].data.push(id);
                        g['box'].data.push(id);
                    }else{
                        g[objects[d-1]].data.push(id);
                    }
                }
            }
        }
 
      g['wall'].data.forEach(n=>drawRRect('wall',n))
      g['target'].data.forEach(n=>drawRRect('target',n))
      g['box'].data.forEach(n=>drawRRect('box',n))
      g['player'].data.forEach(n=>drawRRect('player',n))
      
     
        // 绘制圆角矩形
       function drawRRect(object,id){
           let w = 800/16,r=5,m=2;
           let [x,y] = [id%16*w,~~(id/16)*w]; //~~取整
           ctx.save();
           if(object=='target'){
               r=24              
           }
           ctx.beginPath();
           ctx.moveTo(x,y+r);
           ctx.arcTo(x,y+w-m,x+w-m,y+w-m,r);
           ctx.arcTo(x+w-m,y+w-m,x+w-m,y+w-m-r,r);
           ctx.arcTo(x+w-m,y,x,y,r);
           ctx.arcTo(x,y,x,y+w-m,r);
           ctx.fillStyle=g[object].color;
           ctx.fill();
           ctx.restore();
       }
 
       //添加键盘监听
       document.addEventListener('keydown',ev=>{
           //方向键,根据方向键，dir移动的id
           let dir = [-1,-16,1,16][ev.keyCode-37]
           
           let playerid = g.player.data[0]

	   let next = playerid+dir
           
	   //判断是否撞墙	
	   if(g.wall.data.includes(next)) return

	   //判断是否移动箱子	 
	   if(g.box.data.includes(next)){

		let boxid=next
		
		let boxnext = boxid+dir
		
                //判断箱子是否撞墙或撞箱子
		if(g.wall.data.includes(boxnext)||g.box.data.includes(boxnext)) return
		
		move('box',boxid,dir)
			
           }

           //移动玩家角色
           move('player',playerid,dir)

	   //判断游戏结束
	   checkOver()
       })
 
       //移动玩家角色和箱子
       function move(who,id,dir){
            let next = id+dir
            let index = g[who].data.indexOf(id)
	    
            g[who].data[index]=next
	    
            //重绘地图
            ctx.clearRect(0,0,800,800)
            objects.forEach(obj=>g[obj].data.forEach(n=>drawRRect(obj,n)))
       }

	//判断游戏结束
	function checkOver(){
        let win = g.box.data.every(b=>g.target.data.includes(b))
	if(win){
        	setTimeout(()=>{
			alert("恭喜过关！")	
		},100)
	  }
        }
    </script>
</body>
</html>

知止定静行
关注
专栏目录
JavaScript实现推箱子游戏(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-26 249
JavaScript实现推箱子游戏(附完整源码)
JS推箱子
qq_43327962的博客
03-23 335
js推箱子小项目 效果图如下： index.html代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Canvas推箱子小游戏DEMO演示</title> <style>/*css样式表的衣...
Three.js实现3D推箱子小游戏
最新发布
frontend_frank的博客
03-22 209
最近一直在学 Three.js ，看到别人做出那么多炫酷的效果，觉得太厉害了，于是决定从一些简单的效果开始做。所以打算借这个 小游戏[1] 来认真学习一下 Three.js 。在线预览https://liamwu50.github.io/three-sokoban-live/游戏介绍"推箱子" 游戏最早是由日本游戏开发者Hiroyuki Imabayashi 于1982年开发和发布的。这款游戏的日...
JS实现推箱子游戏
2201_75321887的博客
04-24 892
使用JS制作推箱子游戏主要是使用了键盘的监听事件（onkeyup，onkeydown，onkeypress），它们的不同点在于：onkeyup是按键按下去然后抬起的时候触发事件；onkeydown是按键按下去时就触发事件；onkeypress是按键按下去且产生了字符时触发事件，这里我们主要使用onkeyup。
js推箱子游戏
05-07
js初学者练习向，附带流程结构，及初期各个版本
JS推箱子小游戏
电脑高级开关机工程师的博客
06-13 1269
JavaScript推箱子小游戏
原生JS推箱子
qq_40566547的博客
11-28 866
最近学习了渡一教育关于模块化相关的课程，其中有一个练习《推箱子》引起了我的兴趣，但由于课程练习缺乏闯关机制，故我在此基础上做了一些修改，加入了我的一些想法，在此分享给大家 素材和关卡数据来源：2017ife-task/hard/pushBox/img at master · woai3c/2017ife-task · GitHub 上面素材为我此次推箱子素材来源，大家也可参照作者写的代码自己编写。 文件目录 HTML <!DOCTYPE html> <html lang=.
JS实现推箱子小游戏——源码
07-10
JS实现推箱子小游戏——源码 第一步布局 1.设置盒子元素 <!-- 功能键 --> 自动行走"> 上一步"> 下一关"> 上一关"> <!-- 游戏区域 --> <div id="warp"></div> 2.给盒子设置相关的样式 * { margin: ...
vue.js推箱子小游戏代码
07-31
在这个推箱子游戏中，Vue.js被用来管理游戏状态、渲染界面以及处理用户输入。例如，游戏地图、箱子和玩家的位置等数据都可以存储在Vue.js的数据模型中，当这些数据发生变化时，Vue.js会自动更新相应的视图。此外，...
推箱子游戏-原生JavaScript实现
04-18
总结来说，创建一个原生JavaScript实现的推箱子游戏，需要深入理解JavaScript的DOM操作、事件处理、动画制作以及逻辑判断。这不仅锻炼了开发者编程技巧，也提供了一个有趣的项目，让学习者在实践中提升技能。通过这...
推箱子js源码
05-20
里面是推箱子的javascript的程序，和推箱子流程结构
javascript版的推箱子游戏
04-16
js,javascript,推箱子,js版推箱子可以自定义关卡，系统能记忆关卡步骤自动运行！
用html和js实现推箱子
12-23
js实现推箱子
一个用原生js编写的智能推箱子
08-10
一个用原生js编写的智能推箱子
JavaScript开发的推箱子游戏
01-18
JavaScript开发的推箱子游戏。打开index.htm即可本地测试
推箱子-微信小游戏-项目源码
07-07
这是一个微信小游戏项目源码，是经典怀旧的推箱子游戏，共100关卡，以下还有↓ 请用微信开发者工具选小游戏导入即可，可正常编译运行，请放心下载， 类似解锁关卡，一种益智解密的游戏，适合新手入门参考学习，能学...
JavaScript编写推箱子游戏
10-23
在介绍如何使用JavaScript编写推箱子游戏之前，我们需要了解一些基础概念和知识点。首先，推箱子是一款经典的益智游戏，玩家需要控制角色推动箱子到指定位置。游戏通常包含多个关卡，每个关卡都有不同的地图和布局。...
js代码实现模仿推箱子
weixin_45747808的博客
10-15 294
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="1.jpg" style="height: 100px;width: 100px; po...
js推箱子
allen_csdns的博客
11-22 169
源码Demo： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <center> <h3>请自定义上下左右...
JavaScript实现推箱子游戏代码详解
"这篇教程详细解析了如何使用JavaScript实现一个推箱子小游戏的步骤。作者将代码上传至GitHub，便于读者下载并本地运行查看效果。文章首先介绍了渲染地图的过程，通过HTML结构创建游戏地图，利用CSS类来区分不同区域...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值