JavaScript-FlipBook/script.js at main · HackMasterFlash/JavaScript-FlipBook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
letplayerState='ko';
constdropdown=document.getElementById('animations');
dropdown.addEventListener('change',function(e){
playerState=e.target.value;
});

constcanvas=document.getElementById('canvas1');
constctx=canvas.getContext('2d');
constCANVAS_WIDTH=canvas.width=600;
constCANVAS_HEIGHT=canvas.height=600;

constplayerImage=newImage();
playerImage.src='shadow_dog.png';
constspriteWidth=575;
constspriteHeight=523;

letgameFrame=0;
conststaggerFrame=4;
constspriteAnimations=[];
constanimationStates=[
{
name: 'idle',
frames:7,
},
{
name: 'jump',
frames:7,
},
{
name: 'fall',
frames:7,
},
{
name: 'run',
frames:9,
},
{
name: 'dizzy',
frames:11,
},
{
name: 'sit',
frames:5,
},
{
name: 'roll',
frames:7,
},
{
name: 'bite',
frames:7,
},
{
name: 'ko',
frames:12,
},
{
name: 'getHit',
frames:4,
}
];
animationStates.forEach((state,index)=>{
letframes={
loc: [],
}
for(letj=0;j<state.frames;j++){
letpositionX=j*spriteWidth;
letpositionY=index*spriteHeight;
frames.loc.push({x: positionX,y: positionY});
}
spriteAnimations[state.name]=frames;
});
console.log(spriteAnimations);

functionanimate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
letposition=Math.floor(gameFrame/staggerFrame)%spriteAnimations[playerState].loc.length;
letframeX=spriteAnimations[playerState].loc[position].x;
letframeY=spriteAnimations[playerState].loc[position].y;
ctx.drawImage(playerImage,frameX,frameY,
spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);

gameFrame++;
requestAnimationFrame(animate);
};
animate();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
letplayerState='ko';
constdropdown=document.getElementById('animations');
dropdown.addEventListener('change',function(e){
playerState=e.target.value;
});

constcanvas=document.getElementById('canvas1');
constctx=canvas.getContext('2d');
constCANVAS_WIDTH=canvas.width=600;
constCANVAS_HEIGHT=canvas.height=600;

constplayerImage=newImage();
playerImage.src='shadow_dog.png';
constspriteWidth=575;
constspriteHeight=523;

letgameFrame=0;
conststaggerFrame=4;
constspriteAnimations=[];
constanimationStates=[
{
name: 'idle',
frames:7,
},
{
name: 'jump',
frames:7,
},
{
name: 'fall',
frames:7,
},
{
name: 'run',
frames:9,
},
{
name: 'dizzy',
frames:11,
},
{
name: 'sit',
frames:5,
},
{
name: 'roll',
frames:7,
},
{
name: 'bite',
frames:7,
},
{
name: 'ko',
frames:12,
},
{
name: 'getHit',
frames:4,
}
];
animationStates.forEach((state,index)=>{
letframes={
loc: [],
}
for(letj=0;j<state.frames;j++){
letpositionX=j*spriteWidth;
letpositionY=index*spriteHeight;
frames.loc.push({x: positionX,y: positionY});
}
spriteAnimations[state.name]=frames;
});
console.log(spriteAnimations);

functionanimate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
letposition=Math.floor(gameFrame/staggerFrame)%spriteAnimations[playerState].loc.length;
letframeX=spriteAnimations[playerState].loc[position].x;
letframeY=spriteAnimations[playerState].loc[position].y;
ctx.drawImage(playerImage,frameX,frameY,
spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);

gameFrame++;
requestAnimationFrame(animate);
};
animate();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
letplayerState='ko';
constdropdown=document.getElementById('animations');
dropdown.addEventListener('change',function(e){
playerState=e.target.value;
});

constcanvas=document.getElementById('canvas1');
constctx=canvas.getContext('2d');
constCANVAS_WIDTH=canvas.width=600;
constCANVAS_HEIGHT=canvas.height=600;

constplayerImage=newImage();
playerImage.src='shadow_dog.png';
constspriteWidth=575;
constspriteHeight=523;

letgameFrame=0;
conststaggerFrame=4;
constspriteAnimations=[];
constanimationStates=[
{
name: 'idle',
frames:7,
},
{
name: 'jump',
frames:7,
},
{
name: 'fall',
frames:7,
},
{
name: 'run',
frames:9,
},
{
name: 'dizzy',
frames:11,
},
{
name: 'sit',
frames:5,
},
{
name: 'roll',
frames:7,
},
{
name: 'bite',
frames:7,
},
{
name: 'ko',
frames:12,
},
{
name: 'getHit',
frames:4,
}
];
animationStates.forEach((state,index)=>{
letframes={
loc: [],
}
for(letj=0;j<state.frames;j++){
letpositionX=j*spriteWidth;
letpositionY=index*spriteHeight;
frames.loc.push({x: positionX,y: positionY});
}
spriteAnimations[state.name]=frames;
});
console.log(spriteAnimations);

