vue.js - craftyjs點擊不起作用

Question

我有以下代碼，但沒有任何反應。

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"); 
     }); 

我錯過了什麼嗎？

編輯：

示例代碼使用的答案：

<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> 

Answer 1

你初始化狡猾？我想你的代碼中的jsfiddle

//初始化狡猾：

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/

編輯：根據您的評論這裏是使用VUE之一。 （我不能用小提琴出口這樣用舊式

的jsfiddle鏈接：https://jsfiddle.net/x0es9214/1/

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

 
\t data: function() { 
 
    \t return { 
 
    \t 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({ 
 
\t 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>