Skip to content

V
Vue-Phaser-Node-Express-Socket.IO

前端开发者-李墨尘 / Vue-Phaser-Node-Express-Socket.IO

通知 1
Star 0
Fork 0
V
Vue-Phaser-Node-Express-Socket.IO

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 cff85464 编写于 作者: 前端开发者-李墨尘's avatar 前端开发者-李墨尘 🏃🏻
浏览文件
操作

no commit message

上级 31e77963
展开全部 隐藏空白更改
内联 并排
Showing with 14775 addition and 0 deletion
tabletop-project/client/.editorconfig 0 → 100644
浏览文件 @ cff85464
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
tabletop-project/client/.gitignore 0 → 100644
浏览文件 @ cff85464
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
tabletop-project/client/README.md 0 → 100644
浏览文件 @ cff85464
# client
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
tabletop-project/client/babel.config.js 0 → 100644
浏览文件 @ cff85464
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
tabletop-project/client/package-lock.json 0 → 100644
浏览文件 @ cff85464
此差异已折叠。
tabletop-project/client/package.json 0 → 100644
浏览文件 @ cff85464
{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "eslint --fix --ext .js,.vue src"
},
"dependencies": {
"core-js": "^3.6.5",
"phaser": "^3.24.1",
"socket.io-client": "^2.3.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
tabletop-project/client/public/index.html 0 → 100644
浏览文件 @ cff85464
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
tabletop-project/client/src/App.vue 0 → 100644
浏览文件 @ cff85464
<template>
<div id="app">
<div id="game">
<Game />
</div>
<div id="border" />
<div id="input">
<Chat />
</div>
</div>
</template>
<script>
import Chat from './components/Chat.vue'
import Game from './components/Game.vue'
export default {
name: 'App',
components: {
Chat,
Game
}
}
</script>
<style>
#app {
font-family: 'Trebuchet MS';
text-align: left;
background-color: black;
color: cyan;
display: flex;
}
#game {
width: 50vw;
height: 100vh;
}
#input {
width: 50vw;
height: 100vh;
}
#border {
border-right: 2px solid cyan;
}
@media (max-width: 1000px) {
#app {
flex-direction: column;
}
#game {
width: 100vw;
height: 50vh;
}
#input {
width: 100vw;
height: 50vh;
}
}
</style>
tabletop-project/client/src/components/Chat.vue 0 → 100644
浏览文件 @ cff85464
<template>
<div id="container">
<div id="output">
<h1>STRUCT 聊天记录</h1>
<p v-for="(text, index) in textOutput" :key="index">{{text}}</p>
</div>
<div id="input">
<form>
<input type="text" v-model="textInput" :placeholder="textInput" />
<input type="submit" value="Send" v-on:click="submitText" />
</form>
</div>
</div>
</template>
<script>
import io from 'socket.io-client'
const socket = io('http://localhost:3000')
export default {
name: 'Chat',
data: function () {
return {
textInput: null,
textOutput: []
}
},
methods: {
submitText: function (event) {
event.preventDefault()
socket.emit('send', this.textInput)
}
},
created: function () {
socket.on('connect', () => {
console.log('Connected!')
})
socket.on('receive', (text) => {
console.log('!!!!!!!!!11')
this.textOutput.push(text)
this.textInput = null
})
}
}
</script>
<style scoped>
#container {
text-align: left;
display: flex;
flex-direction: column;
margin-left: 1vw;
min-height: 100vh;
}
h1 {
text-align: center;
}
.hotpink {
color: hotpink;
}
#input {
position: fixed;
margin-top: 95vh;
}
input[type="text"] {
height: 20px;
width: 40vw;
border: 2px solid cyan;
background-color: black;
color: hotpink;
padding-left: 1em;
}
input[type="submit"] {
height: 25px;
width: 5vw;
background-color: black;
color: cyan;
border: 2px solid cyan;
margin-right: 2vw;
}
input[type="submit"]:focus {
outline: none;
}
input[type="submit"]:hover {
color: hotpink;
}
@media (max-width: 1000px) {
#container {
border-left: none;
border-top: 2px solid cyan;
min-height: 50vh;
}
#input {
margin-top: 43vh;
}
#output {
margin-right: 10vw;
}
input[type="text"] {
width: 60vw;
}
input[type="submit"] {
min-width: 10vw;
}
}
</style>
tabletop-project/client/src/components/Game.vue 0 → 100644
浏览文件 @ cff85464
<template>
<div :id="containerId" v-if="downloaded" />
<div class="placeholder" v-else>
Downloading...
</div>
</template>
<script>
export default {
name: 'Game',
data: function () {
return {
downloaded: false,
gameInstance: null,
containerId: 'game-container'
}
},
async mounted () {
const game = await import('../game/game')
this.downloaded = true
this.$nextTick(() => {
this.gameInstance = game.launch(this.containerId)
})
},
destroyed () {
this.gameInstance.destroy(false)
}
}
</script>
<style scoped></style>
tabletop-project/client/src/game/game.js 0 → 100644
浏览文件 @ cff85464
import Phaser from 'phaser'
import GameScene from './scenes/gamecene'
function launch (containerId) {
return new Phaser.Game({
type: Phaser.AUTO,
parent: containerId,
scene: [
GameScene
],
scale: {
mode: Phaser.Scale.FIT,
width: '100%',
height: '100%'
}
})
}
export default launch
export {
launch
}
tabletop-project/client/src/game/scenes/gamecene.js 0 → 100644
浏览文件 @ cff85464
import Phaser from 'phaser'
import io from 'socket.io-client'
export default class GameScene extends Phaser.Scene {
constructor () {
super({
key: 'GameScene'
})
}
preload () {
}
create () {
this.socket = io('http://localhost:3000')
this.socket.on('struct create', (width, height) => {
const token = this.add.rectangle(300, 300, width, height, 0x00ffff).setInteractive()
this.input.setDraggable(token)
})
this.input.on('drag', (pointer, gameObject, dragX, dragY) => {
gameObject.x = dragX
gameObject.y = dragY
})
}
update () {
}
}
tabletop-project/client/src/main.js 0 → 100644
浏览文件 @ cff85464
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
tabletop-project/client/src/router/index.js 0 → 100644
浏览文件 @ cff85464
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
tabletop-project/client/src/store/index.js 0 → 100644
浏览文件 @ cff85464
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
tabletop-project/package-lock.json 0 → 100644
浏览文件 @ cff85464
此差异已折叠。
tabletop-project/package.json 0 → 100644
浏览文件 @ cff85464
{
"name": "gameserve",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"nodemon": "^2.0.4",
"socket.io": "^2.3.0"
}
}
\ No newline at end of file
tabletop-project/server.js 0 → 100644
浏览文件 @ cff85464
const server = require('express')();
const http = require('http').createServer(server);
const io = require('socket.io')(http);
io.on('connection', function(socket) {
console.log('A user connected: ' + socket.id);
socket.on('send', function(text) {
let newText = "<" + socket.id + "> " + text;
if (text === 'struct card' || text === '大卡片') {
io.emit('struct create', 130, 180)
};
if (text === 'struct token' || text === '小卡片') {
io.emit('struct create', 100, 100)
};
io.emit('receive', newText);
});
socket.on('disconnect', function() {
console.log('A user disconnected: ' + socket.id);
});
});
http.listen(3000, function() {
console.log('Server started!');
});
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或