functionanimate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
letposition=Math.floor(gameFrame/staggerFrame)%spriteAnimations[playerState].loc.length;
letframeX=spriteAnimations[playerState].loc[position].x;
letframeY=spriteAnimations[playerState].loc[position].y;
ctx.drawImage(playerImage,frameX,frameY,
spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);

gameFrame++;
requestAnimationFrame(animate);
};
animate();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
letplayerState='ko';
constdropdown=document.getElementById('animations');
dropdown.addEventListener('change',function(e){
playerState=e.target.value;
});

constcanvas=document.getElementById('canvas1');
constctx=canvas.getContext('2d');
constCANVAS_WIDTH=canvas.width=600;
constCANVAS_HEIGHT=canvas.height=600;

constplayerImage=newImage();
playerImage.src='shadow_dog.png';
constspriteWidth=575;
constspriteHeight=523;

letgameFrame=0;
conststaggerFrame=4;
constspriteAnimations=[];
constanimationStates=[
{
name: 'idle',
frames:7,
},
{
name: 'jump',
frames:7,
},
{
name: 'fall',
frames:7,
},
{
name: 'run',
frames:9,
},
{
name: 'dizzy',
frames:11,
},
{
name: 'sit',
frames:5,
},
{
name: 'roll',
frames:7,
},
{
name: 'bite',
frames:7,
},
{
name: 'ko',
frames:12,
},
{
name: 'getHit',
frames:4,
}
];
animationStates.forEach((state,index)=>{
letframes={
loc: [],
}
for(letj=0;j<state.frames;j++){
letpositionX=j*spriteWidth;
letpositionY=index*spriteHeight;
frames.loc.push({x: positionX,y: positionY});
}
spriteAnimations[state.name]=frames;
});
console.log(spriteAnimations);

functionanimate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
letposition=Math.floor(gameFrame/staggerFrame)%spriteAnimations[playerState].loc.length;
letframeX=spriteAnimations[playerState].loc[position].x;
letframeY=spriteAnimations[playerState].loc[position].y;
ctx.drawImage(playerImage,frameX,frameY,
spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);

gameFrame++;
requestAnimationFrame(animate);
};
animate();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
letplayerState='ko';
constdropdown=document.getElementById('animations');
dropdown.addEventListener('change',function(e){
playerState=e.target.value;
});

constcanvas=document.getElementById('canvas1');
constctx=canvas.getContext('2d');
constCANVAS_WIDTH=canvas.width=600;
constCANVAS_HEIGHT=canvas.height=600;

constplayerImage=newImage();
playerImage.src='shadow_dog.png';
constspriteWidth=575;
constspriteHeight=523;

letgameFrame=0;
conststaggerFrame=4;
constspriteAnimations=[];
constanimationStates=[
{
name: 'idle',
frames:7,
},
{
name: 'jump',
frames:7,
},
{
name: 'fall',
frames:7,
},
{
name: 'run',
frames:9,
},
{
name: 'dizzy',
frames:11,
},
{
name: 'sit',
frames:5,
},
{
name: 'roll',
frames:7,
},
{
name: 'bite',
frames:7,
},
{
name: 'ko',
frames:12,
},
{
name: 'getHit',
frames:4,
}
];
animationStates.forEach((state,index)=>{
letframes={
loc: [],
}
for(letj=0;j<state.frames;j++){
letpositionX=j*spriteWidth;
letpositionY=index*spriteHeight;
frames.loc.push({x: positionX,y: positionY});
}
spriteAnimations[state.name]=frames;
});
console.log(spriteAnimations);

functionanimate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
letposition=Math.floor(gameFrame/staggerFrame)%spriteAnimations[playerState].loc.length;
letframeX=spriteAnimations[playerState].loc[position].x;
letframeY=spriteAnimations[playerState].loc[position].y;
ctx.drawImage(playerImage,frameX,frameY,
spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);

gameFrame++;
requestAnimationFrame(animate);
};
animate();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
letplayerState='ko';
constdropdown=document.getElementById('animations');
dropdown.addEventListener('change',function(e){
playerState=e.target.value;
});

constcanvas=document.getElementById('canvas1');
constctx=canvas.getContext('2d');
constCANVAS_WIDTH=canvas.width=600;
constCANVAS_HEIGHT=canvas.height=600;

constplayerImage=newImage();
playerImage.src='shadow_dog.png';
constspriteWidth=575;
constspriteHeight=523;

