1

不知道我在这里做错了什么,但一些选择鼠标事件(拖放、onclick 和 onpress)不起作用。但是 onDoubleClick 有效。这就是我正在做的事情。

.js 文件

            var b2Vec2 = Box2D.Common.Math.b2Vec2;
            var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
            var b2BodyDef = Box2D.Dynamics.b2BodyDef;
            var b2Body = Box2D.Dynamics.b2Body;
            var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
            var b2Fixture = Box2D.Dynamics.b2Fixture;
            var b2World = Box2D.Dynamics.b2World;
            var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
            var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
            var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
            var b2AABB = Box2D.Collision.b2AABB;
            var b2ContactListener = Box2D.Dynamics.b2ContactListener;

            window.onblur = function(){ Ticker.setPaused(true); PAUSED = true; console.log("paused"); }
            window.onfocus = function(){ Ticker.setPaused(false); PAUSED = false; console.log("unpaused"); }

            var PAUSED = false;

            var Type = {
                WALL : 1,
                BOULDER : 2
            };

            var CategoryBits = {
                WALL : 0x0001,
                BOULDER : 0x0002
            };

            function Boundary(density, restitution, friction, angularDamping, linearDamping, position, size, scale, categoryBits, maskBits, type, world){
                var boundaryFixture = new b2FixtureDef;
                boundaryFixture.density = density;
                boundaryFixture.restitution = restitution;
                boundaryFixture.friction = friction;
                boundaryFixture.filter.categoryBits = categoryBits;
                boundaryFixture.filter.maskBits = maskBits;
                boundaryFixture.shape = new b2PolygonShape;
                boundaryFixture.shape.SetAsBox(size.length/scale, size.height/scale);
                var boundaryBodyDef = new b2BodyDef;
                boundaryBodyDef.type = b2Body.b2_staticBody;
                boundaryBodyDef.angularDamping =  angularDamping;
                boundaryBodyDef.linearDamping = linearDamping;
                boundaryBodyDef.position.x = position.x/ scale; 
                boundaryBodyDef.position.y = position.y/scale; 
                this.boundary = world.CreateBody(boundaryBodyDef);
                this.boundary.CreateFixture(boundaryFixture);
                this.boundary.SetUserData(this);
                this.type = type;
            };

            function Position(x, y){
                this.x = x;
                this.y = y;
            };

            function Size(length, height){
                this.length = length;
                this.height = height;
            };

            function Noir(size, scale, step, debug){
                this.GRAVITY = new b2Vec2(0, 10/(scale/5));
                this.FPS = 30;
                this.SCALE = scale; 
                this.STEP = step;
                this.TIMESTEP = 1/this.STEP;
                this.DEBUG = debug;
                this.LENGTH = size.length;
                this.LENGTH_OFFSET = 20;
                this.HEIGHT = size.height;
                this.HEIGHT_OFFSET = 10;
                this.BOUNDARY_WIDTH = 2;
                this.VELOCITY_ITERATIONS = 10;
                this.POSITION_ITERATIONS = 10;

                this.world;
                this.contactListener;
                this.canvas;
                this.debugCanvas;
                this.debugDraw;
                this.context;
                this.debugContext;
                this.stage;
                this.previousTime = Date.now();
                this.game;
            };

            Noir.prototype.initCanvas = function(){
                this.canvas = document.getElementById('canvas');
                this.context = canvas.getContext('2d');
                this.stage = new Stage(canvas);
                this.stage.snapPixelsEnabled = true;
                this.stage.mouseEventsEnabled = true;
                //this.stage.onDoubleClick = function(event){ console.log("moving.."); }

                this.stage.enableMouseOver();
                if(this.DEBUG){
                    this.debugCanvas = document.getElementById('debugCanvas');
                    this.debugContext = debugCanvas.getContext('2d');
                    console.log('Debug on');
                } 
            };

            Noir.prototype.initDebug = function(){
                this.debugDraw = new b2DebugDraw();
                this.debugDraw.SetSprite(this.debugContext);
                this.debugDraw.SetDrawScale(this.SCALE);
                this.debugDraw.SetFillAlpha(0.7);
                this.debugDraw.SetLineThickness(1.0);
                this.debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
                this.world.SetDebugDraw(this.debugDraw);
            };

            Noir.prototype.setContactListener = function(){
                this.contactListener = new b2ContactListener;
                this.contactListener.events = this;
                this.contactListener.BeginContact = function(contact, manifold){
                    var bodyAUser = contact.GetFixtureA().GetBody().GetUserData();
                    var bodyBUser = contact.GetFixtureB().GetBody().GetUserData();
                    /* console.log(bodyAUser.type + " , " + bodyBUser.type); */
                    if((bodyAUser.type == Type.BOULDER) && (bodyBUser.type == Type.WALL)){ this.events.boulderWallContact(bodyAUser, bodyBUser); }
                    else if((bodyAUser.type == Type.WALL) && (bodyBUser.type == Type.BOULDER)){ this.events.boulderWallContact(bodyBUser, bodyAUser); }
                }
                this.world.SetContactListener(this.contactListener);
            };

            Noir.prototype.boulderWallContact = function(boulder, wall){ boulder.flagToDestroy(); };

            Noir.prototype.initPhysics = function(){
                this.lastTimestamp = Date.now();
                this.world = new b2World(this.GRAVITY, true);
                this.setContactListener();
                if(this.DEBUG){ this.initDebug(); console.log('Debug initialized'); } 
                var floor = new Boundary(1, 1, 0.6, 0.6, 0.6, new Position(-(this.LENGTH_OFFSET/2), (this.HEIGHT+ (this.HEIGHT_OFFSET - (this.HEIGHT_OFFSET - 1)))), 
                        new Size((this.LENGTH + this.LENGTH_OFFSET), this.BOUNDARY_WIDTH), this.SCALE, CategoryBits.WALL, CategoryBits.BOULDER, Type.WALL, this.world);
                /* var ceiling = new Boundary(1, 1, 0.6, 0.6, 0.6, new Position(-(this.LENGTH_OFFSET/2), (this.HEIGHT_OFFSET - (this.HEIGHT_OFFSET - 1))), 
                        new Size((this.LENGTH + this.LENGTH_OFFSET), this.BOUNDARY_WIDTH), this.SCALE, CategoryBits.WALL, CategoryBits.BOULDER, Type.WALL, this.world); */
                var leftFixture = new Boundary(1,1, 0.6, 0.6, 0.6, new Position(-(this.BOUNDARY_WIDTH - (this.BOUNDARY_WIDTH - 1)), -(this.LENGTH_OFFSET/2)),
                    new Size(this.BOUNDARY_WIDTH, (this.HEIGHT + this.HEIGHT_OFFSET)), this. SCALE, CategoryBits.WALL, CategoryBits.BOULDER, Type.WALL, this.world);
                var rightFixture = new Boundary(1,1, 0.6, 0.6, 0.6, new Position((this.LENGTH + (this.LENGTH_OFFSET - (this.LENGTH_OFFSET - 1))),  -(this.LENGTH_OFFSET/2)),
                    new Size(this.BOUNDARY_WIDTH,  (this.HEIGHT+ this.HEIGHT_OFFSET)), this.SCALE, CategoryBits.WALL, CategoryBits.BOULDER, Type.WALL, this.world);
            };

            Noir.prototype.tick = function(){
                this.updatePhysics();
                this.stage.update();
            };

            Noir.prototype.initTicker = function(){
                Ticker.setFPS(this.FPS);
                Ticker.useRAF = true;
                Ticker.addListener(this, true);
            };

            Noir.prototype.init = function(){
                this.initCanvas();
                this.initTicker();
                this.initPhysics();
                this.initGame(this.stage, this.world);
                var debug = document.getElementById('debug');
            };

            Noir.prototype.initOnLoadDocument = function(){
                console.log('running');
                if(document.loaded){ this.init(); }
                else{
                    if(window.addEventListener){ window.addEventListener('load', this.init(), false); }
                    else { window.attachEvent('onLoad', this.init); }
                }
            }

            Noir.prototype.updatePhysics = function(){
                    /* remove flagged objects for destruction */
                    /* update non-flagged objects */
                    if(!PAUSED){
                        this.updateGame();
                        this.world.Step(this.TIMESTEP, this.VELOCITY_ITERATIONS, this.POSITION_ITERATIONS);
                    this.world.ClearForces();
                    if(this.DEBUG){
                        this.world.m_debugDraw.m_sprite.graphics.clear();
                        this.world.DrawDebugData();
                    }
                }
            };

            Noir.prototype.initGame = function(){
                this.game = new Game(this.stage, this.SCALE, this.world);
                this.game.start();
            };

            Noir.prototype.updateGame = function(){ this.game.update(); }


            function Actor(density, restitution, friction, angularDamping, linearDamping, path, position, size, stage, scale, categoryBits, maskBits, type, world){
                this.skin = new Bitmap(path);
                this.skin.x = position.x;
                this.skin.y = position.y;
                this.skin.regX = (size.length/2);
                this.skin.regY = (size.height/2); 
                this.skin.snapToPixel = true;
                this.skin.mouseEnabled = false;
                stage.addChild(this.skin);

                var actorFixture = new b2FixtureDef;
                actorFixture.density = density;
                actorFixture.restitution = restitution;
                actorFixture.friction = friction;
                actorFixture.filter.categoryBits = categoryBits;
                actorFixture.filter.maskBits = maskBits;
                actorFixture.shape = new b2PolygonShape;
                actorFixture.shape.SetAsBox((size.length/2)/scale, (size.height/2)/scale);
                var actorBodyDef = new b2BodyDef;
                actorBodyDef.type = b2Body.b2_dynamicBody;
                actorBodyDef.angularDamping = angularDamping;
                actorBodyDef.linearDamping = linearDamping;
                actorBodyDef.position.x = this.skin.x/scale;
                actorBodyDef.position.y = this.skin.y/scale;
                this.body = world.CreateBody(actorBodyDef);
                this.body.CreateFixture(actorFixture);
                this.body.SetUserData(this);
                this.type = type;
                this.destroy = false;
            };

            Actor.prototype.flagToDestroy = function(){ this.destroy = true; };

            Actor.prototype.remove = function(game){
                game.stage.removeChild(this.skin);
                game.world.DestroyBody(this.body);
                game.actors.splice(game.actors.indexOf(this),1);
            };

            Actor.prototype.update = function(scale){  
                this.skin.rotation = this.body.GetAngle() * (180/Math.PI);
                this.skin.x = this.body.GetWorldCenter().x * scale;
                this.skin.y = this.body.GetWorldCenter().y * scale;
            };

            function Icon(path, position, size, stage){
                this.skin = new Bitmap(path);
                this.skin.x = position.x;
                this.skin.y = position.y;
                this.skin.regX = (size.length/2);
                this.skin.regY = (size.height/2); 
                stage.addChild(this.skin);
                //this.skin.onDoubleClick = function(event){ alert("click click"); }
                this.skin.onClick = function(event){ alert("click"); }
                this.skin.onPress = function(event){ console.log("pressing"); }
            };

            function Game(stage, scale, world){ 
                this.scale = scale;
                this.stage = stage;
                this.world = world;
                this.boulderSpawnDelayCounter = 0;
                this.actors = [];
                this.icon;
            };

            Game.prototype.start = function(){
                var  position = new Position(400, 200);
                var size = new Size(50, 50);
                console.log(this);
                this.icon = new Icon("images/bird.png", position, size, this.stage);
            };

            Game.prototype.controlledSpawn = function(stage, scale, world){
                var spawnInterval = (50 + Math.round(Math.random() * 10));
                this.boulderSpawnDelayCounter++;
                if(this.boulderSpawnDelayCounter % spawnInterval === 0){  
                    this.boulderSpawnDelayCounter = 0;
                    this.boulderSpawn();
                }
            };

            Game.prototype.boulderSpawn = function(stage, scale, world){
                var  position = new Position((100 + Math.round(Math.random() * 250)), -20);
                var size = new Size(50, 50);
                this.actors.push(new Actor(0.2, 0.6, 0.3, 0.3, 0.3, "images/bird.png", position, size, this.stage, this.scale, CategoryBits.BOULDER, CategoryBits.WALL, Type.BOULDER, this.world));
            };

            Game.prototype.update = function(){ 
                this.controlledSpawn();
                for(idx = 0; idx < this.actors.length; ++idx){
                 if(this.actors[idx].destroy == true){ this.actors[idx].remove(this); }}
                for(idx = 0; idx < this.actors.length; ++idx){ this.actors[idx].update(this.scale); }
            };

