Test_Project_Cocos/cocos-vuecli-demo
1
0
Fork 0
mirror of https://github.com/Amterasu/cocos-vuecli-demo.git synced 2025-11-03 12:55:44 +00:00
Code Issues Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
靳国强
2021-04-09 14:43:19 +08:00
parent 7924328113
commit a8f9370ba0
131 changed files with 67901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

955
vueTem/src/views/editor/centerPanel.vue Normal file
View File

@@ -0,0 +1,955 @@
<template>
<div class="centerEditor">
<div class="centerEditorContainer">
<div class="loading" v-show="gameLoadingStatus">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
stroke="#fff"
>
<g
fill="none"
fill-rule="evenodd"
transform="translate(1 1)"
stroke-width="2"
>
<circle cx="22" cy="22" r="6" stroke-opacity="0">
<animate
attributeName="r"
begin="1.5s"
dur="3s"
values="6;22"
calcMode="linear"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-opacity"
begin="1.5s"
dur="3s"
values="1;0"
calcMode="linear"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-width"
begin="1.5s"
dur="3s"
values="2;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle cx="22" cy="22" r="6" stroke-opacity="0">
<animate
attributeName="r"
begin="3s"
dur="3s"
values="6;22"
calcMode="linear"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-opacity"
begin="3s"
dur="3s"
values="1;0"
calcMode="linear"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-width"
begin="3s"
dur="3s"
values="2;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle cx="22" cy="22" r="8">
<animate
attributeName="r"
begin="0s"
dur="1.5s"
values="6;1;2;3;4;5;6"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
</g>
</svg>
</div>
<div>
<div class="base-filter-block">
<ul class="group-list">
<li class="group-item">
<label class="group-label"
><span class="label-name">游戏类型</span
><span class="colon">：</span></label
>
<div class="group-options">
<div
class="option-item"
:class="{ 'is-actived': !GameSyncTypeEnumSelect }"
@click="selectFilter('GameSyncTypeEnum', null)"
>
<span>全部</span>
</div>
<div
class="option-item"
:class="{ 'is-actived': GameSyncTypeEnumSelect == item }"
v-for="(item, index) in GameSyncTypeEnum"
:key="index"
@click="selectFilter('GameSyncTypeEnum', item)"
>
<span> {{ item }} </span>
</div>
</div>
</li>
<li class="group-item">
<label class="group-label"
><span class="label-name">年级</span
><span class="colon">：</span></label
>
<div class="group-options">
<div
class="option-item"
:class="{ 'is-actived': !GradeEnumSelect }"
@click="selectFilter('GradeEnum', null)"
>
<span>全部</span>
</div>
<div
class="option-item"
:class="{ 'is-actived': GradeEnumSelect == item }"
v-for="(item, index) in GradeEnum"
:key="index"
@click="selectFilter('GradeEnum', item)"
>
<span> {{ item }}年级 </span>
</div>
</div>
</li>
<li class="group-item">
<label class="group-label"
><span class="label-name">所属环节</span
><span class="colon">：</span></label
>
<div class="group-options">
<div
class="option-item"
:class="{ 'is-actived': !CourseStepEnumSelect }"
@click="selectFilter('CourseStepEnum', null)"
>
<span>全部</span>
</div>
<div
class="option-item"
:class="{ 'is-actived': CourseStepEnumSelect == item }"
v-for="(item, index) in CourseStepEnum"
:key="index"
@click="selectFilter('CourseStepEnum', item)"
>
<span> {{ item }} </span>
</div>
</div>
</li>
<li class="group-item">
<label class="group-label"
><span class="label-name">研发者</span
><span class="colon">：</span></label
>
<div class="group-options">
<div
class="option-item"
:class="{ 'is-actived': !AuthorEnumSelect }"
@click="selectFilter('AuthorEnum', null)"
>
<span>全部</span>
</div>
<div
class="option-item"
:class="{ 'is-actived': AuthorEnumSelect == item }"
v-for="(item, index) in AuthorEnum"
:key="index"
@click="selectFilter('AuthorEnum', item)"
>
<span> {{ item }} </span>
</div>
</div>
</li>
<li class="group-item">
<label class="group-label"
><span class="label-name">学科</span
><span class="colon">：</span></label
>
<div class="group-options">
<div
class="option-item"
:class="{ 'is-actived': !SubjectEnumSelect }"
@click="selectFilter('SubjectEnum', null)"
>
<span>全部</span>
</div>
<div
class="option-item"
:class="{ 'is-actived': SubjectEnumSelect == item }"
v-for="(item, index) in SubjectEnum"
:key="index"
@click="selectFilter('SubjectEnum', item)"
>
<span> {{ item }} </span>
</div>
</div>
</li>
</ul>
</div>
</div>
<p class="result-num">
共 <b>{{ sampleData.length }}</b> 个游戏
</p>
<div class="no-data" v-if="!sampleData.length">
<img src="/static/img/nodata.png" class="no-data-bg" />
<p class="no-data-text">未找到相应内容</p>
</div>
<div class="itemList">
<div
class="itemContainer"
v-for="item in sampleData"
:key="item.name"
@click="showGameModel(item)"
>
<span><img :src="'/static/img/cover/' + item.name + '.jpg'" /></span>
<div class="cover-info">
<span>
<h4>{{ item.title }}</h4>
</span>
<small>{{ item.description }}</small>
</div>
<div class="cover-fields">
<i class="fa fa-list-ul"></i> &nbsp;
{{ item.type }}
</div>
<div class="cover-stat">
<i class="fa fa-eye"></i
><span class="f10"> &nbsp;{{ item.tip }}</span>
<i class="fa fa-heart"></i
><span class="f10"> &nbsp;{{ item.grade.join(',') }}年级</span>
<div class="cover-yh">
{{ item.author }}
</div>
</div>
</div>
</div>
<div class="modalMask" v-show="gameShowStatus">
<div class="modalContainer">
<map-editor ref="editor" @sceneLoaded="sceneLoaded"> </map-editor>
<div class="game-details-block">
<div class="block-top">
<p class="game-name text-overflow">
<span> {{ selectSample.title }} </span>
</p>
<div class="game-datas">
<!-- <div class="game-use-count"><span class="use-num">使用 0</span><span class="answer-num">作答 0</span><span class="correct-rate">正确率 0%</span></div> -->
</div>
<div class="tool-btns">
<div
class="game-add-button iconfont icon-car larger"
:class="{ disabled: disabledStartBtn }"
@click="gameBegin"
>
开始游戏
</div>
</div>
</div>
<ul class="block-main overflow">
<li>
<label class="label-name">游戏类型：</label>
<div class="game-id">
<em>{{ selectSample.type }}</em>
</div>
</li>
<li>
<label class="label-name">年级：</label>
<div class="game-url">
<em>{{ selectSample.grade.join(',') }}年级</em>
</div>
</li>
<li>
<label class="label-name">游戏简介：</label>
<p class="game-desc">{{ selectSample.description }}</p>
</li>
<li>
<label class="label-name">游戏标签：</label>
<ul class="game-label-list">
<li><span>思维逻辑</span></li>
<li><span>逆向思维</span></li>
<li><span>鸡蛋灌饼</span></li>
</ul>
</li>
<li class="game-label">
<label class="label-name">程序id：</label>
<ul class="knowledge-label-list">
<li>{{ selectSample.name }}</li>
</ul>
</li>
<li class="upload-name">
<label class="label-name">研发：</label
><span>{{ selectSample.author }}</span>
</li>
</ul>
</div>
</div>
<div
class="fa fa-close iconClose"
aria-hidden="true"
@click="closeGameModel"
></div>
</div>
<transition name="fade">
<div class="yyMask" v-show="yyLoadingStatus">
<img src="/static/img/loading-yy.gif" />
</div>
</transition>
</div>
</div>
</template>
<script>
import mapEditor from './mapEditor'
import {
sampleData,
GameSyncTypeEnum,
GradeEnum,
CourseStepEnum,
AuthorEnum,
SubjectEnum,
} from '@/config/configSample'
import web2game from './web2game'
import { GAME2WEB_EVENTTYPE, E2G_EVENTTYPE } from '../../const/event'
export default {
created() {
this.sampleData = sampleData
this.oriSampleData = this.sampleData
// eventBus.on(GAME2WEB_EVENTTYPE.ON_PAGE_CHANGE_SUCCESS, () => {
// this.gameLoadingStatus = false
// this.gameShowStatus = true
// setTimeout(() => {
// // 改变位置后
// const myEvent = new Event('resize')
// window.dispatchEvent(myEvent)
// }, 200)
// })
},
components: {
mapEditor,
},
data() {
return {
gameShowStatus: false,
gameLoadingStatus: false,
isFirstCreate: true,
yyLoadingStatus: false,
disabledStartBtn: false,
GameSyncTypeEnum,
GradeEnum,
CourseStepEnum,
AuthorEnum,
SubjectEnum,
GameSyncTypeEnumSelect: null,
GradeEnumSelect: null,
CourseStepEnumSelect: null,
AuthorEnumSelect: null,
SubjectEnumSelect: null,
sampleData: [],
oriSampleData: [],
selectSample: {
name: 'game_labyrinth',
title: '迷宫',
description: '使小球走道终点，可以用aswd或者上下左右的键盘进行控制',
grade: [1, 2, 3],
tip: '大游戏',
author: '靳国强',
type: '分发',
},
ratio: 2.5,
STUDENT_SIZE: {
width: 2048,
height: 1152,
},
}
},
methods: {
sceneLoaded() {
// this.gameShowStatus = false
this.yyLoadingStatus = false
},
showGameModel(selectSample) {
this.gameLoadingStatus = true
this.selectSample = selectSample
this.disabledStartBtn = false
web2game.loadScene(selectSample.name)
// .then((sceneName) => {
// cc.director.loadScene(selectSample.name)
this.gameLoadingStatus = false
this.gameShowStatus = true
// // web2game.updateResolution(this.STUDENT_SIZE, this.ratio)
// // setTimeout(() => {
// // // 改变位置后
// // const myEvent = new Event('resize')
// // window.dispatchEvent(myEvent)
// // },400)
// })
},
closeGameModel() {
this.gameShowStatus = false
// web2game.unloadGame()
},
gameBegin() {
if (this.disabledStartBtn) return
this.disabledStartBtn = true
web2game.emit('nova.teacher.start')
},
selectFilter(key, value) {
this[key + 'Select'] = value
this.search()
},
search() {
this.sampleData = this.oriSampleData.filter((el) => {
return (
(!this.GameSyncTypeEnumSelect ||
el.type == this.GameSyncTypeEnumSelect) &&
(!this.GradeEnumSelect || el.grade.includes(this.GradeEnumSelect)) &&
(!this.CourseStepEnumSelect || el.tip == this.CourseStepEnumSelect) &&
(!this.AuthorEnumSelect || el.author == this.AuthorEnumSelect) &&
(!this.SubjectEnumSelect || el.subject == this.SubjectEnumSelect)
)
})
},
},
}
</script>
<style scoped lang = scss>
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 1s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 1s;
}
.centerEditor {
position: relative;
top: 75px;
padding-bottom: 50px;
width: 100%;
height: 100%;
.centerEditorContainer {
width: 1200px;
margin: 0 auto;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.7);
}
.no-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
img {
height: 136px;
}
.no-data-text {
font-size: 12px;
line-height: 20px;
color: #666;
text-align: center;
}
}
.base-filter-block {
position: relative;
display: flex;
justify-content: space-between;
padding: 13px 24px 13px 24px;
background: #fff;
flex-shrink: 0;
margin-top: 24px;
box-shadow: 0 1px 3px 0 rgba(85, 97, 107, 0.15);
border-radius: 4px;
.group-list {
flex: 1;
margin-right: 16px;
.group-item {
display: flex;
position: relative;
.group-label {
flex-shrink: 0;
display: flex;
margin-top: 3px;
width: 65px;
font-size: 12px;
line-height: 20px;
font-weight: 600;
.red-icon {
position: relative;
padding-left: 14px;
}
.label-name {
padding-left: 0px;
flex: 1;
text-align-last: justify;
}
.colon {
flex-shrink: 0;
}
}
.group-options {
flex: 1;
display: flex;
flex-wrap: wrap;
.option-item {
padding: 3px 4px;
height: 26px;
cursor: pointer;
span {
display: inline-block;
padding: 1px 6px;
font-size: 12px;
line-height: 18px;
border-radius: 4px;
}
&.is-actived span,
&:hover span {
background-color: #e7f5ff;
color: #3f92ff;
}
}
}
}
}
}
.itemList {
display: grid;
grid-template-columns: repeat(4, 23.7%);
grid-row-gap: 20px;
grid-column-gap: 20px;
width: 100%;
.itemContainer {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
position: relative;
transition: all 1s ease 0s;
overflow: hidden;
&:hover {
box-shadow: 7px 17px 12px 0 rgba(0, 0, 0, 0.1);
}
.cover-info {
padding: 6px 15px 28px;
height: 80px;
overflow: hidden;
h4 {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
display: block;
font-weight: bold;
line-height: 18px;
margin-top: 7px;
margin-bottom: 5px;
}
small {
color: #838383;
padding-bottom: 10px;
}
}
.cover-fields {
bottom: 34px;
font-size: 12px;
height: 35px;
left: 10px;
line-height: 35px;
max-width: 210px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 15px;
padding-right: 15px;
}
.cover-stat {
background-color: #f6f6f6;
border-radius: 0 0 3px 3px;
border-top: 1px solid #e7e7e7;
box-shadow: 0 1px 0 0 #fff inset;
padding: 7px 15px 7px 15px;
color: #8b8b8c;
position: relative;
.cover-yh {
position: absolute;
right: 1px;
top: 1px;
border-left: 1px solid #ddd;
color: #aaa;
cursor: default;
width: 40px;
line-height: 30px;
height: 30px;
transition: color 0.15s linear;
text-align: center;
display: inline-block;
text-rendering: auto;
font-size: 12px;
font-family: 'Arial';
}
.f10 {
font-size: 10px;
font-family: 'Arial';
padding-right: 12px;
}
}
img {
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transition: all 1s ease 0s;
}
}
}
.yyMask {
position: fixed;
top: 0;
left: 0;
z-index: 4;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 1);
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(-0.5, 0.5);
}
}
.result-num {
flex-shrink: 0;
margin-top: 20px;
margin-bottom: 12px;
font-size: 12px;
line-height: 18px;
color: #666;
}
.modalMask {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
background: rgba(3, 3, 3, 0.5);
.iconClose {
position: absolute;
top: 40px;
right: 300px;
width: 40px;
height: 40px;
font-size: 40px;
color: #fff;
cursor: pointer;
}
.modalContainer {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.game-details-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 16px;
width: 370px;
height: 460px;
background: #fff;
-webkit-box-shadow: 0 2px 10px 0 rgba(58, 66, 73, 0.21);
box-shadow: 0 2px 10px 0 rgba(58, 66, 73, 0.21);
border-radius: 4px;
.block-main,
.block-top {
padding-left: 24px;
padding-right: 22px;
}
.block-top {
-ms-flex-negative: 0;
flex-shrink: 0;
padding-top: 24px;
padding-bottom: 21px;
border-bottom: 1px solid #f0f1f2;
}
.block-main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding-bottom: 31px;
}
.block-footer {
-ms-flex-negative: 0;
flex-shrink: 0;
border-top: 1px solid #f0f1f2;
text-align: center;
}
.game-name {
font-size: 22px;
font-weight: 600;
line-height: 28px;
}
.game-datas {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 14px;
.game-use-count {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 12px;
line-height: 16px;
color: #979ea6;
}
.game-use-count > span + span {
margin-left: 12px;
}
}
.tool-btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 22px;
.larger {
width: 100%;
height: 32px;
line-height: 32px;
border-radius: 8px;
}
.game-add-button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
font-size: 14px;
text-align: center;
vertical-align: middle;
background: #3f92ff;
color: #fff;
cursor: pointer;
&:active {
background: #66a8ff;
}
&:hover {
background: #66a8ff;
}
&.disabled {
cursor: not-allowed;
filter: grayscale(1);
}
}
}
.tool-btns .btn-edit,
.tool-btns .game-add-button {
margin-right: 14px;
}
.tool-btns .btn-edit,
.tool-btns .btn-modify {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 15px;
border-radius: 8px;
color: #3f92ff;
}
.tool-btns .btn-edit > .iconfont,
.tool-btns .btn-modify > .iconfont {
margin-right: 6px;
}
.block-main > li {
margin-top: 19px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 22px;
}
.block-main > li.game-label,
.block-main > li.upload-name {
margin-top: 8px;
}
.label-name {
-ms-flex-negative: 0;
flex-shrink: 0;
margin-right: 8px;
width: 70px;
-moz-text-align-last: justify;
text-align-last: justify;
}
.icon-copy {
margin-left: 6px;
padding: 0 6px;
cursor: pointer;
}
.icon-copy:hover {
color: #3f92ff;
}
.game-desc {
word-break: break-all;
}
.game-desc .icon-arrow-bottom,
.game-desc .icon-arrow-top {
color: #3f92ff;
cursor: pointer;
}
.game-label-list,
.knowledge-label-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
line-height: 0;
}
.game-label-list li {
margin-right: 12px;
margin-bottom: 11px;
padding: 1px 0;
}
.game-label-list li > span {
display: inline-block;
padding: 1px 6px;
font-size: 12px;
line-height: 18px;
border-radius: 3px;
color: #979ea6;
background-color: #f0f4f6;
}
.knowledge-label-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 20px;
margin-bottom: 12px;
line-height: 22px;
}
.knowledge-label-list li .icon-label {
margin-right: 6px;
color: #979ea6;
}
.knowledge-label-list li > span {
color: #979ea6;
}
.btn-delete {
margin-top: 18px;
margin-bottom: 20px;
font-size: 14px;
line-height: 22px;
color: #333;
cursor: pointer;
}
.btn-delete .icon-delete {
margin-right: 10px;
font-size: 14px;
color: #979ea6;
}
.btn-delete:hover .icon-delete {
color: #ff4640;
}
}
.gameDetailsBlock {
display: flex;
flex-direction: column;
margin-left: 16px;
width: 420px;
background: #fff;
box-shadow: 0 2px 10px 0 rgba(58, 66, 73, 0.21);
border-radius: 4px;
/* &.teacherSize {
width: 3036px;
height: 1366px;
transform: matrix(0.33, 0, 0, 0.33, -1618, -768);
}
&.studentSize {
width: 2048px;
height: 1152px;
transform: matrix(0.5, 0, 0, 0.5, -1124, -576);
} */
}
}
}
}
</style>

