2018年4月2日
Create.js移动与PC适配兼容性处理
大家好，今天跟大家分享一下 在我们create.js中关于各种分辨率设备的全屏适配是如何处理的，正如大家所知道的那样，h5游戏本身对于兼容性这块比较吃力，所以更加考验一个前端的技术栈能力，话不多说 日常配图
首先我们新建一个html文件，引入createjs的cdn库，
比如这样
<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8″>
<linkrel=”stylesheet”href=”css/base.css”>
<metaname=”viewport”content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no”/>
// create.js engine
<scriptsrc=”https://code.createjs.com/createjs-2015.11.26.min.js”></script>
<style>
canvas#myCanvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id=”myCanvas” width=”960″ height=”540″></canvas>
</body>
</html>
ok啊，前期准备工作我们已经准备好了 现在 我们开始码代码，
首先我们先定义一个入口文件
window.addEventListener(“load”, init); //监听load加载完成后回调函数 init，进行游戏初始化，
function init() {
var stage=new createjs.Stage(“myCanvas”); //把舞台添加到canvas画布上
if (createjs.Touch.isSupported() ==true) {
createjs.Touch.enable(stage) //舞台上开启点击事件（兼容移动端处理）
}
window.addEventListener(“resize”, handleResize); // 检测设备调整与变化 回调handleResize函数，
handleResize();
function handleResize(event) {
var w=window.innerWidth; //设备窗口宽度
var h=window.innerHeight; //设备窗口高度
stage.canvas.width = w; //舞台宽度等于设备宽度
stage.canvas.height = h; //舞台高度等于设备高度
// 画面更新
stage.update(); //舞台进行更新渲染
}
为了能让效果更加直观我们做了一个圆形 让他不断的进行x+ = 30 ，y + = 5运动，
var shape = new createjs.Shape(); // 创建图形容器
shape.graphics.beginFill(“DarkGreen”).drawCircle(0, 0, 80); //绘制圆形，颜色
stage.addChild(shape); //图形添加到舞台上
createjs.Ticker.addEventListener(“tick”, handleTick);
//心跳 == requireAnimationFrame
function handleTick(event) {
shape.x+=30; //每秒钟x+30
shape.y+=5; //每秒钟x+5
if (shape.x>window.innerWidth) shape.x=0; //如果图形超出屏幕宽度 回到0
if (shape.y>window.innerHeight) shape.y=0; //如果图形超出屏幕高度 回到0
stage.update(); //更新舞台
}
}
想看效果的 请狠狠的点击demo地址 ： https://github.com/894658027/HTML5-Games/tree/master/CreateJs/Create.js%E9%80%9A%E7%94%A8%E7%BB%84%E5%BB%BA/%E5%85%A8%E5%B1%8F%E9%80%82%E9%85%8D
又是代码满满的一天，下周见 拜拜~
github效果地址 ：https://github.com/894658027/HTML5-Games/tree/master/CreateJs/template/adapterScreen
buy priligy australia Dominic, USA 2022 06 27 21 42 11
Factors Influencing the Recurrence Potential of Benign Endometrial Polyps after Hysteroscopic Polypectomy priligy en france Philadelphia, PA Elsevier; 2017 chap 16