萌新自己做的 pixi 宝藏猎人小游戏

最新推荐文章于 2023-09-19 16:54:38 发布

kirito0615

最新推荐文章于 2023-09-19 16:54:38 发布

阅读量582

点赞数

分类专栏：小游戏文章标签：前端游戏

本文链接：https://blog.csdn.net/kirito0615/article/details/108669525

版权

这是一款由萌新使用 Pixi.js 开发的键盘控制移动小游戏，玩家通过键盘操作主角寻找宝藏。游戏中的主角监听点击事件，虽然简单但充满趣味。由于作者个人原因，部分游戏元素并未完成，如勇者携带宝箱回起点的设定。

摘要由CSDN通过智能技术生成

预览图(写的是默认全屏的,这是手机端效果)
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

最低0.47元/天解锁文章

kirito0615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
萌新自己做的 pixi 宝藏猎人小游戏

预览图(写的是默认全屏的,这是手机端效果)ps: 不要吐槽我的游戏元素截图谢谢,不想用ps了…本来有个门是要勇者带着宝箱回去的,不想做了…做的是键盘控制移动的主角是手写的监听点击事件,有点low,请不要喷萌新.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
复制链接

扫一扫

专栏目录