28
vueTem/src/views/editor/editor.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="editor">
<center-panel></center-panel>
<right-panel></right-panel>
</div>
</template>
<script>
import centerPanel from './centerPanel'
import rightPanel from './rightPanel'
export default {
name: 'electron-cocos',
components: {
centerPanel,
rightPanel,
},
created() {},
methods: {},
}
</script>
<style scoped>
.editor {
width: 100%;
height: 100%;
}
</style>

159
vueTem/src/views/editor/headEditor.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<div class="topbar topicfixed">
<div class="toppic">
<div class="topside">
<a
href="##"
class="logoLink"
>im.qq.com</a>
<ul
id="topNav"
class="topNav"
>
<li
v-for='item in routerData'
:key='item.path'
active-class='current'
>
<router-link :to="item.path">
{{item.name}}
</router-link>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
routerData: [
{
name: '首页',
path: '/index',
},
{
name: '汉字笔顺生成器',
path: '/hanzi',
},
],
}
},
created() {},
methods: {},
}
</script>
<style scoped lang = scss>
div {
margin: 0;
padding: 0;
font-family: Helvetica, Tahoma, Arial, 'Hiragino Sans GB',
'Hiragino Sans GB W3', 'Microsoft YaHei', STXihei, STHeiti, Heiti, SimSun,
sans-serif;
font-size: 100%;
}
a:link,
a:visited {
color: #333;
text-decoration: none;
}
.topbar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 150px;
z-index: 2;
}
.toppic {
max-width: 1170px;
min-width: 980px;
width: 80%;
height: 75px;
margin: 0 auto;
a {
&:link,
&:visited {
/*color: #fff;*/
color: #333;
}
}
}
.topicfixed {
position: fixed;
left: 0;
top: 0;
background: #fff;
border-bottom: 1px solid #dcdcdc;
a {
&:link,
&:visited {
color: #333;
}
}
}
.international .topicfixed .toppic a {
&:link,
&:visited {
color: #333;
}
}
.topside {
float: left;
width: 59%;
}
.logoLink {
float: left;
display: block;
width: 31px;
height: 0px;
overflow: hidden;
padding-top: 76px;
font-size: 0;
background-color: transparent;
background-repeat: no-repeat;
background-image: url('/static/img/youyou.png');
background-position: 0 50%;
background-size: 31px 46px;
}
.topNav {
float: left;
width: 450px;
li {
float: left;
margin-left: 20px;
a {
float: left;
padding: 0 20px;
line-height: 75px;
font-size: 1.125em;
&:hover {
color: #3f92ff;
}
}
&.current a {
color: #3f92ff;
font-weight: 600;
}
}
}
.topicfixed {
height: 75px;
}
</style>

