vue.js - craftyjs click does not work

Question

I have the following code yet nothing happens.

    Crafty.e('2D, Canvas, Color, Mouse')
        .attr({x: 10, y: 10, w: 40, h: 40})
        .color('orange')
        .bind('Click', function(e){
          alert('clicked', MouseEvent);
          console.log("hello");
          Crafty.log("Clicked right button");
        });

Am I missing something?

Edit:

Example code using answer:

<template>
    <div ref='game' id='game'></div>
</template>

<script>
  /* eslint-disable no-unused-vars */
  require('@/assets/game/crafty-min.js')
  import image from '@/assets/game/background/environment_forest_evening.png'
  import button from '@/assets/game/buttons/blank-light-blue-button-md.png'
  /* eslint-enable no-unused-vars */

  export default{
    name: 'game',
    data() {
      return {
          game: null
      }
    },
    mounted: function () {
        Crafty.init(500,350, document.getElementById('game'));
        // Crafty.canvas.init();

        Crafty.e('2D, Canvas, Color, Mouse')
            .attr({x: 10, y: 10, w: 40, h: 40})
            .color('orange')
            .bind('Click', function(e){
              alert('clicked', MouseEvent);
              console.log("hello");
              Crafty.log("Clicked right button");
            });
    },
    methods: {
    },
    destroyed () {
      // this.game.destroy()
    },
    updated () {

    }
  }
</script>

<style>
    #game {
        border: 1px solid black;
        margin: auto;
        height: 300px;
        width: 100%;
    }
</style>

Optional · Answer 1 · 2017-10-22T14:13:40.017

Did you initialize Crafty? I tried your code in jsfiddle

// Init Crafty:

Crafty.init();
Crafty.canvas.init();

Crafty.e('2D, Canvas, Color, Mouse')
        .attr({x: 10, y: 10, w: 40, h: 40})
        .color('orange')
        .bind('Click', function(e){
          alert('clicked', MouseEvent);
          console.log("hello");
          //Crafty.log("Clicked right button");
        });

http://jsfiddle.net/d0Ltog5s/1/

Edit : as per your comment here is the one using vue. (I can't use fiddle for export so used old style

Jsfiddle link :https://jsfiddle.net/x0es9214/1/

Vue.component('game', {
 template: `<div ref='game' id='game'></div>`,

 data: function () {
   return {
     game: null
    };
  },
  mounted: function () {
    Crafty.init();
    Crafty.canvas.init();

    Crafty.e('2D, Canvas, Color, Mouse')
        .attr({x: 10, y: 10, w: 40, h: 40})
        .color('orange')
        .bind('Click', function(e){
          alert('clicked', MouseEvent);
          console.log("hello");
          //Crafty.log("Clicked right button");
        });
        //alert('crafty');
  }
})



new Vue({
 el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-resource/dist/vue-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script>
<div id="app">
  <game></game>
</div>

hmm, very strange. I'm also using it as part of Vue, but I'm not sure why it's still not working (I didn't need to use Crafty.canvas.init();). I'll update my code to show what I have. — A. L, Oct 22 '17 at 06:18
@A.Lau I have updated the code. See if that helps and solves your person — Optional, Oct 22 '17 at 14:13
Are you using an older version of crafty? Because i get a `Cannot read property 'init' of undefined` — A. L, Oct 23 '17 at 07:44
crafty is at 0.8 right now. But thanks anyway, I think it's too hard given what I want to do. I'm just gonna make a prototype with just html instead since it's going to be a multiplayer game — A. L, Oct 23 '17 at 09:07

vue.js - craftyjs click does not work

1 Answers1