开篇寄语
之前伯衡君介绍过Jsbox这款应用,可以实现很多效果,具体可以参看下方的前情提要,这次为大家推荐一个应用实例,就是玩红白机游戏,分享给大家,于是就有了今天这篇文章。
前情提要
- 《苹果应用JSBox免费下载附送美区账号》,该应用后来可以免费下载了,采取内购形式了。
操作方法
- 点击运行Jsbox应用,新建空白脚本;
- 复制粘贴以下代码到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();
}
}
});
});
}
});
}
- 随后点击运行即可,效果如下图所示。
- 比如伯衡君打开了《恐龙快打》这款游戏,只需要在左下角设置好操作按键就可以开始游戏了(此处,建议配置一个蓝牙键盘,或者iPad用的秒控键盘,使用起来相当灵活) 5.设置好后,开始开启游戏的旅程吧。
- 我的微信
- 微信扫一扫加好友
- 我的微信公众号
- 扫描关注公众号