This article teaches you how to create a color matching game using HTML

I. Project Background

Createjs is a canvas based library for creating H5 games, animations, and interactions. Including EaselJs, TweenJs, SoundJs, PreloadJs four parts. It is presented based on containers, where the root container is the stage object.

Today I will teach you to use EaselJs and TweenJs to make a color matching game.

Ii. Project Preparation

1. Go to the website below:

http://www.createjs.cc/
Copy the code

Then download the EaselJs and TweenJs modules.

2. Software: Dreamweaver

Iii. Project Objectives

Randomly generate 4 colors and let the color block below move with the mouse to match the color box above. If the upper color box is the same color as the lower color block. All color blocks are matched successfully.

Iv. Project Realization

1. Import EaselJs and TweenJs modules.

< script SRC = "js/easeljs - 0.7.1. Min. Js" > < / script > < script SRC = "js/tweenjs - 0.5.1. Min. Js" > < / script >Copy the code

Canvas sets the size of the canvas, adds a stroke to the canvas, and adds the ID property.

<canvas id="canvas" width="600" height="400" style="border: black solid 1px"></canvas>
Copy the code

Create the Shapes. Js file. Define an init() method to create the stage object.

function init() {
    stage = new createjs.Stage("canvas");
}
Copy the code

4. Define buildShapes() and call createjs.Shape() to draw a stroke square with graphics. Fill color.

function buildShapes() { var colors = ['blue', 'red', 'green', 'yellow']; var i, shape, slot; for (i = 0; i < 4; I++) {//slots stroke square slot = new createjs.shape (); slots.push(slot); Shape = new createjs.shape (); shape.graphics.beginFill(colors[i]); shape.graphics.drawRect(0, 0, 100, 100); shape.regX = shape.regY = 50; shape.key = i; shapes.push(shape); }}Copy the code

5. Set the position of square X and y, and fill the color randomly in the for loop, and add it to the stage.

slot.graphics.beginStroke(colors[i]);
slot.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255, 1));
slot.graphics.drawRect(0, 0, 100, 100);
slot.regX = slot.regY = 50;
slot.key = i;
slot.y = 80;
slot.x = (i * 130) + 100;
stage.addChild(slot);
Copy the code

Define the setShapes method. The for loop randomly generates an R value and adds it to the Shapes. Produces a moving square. Add to stages.

function setShapes() { var i, r, shape; var l = shapes.length; for (i = 0; i < l; i++) { r = Math.floor(Math.random() * shapes.length); shape = shapes[r]; shape.homeY = 320; shape.homeX = (i * 130) + 100; shape.y = shape.homeY; shape.x = shape.homeX; stage.addChild(shape); shapes.splice(r, 1); }}Copy the code

7. Add mouse events. Controls square movement.

 shape.addEventListener("mousedown", startDrag);
Copy the code

8. Define the method startGame to start the game, set the frame number of the game, and add listening events.

function startGame() {
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", function (e) {
        stage.update();
    });
}
Copy the code

9. Determine the game method (e)

1) Get the coordinates of the current mouse.

var shape = e.target;
Copy the code

2) Make the coordinates of the mouse equal to the coordinates of the fill square.

stage.addEventListener('stagemousemove', function (e) {
        shape.x = e.stageX;
        shape.y = e.stageY;
    });
Copy the code

3) hitTest method. Test whether the image has an intersection with the box of the same color to determine whether the color is the same.

if (slot.hitTest(pt.x, pt.y)) {
            shape.removeEventListener("mousedown",startDrag);
            score++;
            createjs.Tween.get(shape).to({x:slot.x, y:slot.y}, 200, createjs.Ease.quadOut).call(checkGame);
            console.log('h');
        }
        else {

        }
Copy the code

4) TweenJs sets the animation effect.

createjs.Tween.get(shape).to({x:shape.homeX, y:shape.homeY}, 200, createjs.Ease.quadOut);
Copy the code

10, define the winning method checkGame, use score to represent four color blocks, judge the value of score.

function checkGame(){
    if(score == 4){
        alert('You Win!');
    }
}
Copy the code

11. In init (), call the method to implement the effect

buildShapes();
setShapes();
startGame();
Copy the code

[5. Effect Display]

1. Run F12 in Chrome.

2. Drag a random color block to match the color box.

3, four color blocks match to complete the frame (victory)!!

【 VI. Summary 】

In createJS, EaselJs and TweenJs are used to create a graph on stage. How to render stages on a page.

2. Provided detailed explanation and effective solutions for the difficulties and key points in the project.

You can also use the createJS API to learn more about createJS modules.

4. Follow the steps and try to do it yourself. When you realize yourself, there will always be all kinds of problems. Do not be arrogant and have low hand. Only by working frequently can you understand more deeply.

5, need this article source partners, background reply “color matching” four words, you can get.

Have you learned anything after reading this article? Please share it with more people