74
vueTem/src/views/editor/mapEditor.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<div id="GameDiv" class="studentSize">
<canvas id="GameCanvas"></canvas>
</div>
</template>
<script>
import GAME_INIT from '../../../static/cocos-loader/creator-load'
import { GAME2WEB_EVENTTYPE, E2G_EVENTTYPE } from '../../const/event'
import { mapState, mapMutations } from 'vuex'
import web2game from './web2game'
export default {
data() {
return {
ratio: 1.2,
STUDENT_SIZE: {
width: 960,
height: 640,
},
TEACHER_SIZE: {
width: 1012,
height: 455,
},
}
},
created() {
setTimeout(() => {
this.init()
}, 200)
},
computed: {
...mapState('CCGameLoaded', ['isloaded']),
},
methods: {
init() {
GAME_INIT(() => {
web2game.loadScene('helloworld1').then((scenename) => {
console.log(123)
web2game.updateResolution(this.STUDENT_SIZE, this.ratio)
this.$emit('sceneLoaded') // 发给父组件初始化完毕，这时去掉遮罩
})
})
},
...mapMutations('CCGameLoaded', ['SET_CCGAME_LOADED']),
},
}
</script>
<style lang='scss'>
#GameDiv {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// &.teacherSize {
// width: 1012px;
// height: 455px;
// }
&.studentSize {
width: 960;
height: 640px;
}
}
#GameCanvas {
display: block;
touch-action: none;
user-select: none;
cursor: default;
border-radius: 5px;
}
canvas:focus {
outline: none;
}
</style>

