Moving Rectangles - Createjs Typing CST Test
Loading…
Moving Rectangles — Createjs Code
Multiple rectangles moving horizontally at different speeds.
# createjs/demo/moving_rects.html
<html>
<head>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
</head>
<body>
<canvas id="demoCanvas" width="800" height="600"></canvas>
<script>
const stage = new createjs.Stage('demoCanvas');
const rects = [];
for(let i=0; i<5; i++) {
const r = new createjs.Shape();
r.graphics.beginFill('orange').drawRect(0, 0, 60, 60);
r.x = i*150;
r.y = 300;
stage.addChild(r);
rects.push({shape: r, speed: i+1});
}
createjs.Ticker.framerate = 60;
createjs.Ticker.addEventListener('tick', () => {
rects.forEach(r => {
r.shape.x += r.speed;
if(r.shape.x > 800) r.shape.x = -60;
});
stage.update();
});
</script>
</body>
</html>Createjs Language Guide
CreateJS is a suite of modular JavaScript libraries and tools designed to facilitate rich interactive content via HTML5 Canvas, supporting animation, sound, and UI interaction.
Primary Use Cases
- ▸HTML5 Canvas-based games and animations
- ▸Interactive web ads and banners
- ▸Multimedia-rich educational apps
- ▸Vector graphics and sprite-based animations
- ▸Integration with Adobe Animate exported content
Notable Features
- ▸Modular suite: EaselJS, TweenJS, SoundJS, PreloadJS
- ▸Supports timeline and tween animations
- ▸High-performance Canvas rendering
- ▸Event-driven interactivity for user input
- ▸Asset preloading and management
Origin & Creator
CreateJS was developed by gskinner.com (Grant Skinner) starting around 2010, evolving from earlier Flash-to-HTML5 tooling.
Industrial Note
CreateJS is widely used for browser-based games, HTML5 banner ads, interactive infographics, and multimedia-rich web applications.