diff --git a/audio/sfx_die.wav b/audio/sfx_die.wav
new file mode 100755
index 0000000..f35882b
Binary files /dev/null and b/audio/sfx_die.wav differ
diff --git a/audio/sfx_flap.wav b/audio/sfx_flap.wav
new file mode 100755
index 0000000..92cbc06
Binary files /dev/null and b/audio/sfx_flap.wav differ
diff --git a/audio/sfx_hit.wav b/audio/sfx_hit.wav
new file mode 100755
index 0000000..1533ab4
Binary files /dev/null and b/audio/sfx_hit.wav differ
diff --git a/audio/sfx_point.wav b/audio/sfx_point.wav
new file mode 100755
index 0000000..f0bbd41
Binary files /dev/null and b/audio/sfx_point.wav differ
diff --git a/audio/sfx_swooshing.wav b/audio/sfx_swooshing.wav
new file mode 100755
index 0000000..d610521
Binary files /dev/null and b/audio/sfx_swooshing.wav differ
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..456d6b7
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,5 @@
+canvas{
+ border: 1px solid #000;
+ display: block;
+ margin: 0 auto;
+}
\ No newline at end of file
diff --git a/img/sprite.png b/img/sprite.png
new file mode 100755
index 0000000..2538e23
Binary files /dev/null and b/img/sprite.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..03ba264
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/game.js b/js/game.js
new file mode 100644
index 0000000..2bf5f78
--- /dev/null
+++ b/js/game.js
@@ -0,0 +1,166 @@
+window.onload = function(){
+
+ // select canvas
+ const cvs = document.getElementById("mycanvas")
+ const ctx = cvs.getContext("2d");
+
+ // game vars and conts
+ let frames = 0;
+
+ //Load sprite image
+ const sprite = new Image();
+ sprite.src = "./img/sprite.png"
+
+ // GAME STATE
+ const state = {
+ current : 0,
+ getReady : 0,
+ game : 1,
+ over : 2
+ }
+ // CONTROL THE GAME
+ cvs.addEventListener("click", function(evt) {
+ switch (state.current) {
+ case state.getReady:
+ state.current = state.game;
+ break;
+ case state.game:
+ bird.flap();
+ break;
+ case state.over:
+ state.current = state.getReady;
+ break;
+ }
+ });
+
+ //ctx.drawImage(sprite, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight)
+ //sX : spriteでとって来たいspriteのx座標
+ //sY : spriteでとって来たいspriteのy座標
+ //sWidth : spriteでとって来たいspriteの(x, y)座標からの横幅
+ //sHeight : spriteでとって来たいspriteの(x, y)座標からの縦
+ //dX : Destination Canvasで描き始めたいx座標
+ //dY : Destination Canvasで描き始めたいy座標
+ //dWidth : Destination Canvasで描き始めたい(x, y)座標からの横幅
+ //dHeight : Destination Canvasで描き始めたい(x, y)座標からの縦
+
+ //background
+ const bg = {
+ sX : 0,
+ sY : 0,
+ w : 275,
+ h : 226,
+ x : 0,
+ y : cvs.height - 226,
+
+ draw : function() {
+ ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h);
+ ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x + this.w, this.y, this.w, this.h);
+ }
+ }
+
+ // FOOREGROUND
+ const fg = {
+ sX : 276,
+ sY : 0,
+ w : 224,
+ h : 112,
+ x : 0,
+ y : cvs.height - 112,
+
+ draw : function () {
+ ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h);
+ ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x + this.w, this.y, this.w, this.h);
+ }
+ }
+
+ // BIRD
+ const bird = {
+ animation : [
+ {sX: 276, sY :112}, //this.animation[0]
+ {sX: 276, sY :139}, //this.animation[1]
+ {sX: 276, sY :164}, //this.animation[2]
+ {sX: 276, sY :139}, //this.animation[3]
+ ],
+ w: 34,
+ h: 26,
+ x: 50,
+ y: 150,
+ frame : 0,
+ draw : function() {
+ let bird = this.animation[this.frame]
+ ctx.drawImage(sprite, bird.sX, bird.sY, this.w, this.h, this.x - this.w/2, this.y - this.h/2, this.w, this.h);
+ },
+
+ flap : function() {
+
+ },
+
+ update : function() {
+ // If the game state is get ready state, the bird must flap slowly
+ this.period = state.current == state.getReady ? 10 :5
+ // We increment the frame by 1, eath period
+ this.frame += frames%this.period == 0 ? 1:0;
+ // Frames goes from 0 to 4, then again to 0
+ this.frame = this.frame%this.animation.length
+ }
+ }
+
+ // GET READY MESSAGE
+ const getReady = {
+ sX : 0,
+ sY : 228,
+ w : 173,
+ h : 152,
+ x : cvs.width/2 - 173/2,
+ y : 80,
+
+ draw : function() {
+ if(state.current == state.getReady) {
+ ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h);
+ }
+ }
+ }
+
+ // GET READY MESSAGE
+ const gameover = {
+ sX : 175,
+ sY : 228,
+ w : 225,
+ h : 202,
+ x : cvs.width/2 - 225/2,
+ y : 90,
+
+ draw : function() {
+ if(state.current == state.over)
+ ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h);
+ }
+ }
+
+ // draw
+ function draw() {
+ ctx.fillStyle = "#70c5ce";
+ ctx.fillRect(0,0, cvs.width, cvs.height)
+
+ bg.draw();
+ fg.draw();
+ bird.draw();
+ getReady.draw();
+ gameover.draw();
+ }
+
+ // update
+ function update() {
+ bird.update()
+ }
+
+ //loop
+ function loop() {
+ update();
+ draw();
+ frames++;
+
+ requestAnimationFrame(loop)
+ }
+
+ loop()
+}
\ No newline at end of file