ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
319 lines (242 loc) • 8.01 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>游戏-保持冷静</title>
<link rel="stylesheet" href="../style.css">
<style>
body{
font-size: 0;
position: relative;
}
#log{
position: fixed;
left: 0;
top:0;
z-index:999;
width:100%;
height:100px;
overflow-y: scroll;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<div id="log">
</div>
</body>
</html>
<script src="../common.js"></script>
<script src="../../build/ycc.js"></script>
<script>
// if(!Ycc.utils.isMobile()){
// document.body.innerHTML='<img src="./images/qr.png"/>';
// throw new Error('PC端请扫码进入！');
// }
// if(!DeviceOrientationEvent)
// throw new Error(alert('您这个手机不支持陀螺仪哦！'));
// var canvas = document.createElement('canvas');
// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
// canvas.width=document.documentElement.clientWidth;
// canvas.height=document.documentElement.clientHeight;
// document.body.appendChild(canvas);
var ycc = new Ycc();
var canvas = ycc.createCanvas({dpiAdaptation:true});
document.body.appendChild(canvas);
ycc.bindCanvas(canvas);
var stageW = ycc.getStageWidth()/ycc.dpi;
var stageH = ycc.getStageHeight()/ycc.dpi;
// 所有的图片资源
var images = null;
// 所有音频资源
var audio = null;
// 当前场景
var currentScene = null;
// loading窗
var loading = new Loading();
// 加载资源
ycc.loader.loadResOneByOne([
{name:"start",url:"./images/start.png"},
{name:"restart",url:"./images/restart.png"},
],function (lise,imgs) {
console.log(imgs,222);
images = imgs;
loading.hidden();
currentScene = new StartScene();
ycc.layerManager.reRenderAllLayerToStage();
});
// 开启动画，每帧都更新场景
ycc.ticker.start(60);
ycc.ticker.addFrameListener(function () {
currentScene && currentScene.update && currentScene.update();
ycc.layerManager.reRenderAllLayerToStage();
});
function Loading(){
this.layer = ycc.layerManager.newLayer();
this.layer.addUI(new Ycc.UI.Rect({
rect:new Ycc.Math.Rect(0,0,stageW,stageH),
color:"rgba(0,0,0,0.1)"
}));
this.layer.addUI(new Ycc.UI.SingleLineText({
content:"正在加载...",
rect:new Ycc.Math.Rect(0,stageH/2,stageW,20),
xAlign:"center"
}));
this.hidden = function(){
this.layer.show = false;
};
this.show = function(){
this.layer.show = true;
};
}
function StartScene(){
var self = this;
this.layer = ycc.layerManager.newLayer({enableEventManager:true});
this.layer.addUI(new Ycc.UI.Image({
rect:new Ycc.Math.Rect(stageW/2-200/2,stageH/2-60/2,200,60),
fillMode:"scale",
res:images.start,
ontap:function (e) {
self.delSelf();
ycc.layerManager.deleteAllLayer();
currentScene = new GameScene();
}
}));
}
/**
* 删除自身
*/
StartScene.prototype.delSelf = function () {
ycc.layerManager.deleteLayer(this.layer);
};
function GameScene(){
// 游戏进行中的图层
this.layer = ycc.layerManager.newLayer({enableEventManager:true});
// 游戏结束后的弹出层
this.overLayer = ycc.layerManager.newLayer({enableEventManager:true,show:false});
// 游戏是否结束
this.end = false;
// y轴旋转夹角
this.beta=0;
// x轴旋转夹角
this.gamma=0;
// 难度等级
this.level=2;
// 开始时间
this.startTime = Date.now();
// 得分
this.score=0;
// 游戏结束得分文案UI
this.finalScoreText = null;
this.ball = new Ycc.UI.Circle({
fill:true,
color:"rgb(47,123,1)",
point:new Ycc.Math.Dot(stageW/2,stageH/2),
r:stageW/2-50
});
this.ballTextUI = new Ycc.UI.SingleLineText({
content:this.score,
xAlign:'center',
yAlign:'center'
});
this.init();
}
// 初始化
GameScene.prototype.init = function () {
var self = this;
// 添加一个小球
this.ball.addChild(this.ballTextUI);
this.layer.addUI(this.ball);
this.createGameOverLayer();
// 事件触发时，把角度存起来即可
window.ondeviceorientation= function (e) {
self.beta = e.beta;
self.gamma = e.gamma;
document.querySelector('#log').innerHTML='x轴倾斜度：'+(e.beta) +'<br>' + 'y轴倾斜度：' +(e.gamma);
};
};
// 创建游戏结束的图层页
GameScene.prototype.createGameOverLayer = function(){
// 半透明背景
this.overLayer.addUI(new Ycc.UI.Rect({
rect:new Ycc.Math.Rect(0,0,stageW,stageH),
color:"rgba(0,0,0,0.7)"
}));
var fontSize = "18px";
var lineHeight = 30;
var color = "rgb(47,123,1)";
this.overLayer.addUI(new Ycc.UI.SingleLineText({
content:"游戏结束",
xAlign:"center",
rect:new Ycc.Math.Rect(0,stageH/2+lineHeight*-2,stageW,lineHeight),
color:color,
fontSize:fontSize
}));
this.finalScoreText=new Ycc.UI.SingleLineText({
content:"您坚持了"+this.score+"秒，心情是否平静了点呢？",
xAlign:"center",
rect:new Ycc.Math.Rect(0,stageH/2+lineHeight*-1,stageW,lineHeight),
color:color,
fontSize:fontSize
});
this.overLayer.addUI(this.finalScoreText);
var imgW = 200,
imgH = 60;
this.overLayer.addUI(new Ycc.UI.Image({
rect:new Ycc.Math.Rect(stageW/2-imgW/2,stageH/2+lineHeight,imgW,imgH),
fillMode:"scale",
res:images.restart,
ontap:function (e) {
//self.delSelf();
ycc.layerManager.deleteAllLayer();
currentScene = new GameScene();
}
}));
this.overLayer.addUI(new Ycc.UI.SingleLineText({
content:"项目地址",
rect:new Ycc.Math.Rect(stageW/2-10,stageH/2+lineHeight+10+imgH,-14*4,20),
color:"#308eef",
fontSize:"14px",
ontap:function (e) {
window.location.href="https://github.com/lizhiqianduan/ycc/tree/develop";
}
}));
this.overLayer.addUI(new Ycc.UI.SingleLineText({
content:"作者博客",
rect:new Ycc.Math.Rect((stageW)/2+10,stageH/2+lineHeight+10+imgH,14*4,20),
color:"#308eef",
fontSize:"14px",
ontap:function (e) {
window.location.href="http://www.lizhiqianduan.com/blog";
}
}));
};
// 每帧的更新函数
GameScene.prototype.update = function () {
if(this.end) {
if(this.score>30)
this.finalScoreText.content="您坚持了"+this.score+"秒，心情是否平静了点呢？";
else if(this.score>1)
this.finalScoreText.content="才坚持"+this.score+"秒，朋友，静下心来吧！";
else
this.finalScoreText.content="是不是还不会玩啊？保持手机平衡哦！";
this.overLayer.show=true;
return;
}
this.score = parseInt((Date.now()-this.startTime)/1000);
this.ball.point.x+=this.gamma*this.level;
this.ball.point.y+=this.beta*this.level;
this.ballTextUI.content=this.score+'';
this.ballTextUI.rect.x=-this.ball.rect.width/2;
this.ballTextUI.rect.y=-this.ball.rect.height/2;
this.ballTextUI.rect.width=this.ball.rect.width;
this.ballTextUI.rect.height=this.ball.rect.height;
var x=this.ball.point.x,
y=this.ball.point.y,
r=this.ball.r;
if(x-r<=0||x+r>=stageW || y-r<=0 || y+r>=stageH)
this.end = true;
};
</script>