Коммит f0da7f19 создал по автору Medvedev Anton's avatar Medvedev Anton
Просмотр файлов

добавлен и протестирован Phaser

владелец 0598561e
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@quasar/extras": "^1.16.4", "@quasar/extras": "^1.16.4",
"phaser": "^3.60.0",
"quasar": "^2.6.0", "quasar": "^2.6.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-router": "^4.0.0" "vue-router": "^4.0.0"
...@@ -2402,6 +2403,11 @@ ...@@ -2402,6 +2403,11 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/eventemitter3": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
},
"node_modules/express": { "node_modules/express": {
"version": "4.18.2", "version": "4.18.2",
"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
...@@ -3854,6 +3860,14 @@ ...@@ -3854,6 +3860,14 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/phaser": {
"version": "3.60.0",
"resolved": "https://registry.npmjs.org/phaser/-/phaser-3.60.0.tgz",
"integrity": "sha512-IKUy35EnoEVcl2EmJ8WOyK4X8OoxHYdlhZLgRGpNrvD1fEagYffhVmwHcapE/tGiLgyrnezmXIo5RrH2NcrTHw==",
"dependencies": {
"eventemitter3": "^5.0.0"
}
},
"node_modules/picocolors": { "node_modules/picocolors": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
......
...@@ -14,20 +14,21 @@ ...@@ -14,20 +14,21 @@
}, },
"dependencies": { "dependencies": {
"@quasar/extras": "^1.16.4", "@quasar/extras": "^1.16.4",
"phaser": "^3.60.0",
"quasar": "^2.6.0", "quasar": "^2.6.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-router": "^4.0.0" "vue-router": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@quasar/app-vite": "^1.3.0",
"@types/node": "^12.20.21",
"@typescript-eslint/eslint-plugin": "^5.10.0", "@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0", "@typescript-eslint/parser": "^5.10.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.10.0", "eslint": "^8.10.0",
"eslint-plugin-vue": "^9.0.0",
"eslint-config-prettier": "^8.1.0", "eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"@types/node": "^12.20.21",
"@quasar/app-vite": "^1.3.0",
"autoprefixer": "^10.4.2",
"typescript": "^4.5.4" "typescript": "^4.5.4"
}, },
"engines": { "engines": {
...@@ -35,4 +36,4 @@ ...@@ -35,4 +36,4 @@
"npm": ">= 6.13.4", "npm": ">= 6.13.4",
"yarn": ">= 1.21.1" "yarn": ">= 1.21.1"
} }
} }
\ No newline at end of file
<template> <template>
<div> <div ref="gameRef"></div>
<p>{{ title }}</p>
<ul>
<li v-for="todo in todos" :key="todo.id" @click="increment">
{{ todo.id }} - {{ todo.content }}
</li>
</ul>
<p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
<p>Active: {{ active ? 'yes' : 'no' }}</p>
<p>Clicks on todos: {{ clickCount }}</p>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { ref, onMounted } from 'vue';
defineComponent, import * as Phaser from 'phaser';
PropType,
computed,
ref,
toRef,
Ref,
} from 'vue';
import { Todo, Meta } from './models';
function useClickCount() { export default {
const clickCount = ref(0); setup() {
function increment() { const gameRef = ref<HTMLDivElement | null>(null);
clickCount.value += 1
return clickCount.value; onMounted(() => {
} const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
return { clickCount, increment }; new Phaser.Game(config);
}
function useDisplayTodo(todos: Ref<Todo[]>) { function preload(this: Phaser.Scene) {
const todoCount = computed(() => todos.value.length); this.load.setBaseURL('https://labs.phaser.io');
return { todoCount }; this.load.image('sky', 'assets/skies/space3.png');
} this.load.image('logo', 'assets/sprites/phaser3-logo.png');
}
export default defineComponent({ function create(this: Phaser.Scene) {
name: 'ExampleComponent', this.add.image(400, 300, 'sky');
props: { const logo = this.physics.add.image(400, 100, 'logo');
title: { logo.setVelocity(100, 200);
type: String, logo.setBounce(1, 1);
required: true logo.setCollideWorldBounds(true);
}, }
todos: { });
type: Array as PropType<Todo[]>,
default: () => [] return { gameRef };
}, }
meta: { };
type: Object as PropType<Meta>,
required: true
},
active: {
type: Boolean
}
},
setup (props) {
return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
},
});
</script> </script>
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать