我有以下代码但没有任何反应。
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>
最佳答案
你初始化了 Crafty 吗?我在 jsfiddle 中尝试了你的代码
//初始化 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链接: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>
关于javascript - vue.js - craftyjs 点击不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46870291/