.html 文件

            <!doctype html>
                <html xmlns:og="http://ogp.me/ns#">
                    <head>
                        <meta charset="utf-8">
                        <title>Noir test</title>
                        <link href="css/style.css" rel="stylesheet" type="text/css" />
                    </head>
                    <body>
                        <canvas width="500" height="500" id="canvas"></canvas>
                        <canvas width="500" height="500" id="debugCanvas"></canvas>
                        <script> var createjs = window </script>
                        <script type="text/javascript" src="libs/easeljs-0.5.0.min.js"></script>
                        <script type="text/javascript" src="libs/Box2dWeb-2.1.a.3.min.js"></script>
                        <script type="text/javascript" src="js/noir.js"></script>
                        <script> var noir = new Noir(new Size(500, 500), 30, 20, false);  noir.initOnLoadDocument()</script>
                    </body>
                </html>

我正在本地服务器上使用它,因此触发远程服务器的这种类似行为的服务器安全问题不适用(我认为)。伙计们,我被难住了。您的帮助将不胜感激。谢谢。

4

1 回答 1

0

如果没有看到你的 CSS,我猜你的调试画布在你的主画布之上。如果是这种情况,调试画布将成为任何鼠标事件的目标,从而阻止您的主画布(和相关舞台)接收它们。

由于一个错误(最近在 NEXT 版本中修复),EaselJS 在窗口而不是画布上订阅双击事件,这可能是 onDoubleClick 为您工作的原因。

此外,可能值得查看较新版本的 EaselJS。v0.7.0 包含一个很棒的新事件模型,v0.7.1 将很快推出,修复双击。

于 2013-11-21T17:04:04.787 回答