Hilo 例子

最新推荐文章于 2023-05-22 20:43:59 发布

红孩儿2011

最新推荐文章于 2023-05-22 20:43:59 发布

阅读量317

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_26642611/article/details/105068374

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="full-screen" content="true">
  <meta name="screen-orientation" content="portrait">
  <meta name="x5-fullscreen" content="true">
  <meta name="360-fullscreen" content="true">
  <script src="hilo-standalone.min.js"></script>
  <style type="text/css"></style>

</head>

<body style="background-color: #fff; margin: 0; padding: 0;" onload="init();">
  <div class="gamepage" id="gamepage"></div>

  <script type="text/javascript">
    function init() {
      this.stage = new Hilo.Stage({
        container: document.body,
        width: 375,
        height: 667,
        scaleX: 1,
        scaleY: 1
      });
      //设定舞台刷新频率为60fps
      this.ticker = new Hilo.Ticker(60);
      //把舞台加入到tick队列
      this.ticker.addTick(this.stage);
      //启动ticker
      this.ticker.start();


      // this.initBackground();
      // 层级：先创建的在下面，后创建在上面

      this.ground = new Hilo.Bitmap({
        id: 'ground',
        image: 'http://xxxxx/home/2020-35/10000672/b0c78d21-4c2c-4f41-ad87-c01630a66688.jpg',
        // rect: [0, 0, 375, 667], 不需要剪切。如一个大于舞台的图片  剪切了就只剩下剪切的范围
        // x: 0,
        // y: 0
      }).addTo(this.stage);


      this.startButton = new Hilo.Button({
        image: 'http://xxxxx/home/2020-37/10000672/734d8f60-69e4-4e8a-a1aa-a433fea2f3d9.png',
        upState: { rect: [0, 0, 64, 64] },
        overState: { rect: [64, 0, 64, 64] },
        downState: { rect: [128, 0, 64, 64] },
        disabledState: { rect: [192, 0, 64, 64] }
      }).addTo(this.stage);// 一定要addTo 舞台





      this.ticker.addTick(Hilo.Tween); // 缓动无自动执行，需要addTick




      // Hilo统一了事件的开始、移动和结束三个事件的映射名称，方便自动适配不同平台：
      // Hilo.event.POINTER_START - mousedown / touchstart
      // Hilo.event.POINTER_MOVE - mousemove / touchmove
      // Hilo.event.POINTER_END - mouseup / touchend
      // 让舞台stage能接受mousedown或touchstart事件
      // stage.enableDOMEvent(Hilo.event.POINTER_START, true);
      stage.enableDOMEvent([Hilo.event.POINTER_START, Hilo.event.POINTER_MOVE, Hilo.event.POINTER_END], true);

      let y = 0;
      // 监听按钮点击
      this.startButton.on(Hilo.event.POINTER_START, function (e) {
        y = y + 667;
        this.moveBg(y);
      }.bind(this));//  bind(this) 否则里面无法用this


    }


    function moveBg(y) {
      /* all previous code here */

      //循环移动地面
      Hilo.Tween.to(this.ground, { y: -y }, { duration: 2000, loop: false });


    }

    function initBackground() {
      var bgWidth = 375;
      var bgHeight = 1250;
      document.body.insertBefore(Hilo.createElement('div', {
        id: 'bg',
        style: {
          position: 'absolute',
          background: 'url(images/gameBg.jpg) no-repeat',
          backgroundSize: bgWidth + 'px, ' + bgHeight + 'px',
          width: bgWidth + 'px',
          height: bgHeight + 'px'
        }
      }), this.stage.canvas);
    }
  </script>
</body>

</html>