How to update the hit area of text after change the alignment in Easeljs
来源： https://stackoverflow.com/questions/64314986/how-to-update-the-hit-area-of-text-after-change-the-alignment-in-easeljs
createjs
一篇文章教会你使用HTML打造一款颜色配对游戏
【一、项目背景】 createjs是一个基于canvas的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、 PreloadJs四个部分。它基于容器进行展示，其中根容器是stage（舞台）对象。 今天教大家用EaselJs、TweenJs结合做一个颜色配对游戏。 【二、项目准备】 1、去下方网站： http://www.createjs.cc/ 然后下载EaselJs、TweenJs这两个模块。 2、软件：Dreamweaver 【三、项目目标】 随机产生4种颜色，让下方的色块通过鼠标移动，匹配上方的颜色框。如果上方颜色框与下方色块颜色相同。全部色块匹配完成则为成功。 【四、项目实现】 1、导入EaselJs、TweenJs模块。 <script src="js/easeljs-0.7.1.min.js"></script> <script src="js/tweenjs-0.5.1.min.js"></script> 2、body 创建画布canvas 设置画布大小，画布添加描边 ，id属性。 <canvas id="canvas" width="600" height="400" style="border: black solid 1px"></canvas> 3、创建shapes.js文件。定义一个初始化init()方法 ，创建stage对象
2D游戏开发作业：CreatJS案例
1.围住神经猫游戏 代码： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>围住神经猫</title> <script src="easeljs.min.js"></script> <script src="Circle.js"></script> </head> <body> <canvas width="800px" height="800px" id="gameView"></canvas> <script src="app.js"></script> </body> </html> js： Circle.js： function Circle() { createjs.Shape.call(this); this.setCircleType = function (type) { this._circleType = type; switch (type) { case Circle.TYPE_UNSELECTED: this.setColor("#cccccc"); break; case Circle.TYPE_SELECTED: this.setColor("#ff6600"); break; case Circle.TYPE_CAT: this.setColor(
HTML小游戏2
一.“围住神经猫” 新建JS：app.js, js代码 var stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); var gameView = new createjs.Container(); gameView.x = 30; gameView.y = 30; stage.addChild(gameView); var circleArr = [[],[],[],[],[],[],[],[],[]]; var currentCat;//保存这只猫 var MOVE_NONE = -1,MOVE_LEFT = 0,MOVE_UP_LEFT = 1,MOVE_UP_RIGHT = 2,MOVE_RIGHT = 3,MOVE_DOWN_RIGHT = 4,MOVE_DOWN_LEFT = 5; //6个方向的参数 function getMoveDir(cat){ //分别判断它能走的位置 var distanceMap = []; //left var can = true; for (var x = cat.indexX;x>=0;x--) { if(circleArr[x][cat.indexY]
How to draw a custom pie chart shape using createJS or HTML canvas API?
问题 I am working on building this specific shape: This kind of looks like a pie chart having 3 leaves with each leaf having 3 set of colours. Each colour represents a specific info about data which will be showing on a popup either by clicking or hovering over it based on JSON . This pie will be placed on the map based on the coordinates(Lat, Long) assigned to it. The small red circle at the center is the place for coordinates(Lat, Long). I might use: CreateJS to generate this kinda CreateJS
How to draw a custom pie chart shape using createJS or HTML canvas API?
问题 I am working on building this specific shape: This kind of looks like a pie chart having 3 leaves with each leaf having 3 set of colours. Each colour represents a specific info about data which will be showing on a popup either by clicking or hovering over it based on JSON . This pie will be placed on the map based on the coordinates(Lat, Long) assigned to it. The small red circle at the center is the place for coordinates(Lat, Long). I might use: CreateJS to generate this kinda CreateJS
Javascript canvas object gets stuck after rotating with ctx.Rotate()
问题 I'm trying to make a car game that rotates the car everytime you press an arrow key. I've created the car, but everytime I try to rotate it with ctx.Rotate, the car gets stuck after moving it a specific point. It's as if the whole canvas was rotated with the car. Car won't move anymore to the right. Here is my code for rotating then drawing the car: ctx.translate((canvas.width/2) - 50, (canvas.height/2) - 50); ctx.rotate(90*Math.PI/180); ctx.translate((-canvas.height.width/2) + 50, (-canvas
Ionic + CreateJs high CPU and Memory
问题 I have a serious problem with an increasing CPU and RAM usage in an ionic app with createjs library. The problem cause the app to crash after a while. As I am navigating between pages where each page has a new canvas, I see the RAM and CPU to dramatically increase. There is no memory leak. I have tested it with chrome developer tools. 回答1: After so so much testing, the solution was to treat each template page in ionic as a root page. So when I was navigating to a new template page I always
2D游戏开发——sy5.CreateJS
基于CreateJS的游戏制作 CreateJS 为CreateJS库，是一款为HTML5游戏开发的引擎。包含以下四个部分： EASELJS ：提供了一套完整的，层次化的显示列表的互动方式 来更简单的处理HTML5画布。 TWEENJS ：主要用来调整和动画HTML5和Javascript属性。提供了简单并且强大的tweening接口。 SOUNDJS ：提供了简单而强大的API来处理音频。通过插件来执行实际的音频实现，无需学习平台相关的知识，简单直接的处理声音。 PRELOADJS ：是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源，例如：图片、文件、音频、数据等等。 本次实验为 验证性作业 ，代码为 老师 所给。 开发工具：Adobe Dreamweaver CC 2019 开发框架：CreateJS 围住神经猫 游戏介绍：围住中间那只“猫”，使其不逃出地图。游戏开始会有几堵墙，玩家需要造新的墙困住猫。代码如下： cat.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>围住神经猫</title> <script src="Js/easeljs.min.js"></script> <script src="Js/Circle.js"></script> </head>
9.HTML5------找颜色游戏
var stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick", stage); var gameView = new createjs.Container(); stage.addChild(gameView); function startGame() { //函数入口 getCanvasSize(); n = 2; addRect(); } function addRect() { //添加方格 var c1 = parseInt(Math.random() * 1000000); //设定放个颜色为一个随机值 var color = ("#"+c1); var x = parseInt(Math.random() * n); var y = parseInt(Math.random() * n); for (var indexX = 0;indexX < n; indexX++){ //绘制每个方格 for (var indexY = 0; indexY < n; indexY++){ var c2 = parseInt((c1-10*(n-indexY)>0)?(c1-10*(n-indexY)):(c1+10