用 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