Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
YM2-30
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
YM2-30
Commits
031ae811
Commit
031ae811
authored
Jun 28, 2020
by
范雪寒
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 基础功能
parent
1b53952f
Changes
12
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
2018 additions
and
56 deletions
+2018
-56
Unit.ts
src/app/common/preview-edit-mode/Unit.ts
+1676
-0
preview-edit-mode.component.html
...common/preview-edit-mode/preview-edit-mode.component.html
+4
-0
preview-edit-mode.component.scss
...common/preview-edit-mode/preview-edit-mode.component.scss
+21
-0
preview-edit-mode.component.ts
...p/common/preview-edit-mode/preview-edit-mode.component.ts
+37
-0
form.component.css
src/app/form/form.component.css
+12
-0
form.component.html
src/app/form/form.component.html
+65
-6
form.component.ts
src/app/form/form.component.ts
+59
-7
DefaultData.ts
src/app/play/game/DefaultData.ts
+24
-12
Game.ts
src/app/play/game/Game.ts
+1
-0
MyGame.ts
src/app/play/game/MyGame.ts
+111
-24
resources.js
src/app/play/resources.js
+8
-7
Img_bg2.png
src/assets/play/Img_bg2.png
+0
-0
No files found.
src/app/common/preview-edit-mode/Unit.ts
0 → 100644
View file @
031ae811
This diff is collapsed.
Click to expand it.
src/app/common/preview-edit-mode/preview-edit-mode.component.html
0 → 100644
View file @
031ae811
<!--
<div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
</div> -->
\ No newline at end of file
src/app/common/preview-edit-mode/preview-edit-mode.component.scss
0 → 100644
View file @
031ae811
.preview-box
{
margin
:
auto
;
width
:
95%
;
height
:
35vw
;
border
:
2px
dashed
#ddd
;
border-radius
:
0
.5rem
;
background-color
:
#fafafa
;
text-align
:
center
;
color
:
#aaa
;
.preview-img
{
height
:
100%
;
width
:
auto
;
}
}
src/app/common/preview-edit-mode/preview-edit-mode.component.ts
0 → 100644
View file @
031ae811
import
{
Component
,
ElementRef
,
EventEmitter
,
HostListener
,
Input
,
OnChanges
,
OnDestroy
,
OnInit
,
Output
,
ViewChild
}
from
'
@angular/core
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
{
getMinScale
}
from
"
../../play/Unit
"
;
import
{
tar
}
from
"
compressing
"
;
@
Component
({
selector
:
'
app-preview-edit-mode
'
,
templateUrl
:
'
./preview-edit-mode.component.html
'
,
styleUrls
:
[
'
./preview-edit-mode.component.scss
'
]
})
export
class
PreviewEditModeComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
ngOnInit
()
{
}
ngOnDestroy
()
{
}
ngOnChanges
()
{
}
}
src/app/form/form.component.css
View file @
031ae811
...
...
@@ -6,3 +6,15 @@
height
:
100%
;
}
.border
{
border-radius
:
20px
;
border-style
:
dashed
;
padding
:
20px
;
margin
:
20px
;
/*width: 500px; */
/*//border-radius: 20px;*/
/*//border-width: 2px;*/
/*//border-color: #000000;*/
}
\ No newline at end of file
src/app/form/form.component.html
View file @
031ae811
<div
class=
"model-content"
>
<div
class=
"border"
style=
"width: 650px; height: 190px;"
>
<span
style=
"float: left; height: 30px; font-size: 18px;"
>
标题字母:
</span>
<input
type=
"text"
style=
"width: 50px;"
nz-input
[(
ngModel
)]="
item
.
tittle
.
word
"
(
blur
)="
save
()"
>
<br>
<br>
<span
style=
"float: left; height: 30px; font-size: 18px;"
>
标题:
</span>
<input
type=
"text"
style=
"width: 550px;"
nz-input
[(
ngModel
)]="
item
.
tittle
.
text
"
(
blur
)="
save
()"
>
<br>
<br>
<span
style=
"float: left; height: 30px; font-size: 18px;"
>
标题音频:
</span>
<app-audio-recorder
[
audioUrl
]="
item
.
tittle
.
audio
"
(
audioUploaded
)="
onTittleAudioUploadSuccess
($
event
,
'
audio_url
')"
></app-audio-recorder>
</div>
<div
*
ngFor=
"let it of item.carrots; let i = index"
style=
"float: left; width: 350px;"
>
<div
class=
"border"
style=
"width: 300px; float: left;"
>
<span
style=
"float: left; height: 30px; font-size: 18px;"
>
胡萝卜:
</span>
<br><br>
<app-upload-image-with-preview
[
picUrl
]="
it
.
carrotImg
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
carrot
',
i
)"
></app-upload-image-with-preview>
<br><br>
<span
style=
"float: left; height: 30px; font-size: 18px;"
>
坑:
</span>
<br><br>
<app-upload-image-with-preview
[
picUrl
]="
it
.
holeImg
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
hole
',
i
)"
></app-upload-image-with-preview>
<div
*
ngIf=
"(item.carrots.length > 5)"
>
<div
style=
"float: none; padding-top: 30px;"
>
<button
style=
"width: 100%; height: 45px; float: none;"
nz-button
nzType=
"dashed"
class=
"add-btn"
(
click
)="
deleteCarrot
(
i
)"
>
删除
</button>
</div>
</div>
<div
style=
"clear:both; height:0; font-size:1px; line-height:0px;"
></div>
</div>
</div>
<div
*
ngIf=
"(item.carrots.length < 8)"
>
<div
style=
"width: 300px; float: left; height: 280px; padding: 20px;"
nz-col
nzSpan=
"8"
class=
"add-btn-box"
>
<button
style=
" margin: auto; width: 100%; height: 100%;"
nz-button
nzType=
"dashed"
class=
"add-btn"
(
click
)="
addCarrot
()"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
Add
</button>
</div>
</div>
<div
style=
"clear:both; height:0; font-size:1px; line-height:0px;"
></div>
<div
style=
"float: left; width: 100%"
>
<app-custom-hot-zone
[
bgItem
]="{}"
[
isHasRect
]="
false
"
[
isHasText
]="
false
"
[
item
]="
item
"
[
hotZoneItemArr
]="
item
.
targets
"
[
refreshCaller
]="
caller
"
(
save
)="
saveData
($
event
)"
>
</app-custom-hot-zone>
<!-- <app-preview
></app-preview> -->
</div>
<app-custom-hot-zone
[
bgItem
]="
item
.
bgItem
"
[
hotZoneItemArr
]="
item
.
hotZoneItemArr
"
(
save
)="
saveData
($
event
)"
>
</app-custom-hot-zone>
<!--
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
...
...
src/app/form/form.component.ts
View file @
031ae811
...
...
@@ -10,21 +10,57 @@ import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, A
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
// 储存数据用
saveKey
=
"
test_0011
"
;
saveKey
=
'
ym-2-30
'
;
// 储存对象
item
;
caller
:
any
=
{};
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
}
deleteCarrot
(
idx
)
{
this
.
item
.
carrots
.
splice
(
idx
,
1
);
this
.
refreshBackground
();
this
.
save
();
}
addCarrot
()
{
this
.
item
.
carrots
.
push
({
carrotImg
:
''
,
holeImg
:
''
,
});
this
.
refreshBackground
();
this
.
save
();
}
ngOnInit
()
{
this
.
item
=
{
bgItem
:
''
,
hotZoneItemArr
:
[]
tittle
:
{
word
:
""
,
text
:
""
,
audio
:
""
},
carrots
:
[{
carrotImg
:
''
,
holeImg
:
''
,
},
{
carrotImg
:
''
,
holeImg
:
''
,
},
{
carrotImg
:
''
,
holeImg
:
''
,
},
{
carrotImg
:
''
,
holeImg
:
''
,
},
{
carrotImg
:
''
,
holeImg
:
''
,
}],
targets
:
[]
};
// 获取存储的数据
...
...
@@ -56,14 +92,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
refreshBackground
()
{
this
.
caller
.
refreshBackground
();
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
onImageUploadSuccess
(
e
,
key
,
idx
)
{
// this.item[key] = e.url;
this
.
item
.
carrots
[
idx
][
key
+
'
Img
'
]
=
e
.
url
;
this
.
refreshBackground
();
this
.
save
();
}
...
...
@@ -78,6 +119,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
saveData
(
e
)
{
this
.
item
.
targets
=
[];
e
.
hotZoneItemArr
.
forEach
((
target
)
=>
{
console
.
log
(
'
target.rect =
'
+
JSON
.
stringify
(
target
.
rect
));
this
.
item
.
targets
.
push
(
target
);
});
this
.
save
();
}
// 标题音频
onTittleAudioUploadSuccess
(
e
,
key
)
{
this
.
item
.
tittle
.
audio
=
e
.
url
;
this
.
save
();
}
...
...
src/app/play/game/DefaultData.ts
View file @
031ae811
...
...
@@ -7,17 +7,29 @@ export let defaultData = {
},
carrots
:
[{
carrotImg
:
''
,
holeImg
:
''
,
carrotImg
:
'
carrot
'
,
holeImg
:
'
hole
'
,
},
{
carrotImg
:
'
carrot
'
,
holeImg
:
'
hole
'
,
},
{
carrotImg
:
'
carrot
'
,
holeImg
:
'
hole
'
,
},
{
carrotImg
:
'
carrot
'
,
holeImg
:
'
hole
'
,
},
{
carrotImg
:
'
carrot
'
,
holeImg
:
'
hole
'
,
},
{
carrotImg
:
'
carrot
'
,
holeImg
:
'
hole
'
,
},
{
carrotImg
:
'
carrot
'
,
holeImg
:
'
hole
'
,
},
{
carrotImg
:
'
carrot
'
,
holeImg
:
'
hole
'
,
}],
targets
:
[{
img
:
''
,
x
:
0
,
y
:
0
,
width
:
1
,
height
:
1
,
scaleX
:
1
,
scaleY
:
1
,
audio
:
''
}]
targets
:
[]
};
\ No newline at end of file
src/app/play/game/Game.ts
View file @
031ae811
...
...
@@ -111,6 +111,7 @@ export class Game {
typeof
(
this
.
_currentTouchSprite
.
_onTouchEndListener
)
==
'
function
'
)
{
this
.
_currentTouchSprite
.
_onTouchEndListener
(
pos
);
}
this
.
_currentTouchSprite
=
null
;
}
}
...
...
src/app/play/game/MyGame.ts
View file @
031ae811
...
...
@@ -48,9 +48,14 @@ export class MyGame extends Game {
let
imgUrlList
=
[];
let
audioUrlList
=
[];
// this.data.audios.forEach((cube) => {
// audioUrlList.push(cube);
// });
this
.
data
.
carrots
.
forEach
((
carrot
)
=>
{
imgUrlList
.
push
(
carrot
.
carrotImg
);
imgUrlList
.
push
(
carrot
.
holeImg
);
});
this
.
data
.
targets
.
forEach
((
target
)
=>
{
imgUrlList
.
push
(
target
.
pic_url
);
});
// audioUrlList.push(this.data.wholeAuido);
// audioUrlList.push(this.data.tittle.audio);
...
...
@@ -85,25 +90,35 @@ export class MyGame extends Game {
initBg
()
{
this
.
removeChild
(
this
.
getChildByName
(
'
bg
'
));
this
.
getFullScaleXY
();
let
screenSize
=
this
.
getScreenSize
();
let
defaultSize
=
this
.
getDefaultScreenSize
();
let
bgSized
=
new
TouchSprite
();
bgSized
.
init
(
this
.
images
.
get
(
'
Img_bg
'
));
bgSized
.
anchorX
=
0.5
;
bgSized
.
anchorY
=
1
;
bgSized
.
setPosition
(
this
.
_parent
.
canvasWidth
/
2
,
this
.
_parent
.
canvasHeight
);
bgSized
.
setScaleXY
(
this
.
getFullScaleXY
());
this
.
addChild
(
bgSized
);
let
bgSized1
=
new
TouchSprite
();
bgSized1
.
init
(
this
.
images
.
get
(
'
Img_bg
'
));
bgSized1
.
anchorX
=
0.5
;
bgSized1
.
anchorY
=
1
;
bgSized1
.
setPosition
(
screenSize
.
width
/
2
,
screenSize
.
height
);
bgSized1
.
setScaleXY
(
this
.
getFullScaleXY
());
this
.
addChild
(
bgSized1
);
let
bgSized2
=
new
TouchSprite
();
bgSized2
.
init
(
this
.
images
.
get
(
'
Img_bg_ground
'
));
bgSized2
.
anchorX
=
0.5
;
bgSized2
.
anchorY
=
1
;
bgSized2
.
setPosition
(
screenSize
.
width
/
2
,
screenSize
.
height
);
bgSized2
.
scaleX
=
screenSize
.
width
/
defaultSize
.
width
;
bgSized2
.
scaleY
=
screenSize
.
height
/
defaultSize
.
height
;
this
.
addChild
(
bgSized2
);
// 背景
let
bg
=
new
TouchSprite
();
bg
.
init
(
this
.
images
.
get
(
'
Img_bg
'
))
bg
.
setPosition
(
this
.
_parent
.
canvasWidth
/
2
,
this
.
_parent
.
canvasHeight
/
2
);
bg
.
init
(
this
.
images
.
get
(
'
Img_bg2
'
))
bg
.
setScaleXY
(
this
.
_parent
.
mapScale
);
bg
.
alpha
=
0.5
;
bg
.
alpha
=
0
;
bg
.
anchorX
=
0.5
;
bg
.
anchorY
=
1
;
bg
.
setPosition
(
screenSize
.
width
/
2
,
screenSize
.
height
);
bg
.
setName
(
'
bg
'
);
this
.
addChild
(
bg
);
...
...
@@ -112,7 +127,7 @@ export class MyGame extends Game {
const
bgRect
=
new
ShapeRect
();
bgRect
.
setSize
(
57
,
65
);
bgRect
.
fillColor
=
'
#f8c224
'
;
const
sx
=
this
.
_parent
.
canvasW
idth
/
this
.
_parent
.
canvasBaseW
;
const
sx
=
screenSize
.
w
idth
/
this
.
_parent
.
canvasBaseW
;
bgRect
.
setScaleXY
(
sx
);
bgRect
.
x
=
65
*
sx
;
bgRect
.
alpha
=
0
;
...
...
@@ -165,14 +180,86 @@ export class MyGame extends Game {
}
initMiddle
()
{
// // 创建背景
// this.createMiddlebg();
// // 创建单词
// this.createWords();
// // 创建右下角的喇叭
// this.createSpeaker();
// // 创建窗口
// this.createWindow();
// 创建洞
this
.
createHoles
();
// 创建胡萝卜
this
.
createCarrots
();
// 创建可选的单词
this
.
createWords
();
}
createCarrots
()
{
let
screenSize
=
this
.
getScreenSize
();
let
defaultSize
=
this
.
getDefaultScreenSize
();
const
length
=
this
.
data
.
carrots
.
length
;
this
.
data
.
carrots
.
forEach
((
carrot
,
idx
)
=>
{
let
carrotSp
=
new
TouchSprite
();
carrotSp
.
init
(
this
.
images
.
get
(
carrot
.
carrotImg
));
carrotSp
.
setPositionX
(
this
.
bg
.
width
/
length
*
(
idx
-
(
length
-
1
)
/
2
));
carrotSp
.
setPositionY
(
-
550
*
(
screenSize
.
height
/
defaultSize
.
height
)
/
this
.
_parent
.
mapScale
);
this
.
bg
.
addChild
(
carrotSp
);
});
}
createHoles
()
{
let
screenSize
=
this
.
getScreenSize
();
let
defaultSize
=
this
.
getDefaultScreenSize
();
const
length
=
this
.
data
.
carrots
.
length
;
this
.
data
.
carrots
.
forEach
((
carrot
,
idx
)
=>
{
let
hole
=
new
TouchSprite
();
hole
.
init
(
this
.
images
.
get
(
carrot
.
holeImg
));
hole
.
anchorX
=
0.5
;
hole
.
anchorY
=
0
;
hole
.
setPositionX
(
this
.
bg
.
width
/
length
*
(
idx
-
(
length
-
1
)
/
2
));
hole
.
setPositionY
(
-
520
*
(
screenSize
.
height
/
defaultSize
.
height
)
/
this
.
_parent
.
mapScale
);
this
.
bg
.
addChild
(
hole
);
});
}
createWords
()
{
let
screenSize
=
this
.
getScreenSize
();
let
defaultSize
=
this
.
getDefaultScreenSize
();
const
length
=
this
.
data
.
carrots
.
length
;
this
.
data
.
targets
.
forEach
((
targetData
,
idx
)
=>
{
console
.
log
(
'
targetData.rect =
'
+
JSON
.
stringify
(
targetData
.
rect
));
let
targetSp
=
new
TouchSprite
();
targetSp
.
init
(
this
.
images
.
get
(
targetData
.
pic_url
));
targetSp
.
setPositionX
(
targetData
.
x
);
// 一通复杂的计算之后得到一个实际的Y坐标
targetSp
.
setPositionY
((
targetData
.
y
-
defaultSize
.
height
/
2
)
*
(
screenSize
.
height
/
defaultSize
.
height
)
/
this
.
_parent
.
mapScale
);
targetSp
.
addTouchBeganListener
(({
x
,
y
})
=>
{
this
.
onTargetSpTouchBengan
({
x
,
y
},
targetSp
,
idx
);
});
targetSp
.
addTouchMoveListener
(({
x
,
y
})
=>
{
this
.
onTargetSpTouchMoved
({
x
,
y
},
targetSp
,
idx
);
});
this
.
bg
.
addChild
(
targetSp
);
});
}
editMode
=
true
;
onTargetSpTouchBengan
({
x
,
y
},
targetSp
,
idx
)
{
targetSp
.
set
(
'
touchStartPos
'
,
{
x
,
y
});
targetSp
.
set
(
'
startPos
'
,
{
x
:
targetSp
.
x
,
y
:
targetSp
.
y
});
}
onTargetSpTouchMoved
({
x
,
y
},
targetSp
,
idx
)
{
if
(
this
.
editMode
)
{
let
screenSize
=
this
.
getScreenSize
();
let
defaultSize
=
this
.
getDefaultScreenSize
();
let
spritePosX
=
targetSp
.
get
(
'
startPos
'
).
x
+
(
x
-
targetSp
.
get
(
'
touchStartPos
'
).
x
)
/
this
.
_parent
.
mapScale
;
let
spritePosY
=
targetSp
.
get
(
'
startPos
'
).
y
+
(
y
-
targetSp
.
get
(
'
touchStartPos
'
).
y
)
/
this
.
_parent
.
mapScale
;
targetSp
.
setPositionX
(
spritePosX
);
targetSp
.
setPositionY
(
spritePosY
);
this
.
data
.
targets
[
idx
].
x
=
spritePosX
;
// 一通复杂的计算之后得到一个不随分辨率改变的虚拟Y坐标
this
.
data
.
targets
[
idx
].
y
=
spritePosY
*
this
.
_parent
.
mapScale
/
(
screenSize
.
height
/
defaultSize
.
height
)
+
defaultSize
.
height
/
2
;
}
}
printCurrentStatus
()
{
...
...
src/app/play/resources.js
View file @
031ae811
const
res
=
[
// ['bg', "assets/play/bg.jpg"],
[
'
btn_left
'
,
"
assets/play/btn_left.png
"
],
[
'
btn_right
'
,
"
assets/play/btn_right.png
"
],
// ['text_bg', "assets/play/text_bg.png"],
[
'
Img_bg
'
,
"
assets/play/Img_bg.png
"
],
[
'
Img_bg2
'
,
"
assets/play/Img_bg2.png
"
],
[
'
Img_bg_ground
'
,
"
assets/play/Img_bg_ground.png
"
],
[
'
Img_tittleBg
'
,
"
assets/play/Img_tittleBg.png
"
],
[
'
carrot
'
,
"
assets/play/carrot.png
"
],
[
'
hole
'
,
"
assets/play/hole.png
"
],
];
const
resAudio
=
[
[
'
click
'
,
"
assets/play/music/click.mp3
"
],
//
['click', "assets/play/music/click.mp3"],
];
...
...
src/assets/play/Img_bg2.png
0 → 100644
View file @
031ae811
17.3 KB
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment