2018年4月2日

Create.js移动与PC适配兼容性处理

作者 admin

大家好，今天跟大家分享一下在我们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>

</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

标签Create.js

Create.js移动与PC适配兼容性处理

44 条评论在 “Create.js移动与PC适配兼容性处理”

发表评论取消回复

Create.js移动与PC适配兼容性处理

44 条评论在 “Create.js移动与PC适配兼容性处理”

发表评论 取消回复

发表评论取消回复