预览图(写的是默认全屏的,这是手机端效果)
ps: 不要吐槽我的游戏元素截图谢谢,不想用ps了…本来有个门是要勇者带着宝箱回去的,不想做了…
做的是键盘控制移动的
主角是手写的监听点击事件,有点low,请不要喷萌新.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../pixi/pixi.min.js"></script>
<script src="../pixi/bump.js"></script>
<script src="../pixi/dust.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
let type = "WebGL"
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas"
}
PIXI.utils.sayHello(type)
let b = new Bump(PIXI);
let d = new Dust(PIXI);
let app = new PIXI.Application(1000, 600, {
// antialias: true,
// transparent: true,
// resolution: 1
});
let winWidth = window.innerWidth
let winHeight = window.innerHeight
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);
document.body.appendChild(app.view);
let blobUrl = "http://127.0.0.1:5500/images/blob.png"
let doorUrl = "http://127.0.0.1:5500/images/door.png"
let dungeonUrl = "http://127.0.0.1:5500/images/dungeon.png"
let explorerUrl = "http://127.0.0.1:5500/images/explorer.png"
let treasureUrl = "http://127.0.0.1:5500/images/treasure.png"
PIXI.loader.add([blobUrl, doorUrl, dungeonUrl, explorerUrl, treasureUrl]).load(setup);
let door, dungeon, explorer, treasure, blob;
// 怪物位置相关
let numberOfBlobs = 6;
let spacing = 48;
let xOffset = 150;
let speed = 2;
let direction = 1;
let blobs = [];
// 设置Pixi并加载纹理图集文件-调用“Setup”
function