336
vueTem/src/views/editor/rightPanel.vue Normal file
View File

@@ -0,0 +1,336 @@
<template>
<div id="PropertyView" style="right: 0; top: 0">
<h1 id="PropertyViewHeader" class="f--hlc" style="cursor: default">
<div class="property-header f--hlc">
<div>画布</div>
</div>
</h1>
<div
class=""
id="PropertyViewBody"
style="max-height: calc(100% - 30px); overflow-y: scroll"
v-show="!foldMenuStatus"
>
<div class="property-fields">
<form class="ant-form ant-form-horizontal form_display">
<am-input
@change="changeX4Game"
v-model="x"
label="X轴位移"
icon="px"
:full="false"
min="-9999"
/>
<am-input
@change="changeY4Game"
v-model="y"
label="Y轴位移"
icon="px"
:full="false"
min="-9999"
/>
<am-input
@change="changeAngle4Game"
v-model="angle"
icon="degree"
:full="false"
min="-360"
>
<template slot="label">
<div class="rotation" title="旋转"></div>
</template>
</am-input>
<am-input
@change="changeScale4Game"
v-model="scale"
label="缩放"
icon="rate"
:full="false"
:step="0.1"
/>
</form>
<form class="ant-form ant-form-horizontal form_display2">
<am-input
@change="changeOpacity4Game"
v-model="opacity"
label="不透明度"
showSlider
min="0"
max="100"
icon="rate"
/>
</form>
<form
class="ant-form ant-form-horizontal form_display2"
style="padding-bottom: 20px"
>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:limit="3"
:file-list="fileList"
:on-change="uploadChange"
accept=".jpg,.jpeg,.png,.JPG,.JPEG"
v-show="showImgUploadBtn"
>
<button
type="button"
class="ant-btn ant-btn-primary"
style="margin-bottom: 10px"
>
<span>上传图片</span>
<span> </span>
</button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
</form>
</div>
</div>
<am-alert :show.sync="showAlert" v-model="alertText" type="error" />
</div>
</template>
<script>
import amInput from '../../components/BaseToolInput'
import amColorPicker from '../../components/BaseColorPicker'
import amSwitchInput from '../../components/BaseSwitchInput'
import amToolTextarea from '../../components/BaseToolTextarea'
import amAlert from '../../components/BaseAlert'
import amConfirm from '../../components/BaseConfirm'
import { GAME2WEB_EVENTTYPE, E2G_EVENTTYPE } from '../../const/event'
// import { copyFile, saveConfig } from "../../utils/tools/node-utils";
import web2game from './web2game'
export default {
data() {
return {
foldMenuStatus: false,
x: 0,
y: 0,
angle: 0,
scale: 1,
opacity: 255,
fileList: [],
savePath: '',
textCur: 'left',
desCur: 'normal',
styleCur: 'normal',
weightCur: 'normal',
colorSwitch: true,
bgSwitch: true,
showAlert: false,
alertText: '',
activeNode: null,
}
},
created() {
// this.savePath = path.join(
// path.resolve("."),
// "cocos-build/web-mobile/custom"
// );
// eventBus.on('GAMENODE_MOVED', (target) => {
// this.activeNode = target
// this.changePosition4Editor()
// })
// eventBus.on('GAMENODE_MOVEEND', (target) => {
// this.activeNode = target
// this.changePosition4Editor()
// this.changeNodeAttributeAndSave({
// x: this.x,
// y: this.y,
// })
// })
eventBus.on('WEB_MSG_TYPE.SELECT_NODE', (nodeInfo) => {
this.activeNode = nodeInfo
this.x = this.activeNode.x
this.y = this.activeNode.y
this.angle = this.activeNode.angle
this.opacity = this.activeNode.opacity
this.scale = this.activeNode.scale
console.log(nodeInfo)
this.$notify({
title: '打开控制台看console',
position: 'top-left',
message:
'可以直接获取节点信息，并且可以直接在web内进行修改（可以直接在右边的属性栏内修改节点属性），如果还能实现保存，就能实现编辑了。',
})
})
},
methods: {
changePosition4Editor() {
this.x = this.activeNode.x ? parseInt(this.activeNode.x) : 0
this.y = this.activeNode.y ? parseInt(this.activeNode.y) : 0
},
changeColor(switchStatus, color) {
console.log(switchStatus, color)
},
changeX4Game(newVal) {
this.changeNodeAttribute4Game('x', this.x)
},
changeY4Game(newVal) {
this.changeNodeAttribute4Game('y', this.y)
},
changeScale4Game(newVal) {
this.changeNodeAttribute4Game('scale', this.scale)
},
changeAngle4Game(newVal) {
console.log(this.angle)
this.changeNodeAttribute4Game('angle', this.angle)
},
changeOpacity4Game(newVal) {
this.changeNodeAttribute4Game('opacity', Math.ceil(this.opacity * 2.55))
},
changeNodeAttribute4Game(attribute, value) {
if (typeof attribute == 'object') {
for (let key in attribute) {
web2game.setNodeAttribute({
node: this.activeNode,
key,
value: attribute[key],
})
}
} else {
web2game.setNodeAttribute({
node: this.activeNode,
attribute,
value,
})
}
},
changeNodeAttributeAndSave(attribute, value) {
this.changeNodeAttribute4Game(attribute, value)
// const gamesConfig = window.cocosGames;
// const gameData = gamesConfig[1];
// console.log(gamesConfig);
// if (!gamesConfig[1].editorConfig) {
// gamesConfig[1].editorConfig = {};
// }
// if (gamesConfig[1].editorConfig[this.activeNode.increaseId]) {
// if (typeof attribute == "object") {
// for (let key in attribute) {
// gamesConfig[1].editorConfig[this.activeNode.increaseId][key] =
// attribute[key];
// }
// } else {
// gamesConfig[1].editorConfig[this.activeNode.increaseId][
// attribute
// ] = value;
// }
// } else {
// gamesConfig[1].editorConfig[this.activeNode.increaseId] = {};
// for (let key in attribute) {
// gamesConfig[1].editorConfig[this.activeNode.increaseId][key] =
// attribute[key];
// }
// }
// console.log(4444);
// saveConfig("window.cocosGames = " + JSON.stringify(gamesConfig));
},
isImage(fileName) {
if (typeof fileName !== 'string') return
let name = fileName.toLowerCase()
return (
name.endsWith('.png') ||
name.endsWith('.jpeg') ||
name.endsWith('.jpg') ||
name.endsWith('.png') ||
name.endsWith('.bmp')
)
},
// 方法判断
uploadChange(file, fileList) {
if (!this.activeNode) return
// 拿到当前上传图片的name，判断其后缀名是否符合
let type = this.isImage(file.name)
console.log(type)
this.fileList = fileList
let fileLength = this.fileList.length
if (!type) {
// 若不符合图片类型，则让当前上传的文件去除掉即可，即从上传对列删除本次上传
this.fileList.splice(fileLength - 1, 1)
this.$message.error('只允许上传图片')
return
}
this.onUploadSuccess(file, fileList)
},
onUploadSuccess(file, fileList) {
console.log(file, fileList)
var reader = new FileReader()
reader.readAsDataURL(file.raw)
reader.onload = () => {
console.log(reader.result) //获取到base64格式图片
const img = new Image()
img.src = reader.result
let tex = new cc.Texture2D()
tex.initWithElement(img)
tex.handleLoadedTexture()
this.activeNode.getComponent(
cc.Sprite
).spriteFrame = new cc.SpriteFrame(tex)
// const sp = new SpriteFrame()
// sp.texture = tex
// self.sp.spriteFrame = sp
}
// cc.loader.load(img, (err, texture) => {
// if (err) return
// this.activeNode.getComponent(
// cc.Sprite
// ).spriteFrame = new cc.SpriteFrame(texture)
// })
// const filePath = file.raw.path;
// const imageType = file.raw.type;
// const name = Date.now();
// const type = imageType.split("/")[1];
// copyFile(filePath, this.savePath, name + "." + type, () => {
// cc.log("进入回调");
// cc.log(this.savePath + "/" + name + "." + type);
// if (this.activeNode) {
// web2game.LOAD_CUSTOMIMG(name + "." + type, (err, texture) => {
// cc.log("加载成功");
// var spriteFrame = new cc.SpriteFrame(texture);
// this.activeNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
// const gamesConfig = window.cocosGames;
// const gameData = gamesConfig[1];
// console.log(name + "." + type);
// if (!gamesConfig[1].editorConfig) {
// gamesConfig[1].editorConfig = {};
// }
// if (gamesConfig[1].editorConfig[this.activeNode.increaseId]) {
// gamesConfig[1].editorConfig[this.activeNode.increaseId].sprite =
// name + "." + type;
// } else {
// gamesConfig[1].editorConfig[this.activeNode.increaseId] = {};
// gamesConfig[1].editorConfig[this.activeNode.increaseId].sprite =
// name + "." + type;
// }
// saveConfig("window.cocosGames = " + JSON.stringify(gamesConfig));
// });
// }
// });
// fs.copyFile(filePath, this.savePath, (err)=>{
// console.log(123)
// });
},
},
computed: {
showImgUploadBtn() {
return this.activeNode && this.activeNode.getComponent(cc.Sprite)
},
},
components: {
amInput,
amColorPicker,
amSwitchInput,
amToolTextarea,
amAlert,
amConfirm,
},
}
</script>
<style lang="scss" scoped>
</style>

