轻量级Javascript游戏框架CreateJS创建精灵+P2

作者: 布袋的世界 | 来源:发表于2018-09-08 22:43 被阅读270次

轻量级Javascript游戏框架CreateJS创建精灵+P2
DAY10-JQuery01
快速入门createjs框架
Cpage.js框架API
Vue简明教程之入门
H5动画——createjs
SpriteKit框架详细解析 —— 基本概览（一）
JS第一天
html_day5 jq运用
Flutter 优点

ball

使用轻量级javascript游戏框架的弹性小球实例

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P2 Physics World</title>
</head>
<body>
<body onload="init();">
<canvas id="gameView" width="1000" height="400"></canvas>
<script src="libs/createjs-2015.11.26.min.js"></script>
<script src="libs/p2.js"></script>
<script src="js/p2.js"></script>
</body>
</html>

JAVASCRIPT


var canvas,
    stage,
    container;

var world,
    redBall,
    ballBody

var stageHeight = 400,
    factor = 50;

var xPos = 150
var yPos = 20;

var isKeyDown = false;
var ballWShape;

function init() {

    // 一、 physics world
    world = new p2.World({
        gravity: [0, -9.82]
    });
    world.sleepMode = p2.World.ISLAND_SLEEPING;

    // 二、canvas createjs

    canvas = document.getElementById('gameView');
    stage = new createjs.Stage(canvas);
    container = new createjs.Container();
    stage.addChild(container);
    if (createjs.Touch.isSupported()){
        createjs.Touch.enable(stage); // 移动端接收mouse事件;
    }

    stage.enableMouseOver();

    // 三、create shape by createjs and and physicsworld to shape by p2.js

    redBall = createBall(xPos,yPos);  // createjs create ball;
    //关联p2.js物理引擎;
    ballBody = createBallWorld(xPos,yPos);
    ballBody.displays = [redBall];

    redBall.addEventListener('mousedown',function(e){
        stage.addEventListener('stagemousemove', function(e) {

          //  redBall.x = stage.mouseX;
          //  redBall.y = stage.mouseY;
            isKeyDown = true;
            redBall.x = e.stageX;
            redBall.y = e.stageY;
            stage.update();
        });
        stage.addEventListener('stagemouseup', function(e) {
           // stage.update();
            isKeyDown = false;
            // 清除旧的重力
            world.removeBody(ballBody);

            // 加入新的重力
            createBallWorld(e.stageX,e.stageY);
            addContactMaterial();
            e.target.removeAllEventListeners();
            stage.update();
        });
    });


    floor = createFloor();
    floorWorld = createFloorWorld();
    floorWorld.display = floor;

    // 材料比较;
    addContactMaterial();
    createjs.Ticker.framerate = 60;
    //console.log(ballBody.position[1]);
    createjs.Ticker.addEventListener("tick", tickHandler);

}

var addContactMaterial = function (){

    world.addContactMaterial(new p2.ContactMaterial(
        ballWShape.material,
        floorWShape.material,
        {   restitution: 0.5,  // < 1.0
            stiffness:Number.MAX_VALUE // extact restitution;
        }
    ));
}

var createBall = function (x,y) {

    var sprite = container.addChild(new createjs.Shape());
    sprite.graphics
        .beginFill("red").drawCircle(0, 0, 50)
        .beginFill("white").drawCircle(0, 0, 30)
        .beginFill("yellow").drawCircle(0, 0, 15);

    sprite.x = x;
    sprite.y = y;
    return sprite;
}

var createBallWorld = function (xPos,yPos) {

    var circlePosX = xPos;   //把球摆放在距离屏幕左上角为100,100px位置
    var circlePosY = yPos;
    var circleR = 50;

    var circlePosXInP2 = circlePosX / factor;
    var circlePosYInP2 = (stageHeight - circlePosY) / factor;
    var circleRInP2 = circleR / factor;

    // convert p2.js coordinate to createjs
    // no need to var ballBody in P2.js
    ballBody = new p2.Body({
        mass: 3,
        position: [circlePosXInP2, circlePosYInP2]
    });

    ballBody.damping = 0
    ballBody.angularDamping = 0;

    //半径也要转换
    ballWShape = new p2.Circle({
        radius: circleRInP2
    });
    // material 材质;
    ballWShape.material = new p2.Material();

    //将circle 加入重力世界
    ballBody.addShape(ballWShape);
    world.addBody(ballBody);
    return ballBody;

}

// 创建地面;
var createFloor = function () {

    var sprite = container.addChild(new createjs.Shape());
    sprite.graphics.beginFill("black").drawRect(0, stageHeight - 10, 1000, 10);
    return sprite;
}
// 创建地面物理世界  floor physics world;
var createFloorWorld = function () {

    floorWShape = new p2.Plane();
    floorWShape.material = new p2.Material();
    groundBody = new p2.Body({mass: 0});
    groundBody.addShape(floorWShape);
    world.addBody(groundBody);
    return groundBody;
}

var tickHandler = function tickHandler(x) {
    if (!isKeyDown) {
        world.step(1 / 20);
        redBall.x = ballBody.position[0] * factor;
        redBall.y = stageHeight - ballBody.position[1] * factor;
        stage.update();
    }
   // stage.update();
}

var $log = function (e) {
    console.log(e)
}

Create.js 创建精灵：https://www.createjs.com/getting-started

P2.js 物理引擎：https://github.com/schteppe/p2.js

更多游戏教学:

iFIERO – 为游戏开发深感自豪 http://www.iFIERO.com