8 - Input
It's time to have the bird jump when we click (or tap) the screen!
Sprite methods like loop have a getInputs parameter which returns an object of what inputs are being pressed in the current frame. We want to access inputs.pointer which has information about the mouse (or touch on mobile).
When the pointer has just been pressed (which only happens for one frame) we return a different value of the birdGravity state to update gravity, thus giving our bird a jump upwards. Give it a try!
- JavaScript
- TypeScript
1import { makeSprite } from "@replay/core";
2import { Bird } from "./bird";
3
4const birdX = 0;
5
6export const Level = makeSprite({
7 init() {
8 return {
9 birdY: 10,
10 birdGravity: -12,
11 };
12 },
13
14 loop({ state, getInputs }) {
15 const inputs = getInputs();
16
17 let { birdGravity, birdY } = state;
18
19 birdGravity += 0.8;
20 birdY -= birdGravity;
21
22 if (inputs.pointer.justPressed) {
23 birdGravity = -12;
24 }
25
26 return {
27 birdGravity,
28 birdY,
29 };
30 },
31
32 render({ state }) {
33 return [
34 Bird({
35 id: "bird",
36 x: birdX,
37 y: state.birdY,
38 }),
39 ];
40 },
41});
42
1import { makeSprite } from "@replay/core";
2import { WebInputs } from "@replay/web";
3import { iOSInputs } from "@replay/swift";
4import { Bird } from "./bird";
5
6const birdX = 0;
7
8type LevelState = {
9 birdY: number;
10 birdGravity: number;
11};
12
13export const Level = makeSprite<{}, LevelState, WebInputs | iOSInputs>({
14 init() {
15 return {
16 birdY: 10,
17 birdGravity: -12,
18 };
19 },
20
21 loop({ state, getInputs }) {
22 const inputs = getInputs();
23
24 let { birdGravity, birdY } = state;
25
26 birdGravity += 0.8;
27 birdY -= birdGravity;
28
29 if (inputs.pointer.justPressed) {
30 birdGravity = -12;
31 }
32
33 return {
34 birdGravity,
35 birdY,
36 };
37 },
38
39 render({ state }) {
40 return [
41 Bird({
42 id: "bird",
43 x: birdX,
44 y: state.birdY,
45 }),
46 ];
47 },
48});
49
Preview