96
vueTem/src/views/editor/web2game.js Normal file
View File

@@ -0,0 +1,96 @@
/* eslint-disable no-undef */
/* eslint-disable space-before-function-paren */
class Web2Game {
/**
* 根据页码切换课件
*
* @param {string} sceneName
* @param {Function} callback
* @memberof Web2Game
*/
changeGameByPageIndex(pageIndex, callback) {
cc.web2cocosSDK.changeGameByPageIndex(pageIndex, callback)
}
/**
* 加载场景
*
* @param {string} sceneName
* @param {Function} callback
* @memberof Web2Game
*/
loadScene(sceneName, callback) {
return cc.web2cocosSDK.loadScene(sceneName, callback)
}
/**
* 加载游戏的预制体
*
* @param {string} sceneName
* @param {Function} callback
* @memberof Web2Game
*/
loadGame(gameName, callback) {
cc.web2cocosSDK.loadGame(gameName, callback)
}
/**
* 卸载游戏
*
* @param {string} sceneName
* @param {Function} callback
* @memberof Web2Game
*/
unloadGame() {
cc.web2cocosSDK.unloadGame()
}
/**
* 加载图片 --electron内使用
*
* @param {string} sceneName
* @param {Function} callback
* @memberof Web2Game
*/
loadCustomImage(imageName, callback) {
cc.web2cocosSDK.loadCustomImage(imageName, callback)
}
/**
* 重置game分辨率
*
* @param {cc.Vec2} editorSize {width:2048,height:1152}
* @param {number} ratio 缩放的倍率
* @param {Function} callFunc
*/
updateResolution(editorSize, ratio, callback) {
cc.web2cocosSDK.updateResolution(editorSize, ratio, callback)
}
/**
* 设置节点属性
*
* @param {string} sceneName
* @param {Function} callback
* @memberof Web2Game
*/
setNodeAttribute({ node, attribute, value }) {
cc.web2cocosSDK.setNodeAttribute({ node, attribute, value })
}
/**
* 触发cocos内的事件系统
*
* @param {*} eventName
* @param {*} params
*/
emit(eventName, params) {
cc.web2cocosSDK.emitGameEvt(eventName, params)
}
static getInstance() {
let instance
return function() {
if (!instance) {
instance = new Web2Game()
}
return instance
}
}
}
const web2game = new Web2Game()
export default web2game