letgameFrame=0;
conststaggerFrame=4;
constspriteAnimations=[];
constanimationStates=[
{
name: 'idle',
frames:7,
},
{
name: 'jump',
frames:7,
},
{
name: 'fall',
frames:7,
},
{
name: 'run',
frames:9,
},
{
name: 'dizzy',
frames:11,
},
{
name: 'sit',
frames:5,
},
{
name: 'roll',
frames:7,
},
{
name: 'bite',
frames:7,
},
{
name: 'ko',
frames:12,
},
{
name: 'getHit',
frames:4,
}
];
animationStates.forEach((state,index)=>{
letframes={
loc: [],
}
for(letj=0;j<state.frames;j++){
letpositionX=j*spriteWidth;
letpositionY=index*spriteHeight;
frames.loc.push({x: positionX,y: positionY});
}
spriteAnimations[state.name]=frames;
});
console.log(spriteAnimations);

functionanimate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
letposition=Math.floor(gameFrame/staggerFrame)%spriteAnimations[playerState].loc.length;
letframeX=spriteAnimations[playerState].loc[position].x;
letframeY=spriteAnimations[playerState].loc[position].y;
ctx.drawImage(playerImage,frameX,frameY,
spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);

gameFrame++;
requestAnimationFrame(animate);
};
animate();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
letplayerState='ko';
constdropdown=document.getElementById('animations');
dropdown.addEventListener('change',function(e){
playerState=e.target.value;
});

constcanvas=document.getElementById('canvas1');
constctx=canvas.getContext('2d');
constCANVAS_WIDTH=canvas.width=600;
constCANVAS_HEIGHT=canvas.height=600;

constplayerImage=newImage();
playerImage.src='shadow_dog.png';
constspriteWidth=575;
constspriteHeight=523;

letgameFrame=0;
conststaggerFrame=4;
constspriteAnimations=[];
constanimationStates=[
{
name: 'idle',
frames:7,
},
{
name: 'jump',
frames:7,
},
{
name: 'fall',
frames:7,
},
{
name: 'run',
frames:9,
},
{
name: 'dizzy',
frames:11,
},
{
name: 'sit',
frames:5,
},
{
name: 'roll',
frames:7,
},
{
name: 'bite',
frames:7,
},
{
name: 'ko',
frames:12,
},
{
name: 'getHit',
frames:4,
}
];
animationStates.forEach((state,index)=>{
letframes={
loc: [],
}
for(letj=0;j<state.frames;j++){
letpositionX=j*spriteWidth;
letpositionY=index*spriteHeight;
frames.loc.push({x: positionX,y: positionY});
}
spriteAnimations[state.name]=frames;
});
console.log(spriteAnimations);

functionanimate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
letposition=Math.floor(gameFrame/staggerFrame)%spriteAnimations[playerState].loc.length;
letframeX=spriteAnimations[playerState].loc[position].x;
letframeY=spriteAnimations[playerState].loc[position].y;
ctx.drawImage(playerImage,frameX,frameY,
spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);

gameFrame++;
requestAnimationFrame(animate);
};
animate();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
letplayerState='ko';
constdropdown=document.getElementById('animations');
dropdown.addEventListener('change',function(e){
playerState=e.target.value;
});

constcanvas=document.getElementById('canvas1');
constctx=canvas.getContext('2d');
constCANVAS_WIDTH=canvas.width=600;
constCANVAS_HEIGHT=canvas.height=600;

constplayerImage=newImage();
playerImage.src='shadow_dog.png';
constspriteWidth=575;
constspriteHeight=523;

letgameFrame=0;
conststaggerFrame=4;
constspriteAnimations=[];
constanimationStates=[
{
name: 'idle',
frames:7,
},
{
name: 'jump',
frames:7,
},
{
name: 'fall',
frames:7,
},
{
name: 'run',
frames:9,
},
{
name: 'dizzy',
frames:11,
},
{
name: 'sit',
frames:5,
},
{
name: 'roll',
frames:7,
},
{
name: 'bite',
frames:7,
},
{
name: 'ko',
frames:12,
},
{
name: 'getHit',
frames:4,
}
];
animationStates.forEach((state,index)=>{
letframes={
loc: [],
}
for(letj=0;j<state.frames;j++){
letpositionX=j*spriteWidth;
letpositionY=index*spriteHeight;
frames.loc.push({x: positionX,y: positionY});
}
spriteAnimations[state.name]=frames;
});
console.log(spriteAnimations);

functionanimate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
letposition=Math.floor(gameFrame/staggerFrame)%spriteAnimations[playerState].loc.length;
letframeX=spriteAnimations[playerState].loc[position].x;
letframeY=spriteAnimations[playerState].loc[position].y;
ctx.drawImage(playerImage,frameX,frameY,
spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);

gameFrame++;
requestAnimationFrame(animate);
};
animate();