Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
DF-L220
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
DF-L220
Commits
a7b02fb0
Commit
a7b02fb0
authored
Mar 13, 2020
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完善
parent
d1e900d8
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
233 additions
and
197 deletions
+233
-197
play.component.ts
src/app/play/play.component.ts
+233
-197
No files found.
src/app/play/play.component.ts
View file @
a7b02fb0
...
...
@@ -7,6 +7,7 @@ import {
moveItem
,
rotateItem
,
showPopParticle
,
shake
,
ShapeRect
}
from
'
./Unit
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
...
...
@@ -83,7 +84,7 @@ export class PlayComponent implements OnInit, OnDestroy {
weapon_fire_pic
//当前练习题答案
//当前练习题答案
:[{pic:spreat,correct:'',canHit:true|false,hited:true|false,show:true|false}]
curanswers
=
[]
canTouch
=
true
;
...
...
@@ -124,8 +125,6 @@ export class PlayComponent implements OnInit, OnDestroy {
//气球显示x坐标数组[{mapx:numuber,free:false}]
ballon_mapx_arr
//下一个显示气球答案索引
nextAnswerIndex
=
0
;
@
HostListener
(
'
window:resize
'
,
[
'
$event
'
])
onResize
(
event
)
{
...
...
@@ -640,7 +639,7 @@ export class PlayComponent implements OnInit, OnDestroy {
bg_pic
.
init
(
this
.
images
.
get
(
'
bg
'
));
bg_pic
.
x
=
this
.
canvasWidth
/
2
;
bg_pic
.
y
=
this
.
canvasHeight
/
2
;
bg_pic
.
setScaleXY
(
maxW
/
bg_pic
.
width
);
bg_pic
.
setScaleXY
(
maxW
/
bg_pic
.
width
);
this
.
renderArr
.
push
(
bg_pic
);
this
.
bg_pic
=
bg_pic
;
...
...
@@ -656,7 +655,7 @@ export class PlayComponent implements OnInit, OnDestroy {
start_pic
.
init
(
this
.
images
.
get
(
'
start
'
));
start_pic
.
x
=
this
.
canvasWidth
/
2
;
start_pic
.
y
=
this
.
canvasHeight
-
start_pic
.
height
/
2
;;
start_pic
.
setScaleXY
(
maxW
/
bg_pic
.
width
);
start_pic
.
setScaleXY
(
this
.
mapScale
);
this
.
renderArr
.
push
(
start_pic
);
this
.
startPic
=
start_pic
;
...
...
@@ -677,6 +676,7 @@ export class PlayComponent implements OnInit, OnDestroy {
weapon
.
x
=
this
.
canvasWidth
/
2
;
weapon
.
y
=
this
.
canvasHeight
-
weapon
.
height
/
2
;
weapon
.
alpha
=
0
;
weapon
.
setScaleXY
(
this
.
mapScale
);
this
.
weapon_pic
=
weapon
;
this
.
renderArr
.
push
(
weapon
);
...
...
@@ -684,6 +684,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const
weapon_fire
=
new
MySprite
();
weapon_fire
.
init
(
this
.
images
.
get
(
'
weapon_fire
'
));
weapon_fire
.
alpha
=
0
;
weapon_fire
.
setScaleXY
(
this
.
mapScale
);
this
.
weapon_fire_pic
=
weapon_fire
;
...
...
@@ -699,7 +700,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const
bullet
=
new
MySprite
();
bullet
.
init
(
this
.
images
.
get
(
'
bullet
'
));
bullet
.
y
=
this
.
canvasHeight
-
this
.
weapon_pic
.
height
-
bullet
.
height
/
2
;
bullet
.
setScaleXY
(
this
.
mapScale
);
return
bullet
;
}
...
...
@@ -722,8 +723,6 @@ export class PlayComponent implements OnInit, OnDestroy {
return
;
}
//获取需要渲染的练习题
this
.
curPractice
=
this
.
data
.
practices
[
this
.
nextPracticeIndex
];
...
...
@@ -743,46 +742,41 @@ export class PlayComponent implements OnInit, OnDestroy {
}
//启动气球生产者
this
.
ballonProducer
();
//设置当前气球显示索引,最大为max_ballon个
if
(
this
.
curanswers
.
length
<
this
.
max_ballon
){
this
.
temp_max_ballon
=
this
.
curanswers
.
length
;
}
else
{
this
.
temp_max_ballon
=
this
.
max_ballon
;
}
//改变下一道练习题索引:当前练习题增加1
this
.
nextPracticeIndex
=
this
.
nextPracticeIndex
+
1
;
console
.
log
(
'
this.curanswers
'
,
this
.
curanswers
.
length
);
//渲染完成
this
.
canTouch
=
true
;
}
/**
* 获取显示坐标
* @param spreat_width
* @param interval_width
* @param row
*/
getMapX
(
spreat_width
,
interval_width
,
row
){
let
balloon_width
=
Math
.
floor
(
162
*
this
.
mapScale
)
;
let
mapx_arr
=
[]
;
let
row_width
=
this
.
temp_max_ballon
*
balloon_width
+
(
this
.
temp_max_ballon
-
1
)
*
this
.
interval_width
;
let
row_width
=
row
*
spreat_width
+
(
row
-
1
)
*
interval_width
;
//起始X坐标
let
startX
=
(
this
.
canvasWidth
-
row_width
)
/
2
+
balloon
_width
/
2
;
let
startX
=
(
this
.
canvasWidth
-
row_width
)
/
2
+
spreat
_width
/
2
;
//初始化气球x坐标
for
(
let
i
=
0
;
i
<
this
.
temp_max_ballon
;
++
i
){
this
.
ballon_mapx_arr
.
push
({
mapx
:
startX
,
free
:
true
}
);
mapx_arr
.
push
(
startX
);
startX
+=
balloon_width
+
this
.
interval_width
;
startX
+=
spreat_width
+
interval_width
;
}
console
.
log
(
'
ballon_mapx_arr
'
,
this
.
ballon_mapx_arr
);
//显示气球
this
.
showBallon
();
//启动气球生产者
this
.
ballonProducer
();
//改变下一道练习题索引:当前练习题增加1
this
.
nextPracticeIndex
=
this
.
nextPracticeIndex
+
1
;
//渲染完成
this
.
canTouch
=
true
;
return
mapx_arr
;
}
/**
...
...
@@ -793,109 +787,118 @@ export class PlayComponent implements OnInit, OnDestroy {
if
(
this
.
practiceEnd
){
return
;
}
//如果到最后一个,则重新开始
if
(
this
.
nextAnswerIndex
==
this
.
curanswers
.
length
){
console
.
log
(
'
nextAnswerIndex reset
'
);
this
.
nextAnswerIndex
=
0
;
}
if
(
this
.
ballon_temp_arr
.
length
<
this
.
temp_max_ballon
){
//答案
const
answer
=
this
.
curanswers
[
this
.
nextAnswerIndex
];
//下一个气球索引加1
this
.
nextAnswerIndex
=
this
.
nextAnswerIndex
+
1
;
//如果气球全部退出屏幕,则重新显示
if
(
this
.
checkAllOut
()){
//重置气球临时数组
this
.
ballon_temp_arr
=
[];
//如果气球未被击中,且未显示,则显示
if
(
!
answer
.
hited
&&
!
answer
.
show
){
this
.
ballon_temp_arr
.
push
(
answer
);
//设置当前气球显示索引,最大为max_ballon个
if
(
this
.
curanswers
.
length
<
this
.
max_ballon
){
this
.
temp_max_ballon
=
this
.
curanswers
.
length
;
}
else
{
this
.
temp_max_ballon
=
this
.
max_ballon
;
}
}
let
balloon_width
=
Math
.
floor
(
162
*
this
.
mapScale
)
;
this
.
ballon_mapx_arr
=
this
.
getMapX
(
balloon_width
,
this
.
interval_width
,
this
.
temp_max_ballon
);
//取出气球显示
for
(
let
i
=
0
;
i
<
this
.
temp_max_ballon
;
++
i
){
let
answer
=
this
.
getShowAnswer
(
this
.
ballon_temp_arr
);
if
(
answer
){
//取出坐标
answer
.
pic
.
x
=
this
.
ballon_mapx_arr
[
i
];
this
.
ballon_temp_arr
.
push
(
answer
);
//显示气球
this
.
ballonRose
(
answer
);
}
}
}
setTimeout
(()
=>
{
this
.
ballonProducer
();
},
100
);
}
temp_mapx_modify
=
true
;
/**
*
显示气球
*
检查已显示的气球是否全部移除屏幕
*/
showBallon
(
once
:
boolean
=
null
){
checkAllOut
(
){
//练习结束
if
(
this
.
practiceEnd
){
return
;
}
let
check
=
true
;
if
(
this
.
ballon_temp_arr
){
if
(
this
.
temp_mapx_modify
){
for
(
let
i
=
0
;
i
<
this
.
ballon_temp_arr
.
length
;
++
i
){
//置成不可修改
this
.
temp_mapx_modify
=
false
;
let
answer
=
this
.
ballon_temp_arr
[
i
];
let
answer
=
this
.
ballon_temp_arr
[
0
];
if
(
answer
.
show
){
check
=
false
;
break
;
}
}
}
//如果存在,则气球上升
if
(
answer
){
return
check
;
}
let
free_mapx
=
-
1
;
//获取可用坐标
for
(
let
i
=
0
;
i
<
this
.
ballon_mapx_arr
.
length
;
++
i
){
let
ballon_mapx
=
this
.
ballon_mapx_arr
[
i
];
//如果空闲,则取出坐标
if
(
ballon_mapx
.
free
){
ballon_mapx
.
free
=
false
;
free_mapx
=
ballon_mapx
.
mapx
;
break
;
}
}
if
(
free_mapx
!=
-
1
){
getShowAnswer
(
showArr
){
answer
.
pic
.
x
=
free_mapx
;
while
(
true
){
console
.
log
(
this
.
ballon_temp_arr
.
indexOf
(
answer
));
removeItemFromArr
(
this
.
ballon_temp_arr
,
answer
);
this
.
ballonRose
(
answer
);
}
}
let
answer
=
this
.
getRandomItemFromArr
(
this
.
curanswers
);
//置成可修改
this
.
temp_mapx_modify
=
true
;
if
(
!
answer
){
return
;
}
let
index
=
showArr
.
indexOf
(
answer
);
//没有重复的,则返回
if
(
index
==
-
1
){
return
answer
;
}
}
}
if
(
!
once
){
//循环显示气球
setTimeout
(()
=>
{
this
.
showBallon
();
},
10
);
getRandomItemFromArr
(
arr
){
if
(
!
arr
){
return
;
}
let
length
=
arr
.
length
;
let
index
=
Math
.
ceil
(
Math
.
random
()
*
100000000
)
%
length
;
return
arr
[
index
];
}
/**
* 气球答案上升
* @param answer
:{pic:spreat,correct:''}
* @param answer
*/
ballonRose
(
answer
){
//设置显示高度
answer
.
pic
.
y
=
this
.
canvasHeight
+
answer
.
pic
.
height
*
this
.
mapScale
;
answer
.
pic
.
alpha
=
1
;
answer
.
pic
.
setScaleXY
(
0.3
);
answer
.
show
=
true
;
setTimeout
(()
=>
{
let
out
=
this
.
canvasHeight
-
answer
.
suspendY
;
...
...
@@ -905,7 +908,9 @@ export class PlayComponent implements OnInit, OnDestroy {
});
//从小变到大
tweenChange
(
answer
.
pic
,
{
scaleX
:
this
.
mapScale
,
scaleY
:
this
.
mapScale
},
6
);
tweenChange
(
answer
.
pic
,
{
scaleX
:
this
.
mapScale
,
scaleY
:
this
.
mapScale
},
4
,
()
=>
{
answer
.
canHit
=
true
;
});
},
20
);
}
...
...
@@ -915,6 +920,10 @@ export class PlayComponent implements OnInit, OnDestroy {
* @param answer
*/
ballonSuspension
(
answer
){
//悬浮时晃动气球
shake
(
answer
.
pic
,
this
.
suspension_time
/
1000
,
null
,
0.3
);
//悬停
setTimeout
(()
=>
{
...
...
@@ -925,50 +934,18 @@ export class PlayComponent implements OnInit, OnDestroy {
//设置未显示
answer
.
show
=
false
;
let
mapx
=
answer
.
pic
.
x
;
this
.
resetMapx
(
mapx
);
answer
.
pic
.
alpha
=
0
;
});
},
this
.
suspension_time
);
}
resetMapx
(
mapx
:
number
,
callback
=
null
){
console
.
log
(
'
reset mapx:
'
,
mapx
);
if
(
this
.
temp_mapx_modify
){
this
.
temp_mapx_modify
=
false
;
//将匹配坐标置成空闲
for
(
let
i
=
0
;
i
<
this
.
ballon_mapx_arr
.
length
;
++
i
){
if
(
mapx
==
this
.
ballon_mapx_arr
[
i
].
mapx
){
this
.
ballon_mapx_arr
[
i
].
free
=
true
;
break
;
}
}
this
.
temp_mapx_modify
=
true
;
if
(
callback
){
callback
();
}
}
else
{
setTimeout
(()
=>
{
this
.
resetMapx
(
mapx
);
},
10
);
}
}
/**
* 初始化练题渲染内容
*/
initPracticeRender
(){
this
.
nextAnswerIndex
=
0
;
//清空子弹
this
.
bulletRenderArr
=
[];
...
...
@@ -992,9 +969,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
practiceEnd
=
false
;
this
.
temp_mapx_modify
=
true
;
this
.
temp_max_ballon
=
this
.
max_ballon
;
if
(
this
.
weapon_pic
){
this
.
weapon_pic
.
x
=
this
.
canvasWidth
/
2
;
this
.
weapon_pic
.
y
=
this
.
canvasHeight
-
this
.
weapon_pic
.
height
/
2
*
this
.
mapScale
;
}
}
getAnswerPic
(
answer
){
...
...
@@ -1007,17 +988,24 @@ export class PlayComponent implements OnInit, OnDestroy {
answerPic
.
init
(
this
.
images
.
get
(
'
balloon_
'
+
id
));
answerPic
.
setScaleXY
(
0.3
);
answerPic
.
alpha
=
0
;
answerPic
.
y
=
this
.
canvasHeight
+
answerPic
.
height
*
this
.
mapScale
;
let
answer_val
=
new
Label
();
answer_val
.
text
=
answer
.
val
;
answer_val
.
textAlign
=
'
middle
'
;
answer_val
.
fontSize
=
50
;
answer_val
.
fontName
=
"
BRLNSDB
"
;
answer_val
.
fontColor
=
"
#FFFFFF
"
;
answer_val
.
refreshSize
();
this
.
setFontSize
(
answerPic
.
width
,
answer_val
);
answer_val
.
x
=
-
answer_val
.
width
/
2
;
answer_val
.
y
=
-
35
*
this
.
mapScale
;
answerPic
.
addChild
(
answer_val
);
answerPic
.
childDepandAlpha
=
true
;
...
...
@@ -1025,6 +1013,29 @@ export class PlayComponent implements OnInit, OnDestroy {
return
answerPic
;
}
setFontSize
(
parWidth
,
answer
:
Label
){
if
(
!
answer
){
return
;
}
//如果宽度超过,则缩小字体
if
(
answer
.
width
>
parWidth
+
10
){
let
fontSize
=
answer
.
fontSize
;
fontSize
=
fontSize
-
2
;
answer
.
fontSize
=
fontSize
;
answer
.
refreshSize
();
this
.
setFontSize
(
parWidth
,
answer
);
}
}
/**
* 获取悬浮Y坐标
*/
...
...
@@ -1194,6 +1205,11 @@ export class PlayComponent implements OnInit, OnDestroy {
}
//武器按下弹起,则发射子弹
if
(
this
.
checkClickTarget
(
this
.
weapon_pic
))
{
//如果未加载完成,则不发射子弹
if
(
!
this
.
checkCanShoot
()){
return
;
}
this
.
weaponTouch
=
false
;
//显示武器发射状态
this
.
weapon_fire_pic
.
x
=
this
.
weapon_pic
.
x
;
...
...
@@ -1240,7 +1256,29 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
/**
* 检查是否可以射击
*/
checkCanShoot
(){
if
(
!
this
.
ballon_temp_arr
){
return
;
}
let
canShoot
=
true
;
for
(
let
i
=
0
;
i
<
this
.
ballon_temp_arr
.
length
;
++
i
){
let
answer
=
this
.
ballon_temp_arr
[
i
];
if
(
!
answer
.
canHit
){
canShoot
=
false
;
break
;
}
}
return
canShoot
;
}
/**
* 检查是否碰撞
...
...
@@ -1256,92 +1294,90 @@ export class PlayComponent implements OnInit, OnDestroy {
let
y
=
item
.
pic
.
y
;
for
(
let
i
=
0
;
i
<
this
.
curanswers
.
length
;
++
i
){
let
answer
=
this
.
curanswers
[
i
];
for
(
let
i
=
0
;
i
<
this
.
ballon_temp_arr
.
length
;
++
i
){
let
answer
=
this
.
ballon_temp_arr
[
i
];
const
rect
=
answer
.
pic
.
getBoundingBox
();
const
rect
=
answer
.
pic
.
getBoundingBox
();
if
(
this
.
checkPointInRect
(
x
,
y
,
rect
))
{
if
(
this
.
checkPointInRect
(
x
,
y
,
rect
))
{
//气球飞出屏幕,不处理
if
(
answer
.
pic
.
y
<
0
){
break
;
}
//气球飞出屏幕,不处理
if
(
answer
.
pic
.
y
<
0
){
break
;
}
item
.
pic
.
alpha
=
0
;
item
.
pic
.
alpha
=
0
;
item
.
hit
=
true
;
item
.
hit
=
true
;
//正确答案
if
(
"
1
"
==
answer
.
correct
){
//正确答案
if
(
"
1
"
==
answer
.
correct
){
//设置答案被选中
answer
.
hited
=
true
;
//设置答案被选中
answer
.
hited
=
true
;
this
.
showParticle
(
answer
.
pic
)
;
answer
.
pic
.
scaleX
=
0
;
answer
.
pic
.
scaleY
=
0
;
answer
.
pic
.
scaleX
=
0
;
answer
.
pic
.
scaleY
=
0
;
this
.
showParticle
(
answer
.
pic
);
this
.
playAudio
(
'
right
'
);
this
.
playAudio
(
'
right
'
);
//练习题结束,播放庆祝界面
if
(
this
.
checkEndPractice
()){
//练习题结束,播放庆祝界面
if
(
this
.
checkEndPractice
()){
this
.
practiceEnd
=
true
;
this
.
practiceEnd
=
true
;
//如果当前索引与练习题相等,则为最后一道题,则播放结束画面
if
(
this
.
nextPracticeIndex
==
this
.
data
.
practices
.
length
){
this
.
playEnd
(
true
);
return
;
}
else
{
this
.
playEnd
(
false
);
}
}
else
{
setTimeout
(()
=>
{
//如果当前索引与练习题相等,则为最后一道题,则播放结束画面
if
(
this
.
nextPracticeIndex
==
this
.
data
.
practices
.
length
){
this
.
playEnd
(
true
);
return
;
}
else
{
this
.
playEnd
(
false
);
}
}
else
{
setTimeout
(()
=>
{
removeItemFromArr
(
this
.
curAnswerArr
,
answer
.
pic
);
//
removeItemFromArr(this.curAnswerArr, answer.pic);
this
.
resetMapx
(
answer
.
pic
.
x
,
()
=>
{
});
console
.
log
(
'
answer hit index
'
,
this
.
curanswers
.
indexOf
(
answer
));
},
20
);
}
//将命中的气球从当前答案中移出
removeItemFromArr
(
this
.
curanswers
,
answer
);
}
else
{
this
.
playAudio
(
'
wrong
'
);
}
break
;
},
10
);
}
}
else
{
this
.
playAudio
(
'
wrong
'
);
}
break
;
}
}
if
(
!
item
.
hit
){
if
(
!
item
.
hit
){
setTimeout
(()
=>
{
this
.
checkHit
(
item
);
},
10
);
setTimeout
(()
=>
{
this
.
checkHit
(
item
);
},
10
);
}
}
}
/**
* 命中显示小星星
* @param balloon
*/
showParticle
(
balloon
){
console
.
log
(
'
balloon.x
'
,
balloon
.
x
);
console
.
log
(
'
balloon.y
'
,
balloon
.
y
);
showPopParticle
(
this
.
images
.
get
(
'
star
'
),
{
x
:
balloon
.
x
,
y
:
balloon
.
y
}
,
this
.
bg
);
}
...
...
@@ -1383,10 +1419,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
updateArr
(
this
.
bulletRenderArr
);
this
.
updateArr
(
this
.
endPageArr
);
this
.
updateArr
(
this
.
curAnswerArr
);
this
.
updateArr
(
this
.
endPageArr
);
}
...
...
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