150
vueTem/src/views/header/TheHeader.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div class="topbar topicfixed">
<div class="toppic">
<div class="topside">
<a href="##" class="logoLink">im.qq.com</a>
<ul id="topNav" class="topNav">
<li>
<a href="/">首页</a>
</li>
<li v-for='item in routerData' :key='item.path' active-class='current'>
<router-link :to="item.path">
{{item.name}}
</router-link>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
routerData: [
// {
// name: '首页',
// path: '/index'
// },
]
}
},
created() {},
methods: {}
}
</script>
<style scoped lang = scss>
div {
margin: 0;
padding: 0;
font-family: Helvetica, Tahoma, Arial, 'Hiragino Sans GB',
'Hiragino Sans GB W3', 'Microsoft YaHei', STXihei, STHeiti, Heiti, SimSun,
sans-serif;
font-size: 100%;
}
a:link,
a:visited {
color: #333;
text-decoration: none;
}
.topbar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 150px;
z-index: 2;
}
.toppic {
max-width: 1170px;
min-width: 980px;
width: 80%;
height: 75px;
margin: 0 auto;
a {
&:link,
&:visited {
/*color: #fff;*/
color: #333;
}
}
}
.topicfixed {
position: fixed;
left: 0;
top: 0;
background: #fff;
border-bottom: 1px solid #dcdcdc;
a {
&:link,
&:visited {
color: #333;
}
}
}
.international .topicfixed .toppic a {
&:link,
&:visited {
color: #333;
}
}
.topside {
float: left;
width: 59%;
}
.logoLink {
float: left;
display: block;
width: 46px;
height: 46px;
overflow: hidden;
margin-top: 13px;
font-size: 0;
background-color: transparent;
background-repeat: no-repeat;
background-image: url('/static/img/head.jpg');
background-position: 0 50%;
background-size: 46px 46px;
border-radius: 50%;
}
.topNav {
float: left;
width: 450px;
li {
float: left;
margin-left: 20px;
a {
float: left;
padding: 0 20px;
line-height: 75px;
font-size: 1.125em;
&:hover {
color: #3f92ff;
}
}
&.current a {
color: #3f92ff;
font-weight: 600;
}
}
}
.topicfixed {
height: 75px;
}
</style>