# kaboom space invade game
<!-- Put the link to this slide here so people can follow -->
preview: https://replit.com/@dylansong/Space-Invaders-game
practice: https://replit.com/@dylansong/myspaceinvader
slide: https://hackmd.io/@o2Rs5lIMTmuv_sGNWNFaAw/rkUidGu_t
---
## constant
### fixed value use constant, changable value use let
- move speed
- invader speed
- current speed
- bullet speed
- time
---
## code
```typescript=
const MOVE_SPEED = 200
const INVADER_SPEED = 100
let CURRENT_SPEED = INVADER_SPEED
const LEVEL_DOWN = 100
const BULLET_SPEED = 400
const TIME_LEFT = 30
```
---
### display layer
- layer()
- object layer: obj
- ui layer: ui
> default layer: 'obj'
---
### code
```typescript=
layer(['obj', 'ui'], 'obj')
```
---
### initial map (space-invader and the wall)
- addLevel()
- define the shape
- define the item size
- define the item element
---
## code
```typescript=
addLevel([
'!^^^^^^^^^^^^^^ &',
'!^^^^^^^^^^^^^^ &',
'!^^^^^^^^^^^^^^ &',
'! &',
'! &',
'! &',
'! &',
'! &',
'! &',
'! &',
'! &',
'! &',
], {
width: 30,
height: 22,
'^': [sprite('space-invader'), scale(0.7), 'space-invader'],
'!': [sprite('wall'), 'left-wall'],
'&': [sprite('wall'), 'right-wall'],
})
```
---
### initial player
- add()
- sprite(),pos(),
---
### code
```typescript=
const player = add([
sprite('space-ship'),
pos(width() / 2, height() / 2),
origin('center')
])
```
---
### player behavior
- when: keyboard arrow key keydown('left' key and 'right' key)
- action: move
---
### code
```typescript
keyDown('left', () => {
player.move(-MOVE_SPEED, 0)
})
keyDown('right', () => {
player.move(MOVE_SPEED, 0)
})
```
---
### spawn bullet function(gun)
- define a function
- add()
- rect(),pos(),color(),
---
```typescript
function spawnBullet(p) {
add([rect(6, 18), pos(p), origin('center'), color(0.5, 0.5, 1), 'bullet'])
}
```
---
### how to use this gun? add a global behavior
- when: keyPress 'space' key
- action: spawnBullet
---
### code
```typescript=
keyPress('space', () => {
spawnBullet(player.pos.add(0,-25))
})
```
---
### bullet behavior
- when: every tick
- action1: move
- action2: destroy when it's position outside the border
---
### code
```typescript=
action('bullet', (b) => {
b.move(0, -BULLET_SPEED)
if(b.pos.y < 0){
destroy(b)
}
})
```
---
### bullet behavior
- when: collides with space-invader
- action1: camera shake
- action2: bullet destroy
- action3: space-invader destroy
- action4: score's value plus 1
- action5: score's text update
---
### code
```typescript=
collides('bullet', 'space-invader', (b,s) => {
camShake(4)
destroy(s)
destroy(b)
score.value++
score.text = score.value
})
```
---
### initial score
- add()
- text(),pos(),layer(),scale(),value
---
### code
```typescript=
const score = add([
text('0'),
pos(50, 50),
layer('ui'),
scale(3),
{
value: 0
}
])
```
---
### initial timer
- add()
- text(),pos(),scale(),layer(),time
---
### code
```typescript=
const timer = add([
text('0'),
pos(100,50),
scale(2),
layer('ui'),
{
time: TIME_LEFT,
},
])
```
---
### timer behavior
- when: every tick
- action1: timer's value time will decrease dt()
- action2: timer's text update
- action3: if timer's time smaller than 0,then go lose scene go('scenename')
---
### code
```typescript=
timer.action(() => {
timer.time -= dt()
timer.text = timer.time.toFixed(2)
if(timer.time <= 0){
go('lose', {score: score.value})
}
})
```
---
### space-invader behavior(move)
- when: every tick
- action: move at current speed
---
### code
```typescript=
action('space-invader', (s) => {
s.move(CURRENT_SPEED, 0)
})
```
---
### space-invader behavior(collide with wall)
- when:collide with wall
- action1: change current speed
- action2: move level down
---
### code
```typescript=
collides('space-invader', 'right-wall', () =>{
CURRENT_SPEED = -INVADER_SPEED
every('space-invader', (s) => {
s.move(0, LEVEL_DOWN)
})
})
collides('space-invader', 'left-wall', () =>{
CURRENT_SPEED = INVADER_SPEED
every('space-invader', (s) => {
s.move(0, LEVEL_DOWN)
})
})
```
---
### player behavior(overlaps with space invader)
- when: overlaps with space-invader
- action: go to lose scene
---
### code
```typescript=
player.overlaps('space-invader', () => {
go('lose', {score: score.value})
})
```
---
### space-invader behavior(touch the bootom)
- when: space-invader's y bigger than height
- action: go to lose scene
---
### code
```typescript=
action('space-invader', (s) => {
if(s.pos.y >= (12*22)){
//if(s.pos.y >= height() / 2){
go('lose', {score: score.value})
}
})
```
---
{"metaMigratedAt":"2023-06-16T14:57:52.597Z","metaMigratedFrom":"YAML","title":"kaboom space invade game","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"a3646ce6-520c-4e6b-affe-c18d58d15a03\",\"add\":7054,\"del\":2065}]"}