通过Jsbox这款应用在iphone手机和ipad上玩红白机游戏

已收录   阅读次数: 2,199
2019-12-2710:00:09 发表评论
摘要

之前伯衡君介绍过Jsbox这款应用,可以实现很多效果,具体可以参看下方的前情提要,这次为大家推荐一个应用实例,就是玩红白机游戏,分享给大家,于是就有了今天这篇文章……

分享至:
通过Jsbox这款应用在iphone手机和ipad上玩红白机游戏

开篇寄语

之前伯衡君介绍过Jsbox这款应用,可以实现很多效果,具体可以参看下方的前情提要,这次为大家推荐一个应用实例,就是玩红白机游戏,分享给大家,于是就有了今天这篇文章。

前情提要

操作方法

  1. 点击运行Jsbox应用,新建空白脚本;
  2. 复制粘贴以下代码到Jsbox空白脚本内:
/**erots
id: 5d07a4727b968a00737228ef
build: 4
source: 82b1c8b4ac0044e3a6c374f06eefd6a5
*/
$ui.render({
  props: {
    id: "mainView",
    navBarHidden: true
  },
  views: [
    {
      type: "web",
      props: {
        id: "web",
        url: "https://www.yikm.net/",
        script() {
          window.onload = function() {
            const links = document.querySelectorAll('a[target="_blank"]');
            for (let link of links) {
              link.removeAttribute("target");
            }
          };
        }
      },
      layout: $layout.fill
    },
    {
      type: "canvas",
      props: {
        id: "closeButton"
      },
      layout: function(make, view) {
        make.right.inset(20);
        make.top.inset(42);
        make.size.equalTo($size(20, 20));
      },
      events: {
        draw: function(view, ctx) {
          (ctx.fillColor = $color("darkGray")),
            (ctx.strokeColor = $color("darkGray")),
            (ctx.allowsAntialiasing = true);
          ctx.setLineCap(1);
          ctx.setLineWidth(3);
          ctx.moveToPoint(2, view.frame.height / 2);
          ctx.addLineToPoint(view.frame.width / 2, 2);
          ctx.addLineToPoint(view.frame.width - 2, view.frame.height / 2);
          ctx.moveToPoint(view.frame.width / 2, 2);
          ctx.addLineToPoint(view.frame.width / 2, view.frame.height - 2);
          ctx.strokePath();
        },
        longPressed: function(info) {
          $("web").goBack();
        },
        tapped: function(sender) {
          showToastView($("mainView"), "#E74C3C", "长按返回上一页");
        },
        touchesBegan: function(sender, location) {
          $device.taptic(1);
        }
      }
    },
    {
      type: "progress",
      props: {
        id: "volumeView",
        progressColor: $color("red"),
        trackColor: $color("clear"),
        value: $system.volume
      },
      layout: function(make, view) {
        make.top.inset(0);
        make.height.equalTo(2);
        make.width.equalTo(view.super);
        make.left.inset(0);
      }
    }
  ]
});
// $timer.schedule({
//   interval: 1,
//   handler: function() {
//     $console.info($system.volume);
//     $("volumeView").value = $system.volume
//     $("volumeView").relayout()
//   }
// });
 
$delay(2, () => {
  $ui.animate({
    duration: 1,
    animation: function() {
      $("volumeView").alpha = 0;
      $("closeButton").alpha = 0.4;
    }
  });
});
 
function showToastView(view, color, text, duration) {
  let time = new Date().getTime();
  let topInset = 20;
  let textSize = $text.sizeThatFits({
    text: text,
    width: view.width,
    font: $font(15)
  });
  if (duration === undefined) {
    duration = text.length / 5;
  }
  let showView = {
    type: "view",
    props: {
      id: "toastView",
      bgcolor: $color("clear"),
      alpha: 0,
      userInteractionEnabled: false,
      info: time
    },
    layout: function(make, view) {
      make.centerX.equalTo(view.super);
      make.top.inset(topInset);
      make.width.equalTo(textSize.width + 60);
      make.height.equalTo(30);
    },
    views: [
      {
        type: "blur",
        props: {
          style: 1, // 0 ~ 5
          radius: 5
        },
        layout: $layout.fill
      },
      {
        type: "image",
        props: {
          icon: $icon("009", $color(color), $size(16, 16)),
          bgcolor: $color("clear")
        },
        layout: function(make, view) {
          make.centerY.equalTo(view.super);
          make.size.equalTo($size(16, 16));
          make.left.inset(10);
        }
      },
      {
        type: "view",
        layout: function(make, view) {
          make.centerY.equalTo(view.super);
          make.left.equalTo(view.prev.right).inset(0);
          make.right.inset(10);
          make.height.equalTo(view.super);
        },
        views: [
          {
            type: "label",
            props: {
              text: text,
              bgcolor: $color("clear"),
              textColor: $color("black"),
              font: $font(15)
            },
layout: function(make, view) {
              make.center.equalTo(view.super);
            }
          }
        ]
      }
    ]
  };
  if ($("toastView") != undefined) {
    $("toastView").remove();
  }
  view.add(showView);
  let fView = $("toastView");
  if (fView == undefined) {
    return 0;
  }
  fView.relayout();
  fView.updateLayout(function(make) {
    make.top.inset(topInset + 20);
  });
  $ui.animate({
    duration: 0.4,
    animation: function() {
      fView.alpha = 1.0;
      fView.relayout();
    },
    completion: function() {
      $delay(duration, function() {
        let fView = $("toastView");
        if (fView == undefined) {
          return 0;
        } else if (fView.info != time) {
          return 0;
        }
        fView.updateLayout(function(make) {
          make.top.inset(topInset);
        });
        $ui.animate({
          duration: 0.4,
          animation: function() {
            fView.alpha = 0.0;
            fView.relayout();
          },
          completion: function() {
            if (fView != undefined) {
              fView.remove();
            }
          }
        });
      });
    }
  });
}
  1. 随后点击运行即可,效果如下图所示。 通过Jsbox这款应用在iphone手机和ipad上玩红白机游戏
  2. 比如伯衡君打开了《恐龙快打》这款游戏,只需要在左下角设置好操作按键就可以开始游戏了(此处,建议配置一个蓝牙键盘,或者iPad用的秒控键盘,使用起来相当灵活) 通过Jsbox这款应用在iphone手机和ipad上玩红白机游戏 5.设置好后,开始开启游戏的旅程吧。

  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: