├── billiard ├── billiard_2_canvas_object │ └── billiard │ │ ├── assets │ │ └── sprites │ │ │ ├── background.png │ │ │ ├── ball.png │ │ │ └── stick.png │ │ ├── game.js │ │ └── index.html ├── billiard_3_assetsloading │ └── billiard │ │ ├── assets │ │ └── sprites │ │ │ ├── background.png │ │ │ ├── ball.png │ │ │ └── stick.png │ │ ├── game.js │ │ └── index.html ├── billiard_4_mouseHandler │ └── billiard │ │ ├── assets │ │ └── sprites │ │ │ ├── background.png │ │ │ ├── ball.png │ │ │ └── stick.png │ │ ├── game.js │ │ └── index.html ├── billiard_5_whiteball │ └── billiard │ │ ├── assets │ │ └── sprites │ │ │ ├── background.png │ │ │ ├── ball.png │ │ │ └── stick.png │ │ ├── game.js │ │ └── index.html ├── billiard_6_stick │ └── billiard │ │ ├── assets │ │ └── sprites │ │ │ ├── background.png │ │ │ ├── ball.png │ │ │ └── stick.png │ │ ├── game.js │ │ └── index.html ├── billiard_7_shoot │ └── billiard │ │ ├── assets │ │ └── sprites │ │ │ ├── background.png │ │ │ ├── ball.png │ │ │ └── stick.png │ │ ├── game.js │ │ └── index.html └── billiard_8_reposition │ └── billiard │ ├── assets │ └── sprites │ │ ├── background.png │ │ ├── ball.png │ │ └── stick.png │ ├── game.js │ └── index.html ├── dummyProject ├── index.html └── style.css ├── flappy_bird_codes ├── audio │ ├── die.wav │ ├── flap.wav │ ├── hit.wav │ ├── score.wav │ └── start.wav ├── debug.log ├── game.js ├── img │ └── sprite.png └── index.html ├── hashProject ├── index.html ├── script.js └── style.css ├── stateProject ├── index.html ├── script.js └── style.css └── to-do ├── index.html ├── script.js └── style.css /billiard/billiard_2_canvas_object/billiard/assets/sprites/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_2_canvas_object/billiard/assets/sprites/background.png -------------------------------------------------------------------------------- /billiard/billiard_2_canvas_object/billiard/assets/sprites/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_2_canvas_object/billiard/assets/sprites/ball.png -------------------------------------------------------------------------------- /billiard/billiard_2_canvas_object/billiard/assets/sprites/stick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_2_canvas_object/billiard/assets/sprites/stick.png -------------------------------------------------------------------------------- /billiard/billiard_2_canvas_object/billiard/game.js: -------------------------------------------------------------------------------- 1 | 2 | ////////////vector///////////// 3 | function Vector(x = 0, y = 0) { 4 | this.x = x; 5 | this.y = y; 6 | } 7 | 8 | Vector.prototype.copy = function(){ 9 | return new Vector(this.x, this.y) 10 | } 11 | 12 | Vector.prototype.mult = function(value){ 13 | return new Vector(this.x * value, this.y * value) 14 | } 15 | 16 | Vector.prototype.length = function(){ 17 | return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)) 18 | } 19 | 20 | 21 | Vector.prototype.addTo = function(vector){ 22 | this.x += vector.x; 23 | this.y += vector.y; 24 | } 25 | 26 | 27 | /////////////////////////////// 28 | 29 | ////////////canvas///////////// 30 | function Canvas2D() { 31 | this._canvas = document.getElementById("screen"); 32 | this.ctx = this._canvas.getContext("2d"); 33 | } 34 | 35 | Canvas2D.prototype.clear = function() { 36 | this.ctx.clearRect(0, 0, this._canvas.clientWidth, this._canvas.height); 37 | }; 38 | 39 | Canvas2D.prototype.drawImage = function( 40 | image, 41 | position = new Vector() , 42 | origin = new Vector() , 43 | rotation = 0 44 | ) { 45 | this.ctx.save(); 46 | this.ctx.translate(position.x, position.y); 47 | this.ctx.rotate(rotation); 48 | this.ctx.drawImage(image, -origin.y, -origin.y); 49 | this.ctx.restore(); 50 | }; 51 | 52 | let Canvas = new Canvas2D(); 53 | 54 | /////////////////////////////// 55 | -------------------------------------------------------------------------------- /billiard/billiard_2_canvas_object/billiard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | billiard 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /billiard/billiard_3_assetsloading/billiard/assets/sprites/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_3_assetsloading/billiard/assets/sprites/background.png -------------------------------------------------------------------------------- /billiard/billiard_3_assetsloading/billiard/assets/sprites/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_3_assetsloading/billiard/assets/sprites/ball.png -------------------------------------------------------------------------------- /billiard/billiard_3_assetsloading/billiard/assets/sprites/stick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_3_assetsloading/billiard/assets/sprites/stick.png -------------------------------------------------------------------------------- /billiard/billiard_3_assetsloading/billiard/game.js: -------------------------------------------------------------------------------- 1 | ////////////load assets////////// 2 | let sprites = {}; 3 | let assetsStillLoading = 0; 4 | 5 | function loadSprite(fileName){ 6 | assetsStillLoading ++; 7 | 8 | let spriteImage = new Image() 9 | spriteImage.src = "./assets/sprites/" + fileName; 10 | 11 | spriteImage.addEventListener("load", function(){ 12 | assetsStillLoading --; 13 | }) 14 | 15 | return spriteImage; 16 | 17 | } 18 | 19 | function loadAssets(callback){ 20 | sprites.background = loadSprite("background.png") 21 | sprites.stick = loadSprite("stick.png") 22 | sprites.whiteBall = loadSprite("ball.png") 23 | 24 | assetsLoadingLoop(callback) 25 | } 26 | 27 | function assetsLoadingLoop(callback){ 28 | if(assetsStillLoading){ 29 | requestAnimationFrame(assetsLoadingLoop.bind(this, callback)) 30 | }else{ 31 | callback() 32 | } 33 | } 34 | 35 | /////////////////////////////// 36 | 37 | 38 | 39 | ////////////vector///////////// 40 | function Vector(x = 0, y = 0) { 41 | this.x = x; 42 | this.y = y; 43 | } 44 | 45 | Vector.prototype.copy = function(){ 46 | return new Vector(this.x, this.y) 47 | } 48 | 49 | Vector.prototype.mult = function(value){ 50 | return new Vector(this.x * value, this.y * value) 51 | } 52 | 53 | Vector.prototype.length = function(){ 54 | return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)) 55 | } 56 | 57 | 58 | Vector.prototype.addTo = function(vector){ 59 | this.x += vector.x; 60 | this.y += vector.y; 61 | } 62 | 63 | 64 | /////////////////////////////// 65 | 66 | ////////////canvas///////////// 67 | function Canvas2D() { 68 | this._canvas = document.getElementById("screen"); 69 | this.ctx = this._canvas.getContext("2d"); 70 | } 71 | 72 | Canvas2D.prototype.clear = function() { 73 | this.ctx.clearRect(0, 0, this._canvas.clientWidth, this._canvas.height); 74 | }; 75 | 76 | Canvas2D.prototype.drawImage = function( 77 | image, 78 | position = new Vector() , 79 | origin = new Vector() , 80 | rotation = 0 81 | ) { 82 | this.ctx.save(); 83 | this.ctx.translate(position.x, position.y); 84 | this.ctx.rotate(rotation); 85 | this.ctx.drawImage(image, -origin.y, -origin.y); 86 | this.ctx.restore(); 87 | }; 88 | 89 | let Canvas = new Canvas2D(); 90 | 91 | /////////////////////////////// 92 | 93 | ////////////game world///////////// 94 | function GameWorld(){ 95 | 96 | } 97 | 98 | GameWorld.prototype.update = function(){ 99 | 100 | } 101 | 102 | GameWorld.prototype.draw = function(){ 103 | Canvas.drawImage(sprites.background ) 104 | } 105 | 106 | let gameworld = new GameWorld() 107 | /////////////////////////////// 108 | 109 | 110 | function animate(){ 111 | Canvas.clear(); 112 | gameworld.update(); 113 | gameworld.draw(); 114 | requestAnimationFrame(animate); 115 | } 116 | 117 | loadAssets(animate) 118 | -------------------------------------------------------------------------------- /billiard/billiard_3_assetsloading/billiard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | billiard 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /billiard/billiard_4_mouseHandler/billiard/assets/sprites/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_4_mouseHandler/billiard/assets/sprites/background.png -------------------------------------------------------------------------------- /billiard/billiard_4_mouseHandler/billiard/assets/sprites/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_4_mouseHandler/billiard/assets/sprites/ball.png -------------------------------------------------------------------------------- /billiard/billiard_4_mouseHandler/billiard/assets/sprites/stick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_4_mouseHandler/billiard/assets/sprites/stick.png -------------------------------------------------------------------------------- /billiard/billiard_4_mouseHandler/billiard/game.js: -------------------------------------------------------------------------------- 1 | ////////////load assets////////// 2 | let sprites = {}; 3 | let assetsStillLoading = 0; 4 | 5 | function loadSprite(fileName){ 6 | assetsStillLoading ++; 7 | 8 | let spriteImage = new Image() 9 | spriteImage.src = "./assets/sprites/" + fileName; 10 | 11 | spriteImage.addEventListener("load", function(){ 12 | assetsStillLoading --; 13 | }) 14 | 15 | return spriteImage; 16 | 17 | } 18 | 19 | function loadAssets(callback){ 20 | sprites.background = loadSprite("background.png") 21 | sprites.stick = loadSprite("stick.png") 22 | sprites.whiteBall = loadSprite("ball.png") 23 | 24 | assetsLoadingLoop(callback) 25 | } 26 | 27 | function assetsLoadingLoop(callback){ 28 | if(assetsStillLoading){ 29 | requestAnimationFrame(assetsLoadingLoop.bind(this, callback)) 30 | }else{ 31 | callback() 32 | } 33 | } 34 | 35 | /////////////////////////////// 36 | 37 | 38 | 39 | ////////////vector///////////// 40 | function Vector(x = 0, y = 0) { 41 | this.x = x; 42 | this.y = y; 43 | } 44 | 45 | Vector.prototype.copy = function(){ 46 | return new Vector(this.x, this.y) 47 | } 48 | 49 | Vector.prototype.mult = function(value){ 50 | return new Vector(this.x * value, this.y * value) 51 | } 52 | 53 | Vector.prototype.length = function(){ 54 | return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)) 55 | } 56 | 57 | 58 | Vector.prototype.addTo = function(vector){ 59 | this.x += vector.x; 60 | this.y += vector.y; 61 | } 62 | 63 | 64 | /////////////////////////////// 65 | 66 | ////////////mouse handler////////// 67 | function ButtonState(){ 68 | this.down = false; 69 | this.pressed = false; 70 | } 71 | 72 | function MouseHnadler(){ 73 | this.left = new ButtonState(); 74 | this.middle = new ButtonState(); 75 | this.right = new ButtonState(); 76 | 77 | this.position = new Vector(); 78 | 79 | document.addEventListener("mousemove" , handleMouseMove) 80 | document.addEventListener("mousedown" , handleMouseDown) 81 | document.addEventListener("mouseup" , handleMouseUp) 82 | } 83 | 84 | MouseHnadler.prototype.reset = function(){ 85 | this.left.pressed = false; 86 | this.middle.pressed = false; 87 | this.right.pressed = false; 88 | } 89 | 90 | function handleMouseMove(e){ 91 | Mouse.position.x = e.pageX; 92 | Mouse.position.y = e.pageY; 93 | } 94 | function handleMouseDown(e){ 95 | handleMouseMove(e) 96 | if(e.which == 1){ 97 | Mouse.left.pressed = true; 98 | Mouse.left.down = true; 99 | }else if(e.which == 2){ 100 | Mouse.middle.pressed = true; 101 | Mouse.middle.down = true; 102 | }else if(e.which == 3){ 103 | Mouse.right.pressed = true; 104 | Mouse.right.down = true; 105 | } 106 | } 107 | function handleMouseUp(e){ 108 | handleMouseMove(e) 109 | if(e.which == 1){ 110 | Mouse.left.down = false; 111 | }else if(e.which == 2){ 112 | Mouse.middle.down = false; 113 | }else if(e.which == 3){ 114 | Mouse.right.down = false; 115 | } 116 | } 117 | 118 | let Mouse = new MouseHnadler(); 119 | /////////////////////////////// 120 | 121 | 122 | ////////////canvas///////////// 123 | function Canvas2D() { 124 | this._canvas = document.getElementById("screen"); 125 | this.ctx = this._canvas.getContext("2d"); 126 | } 127 | 128 | Canvas2D.prototype.clear = function() { 129 | this.ctx.clearRect(0, 0, this._canvas.clientWidth, this._canvas.height); 130 | }; 131 | 132 | Canvas2D.prototype.drawImage = function( 133 | image, 134 | position = new Vector() , 135 | origin = new Vector() , 136 | rotation = 0 137 | ) { 138 | this.ctx.save(); 139 | this.ctx.translate(position.x, position.y); 140 | this.ctx.rotate(rotation); 141 | this.ctx.drawImage(image, -origin.y, -origin.y); 142 | this.ctx.restore(); 143 | }; 144 | 145 | let Canvas = new Canvas2D(); 146 | 147 | /////////////////////////////// 148 | 149 | ////////////game world///////////// 150 | function GameWorld(){ 151 | 152 | } 153 | 154 | GameWorld.prototype.update = function(){ 155 | 156 | } 157 | 158 | GameWorld.prototype.draw = function(){ 159 | Canvas.drawImage(sprites.background ) 160 | } 161 | 162 | let gameworld = new GameWorld() 163 | /////////////////////////////// 164 | 165 | 166 | function animate(){ 167 | Canvas.clear(); 168 | gameworld.update(); 169 | gameworld.draw(); 170 | requestAnimationFrame(animate); 171 | } 172 | 173 | loadAssets(animate) 174 | -------------------------------------------------------------------------------- /billiard/billiard_4_mouseHandler/billiard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | billiard 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /billiard/billiard_5_whiteball/billiard/assets/sprites/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_5_whiteball/billiard/assets/sprites/background.png -------------------------------------------------------------------------------- /billiard/billiard_5_whiteball/billiard/assets/sprites/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_5_whiteball/billiard/assets/sprites/ball.png -------------------------------------------------------------------------------- /billiard/billiard_5_whiteball/billiard/assets/sprites/stick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_5_whiteball/billiard/assets/sprites/stick.png -------------------------------------------------------------------------------- /billiard/billiard_5_whiteball/billiard/game.js: -------------------------------------------------------------------------------- 1 | const BALL_ORIGIN = new Vector(25,25) 2 | 3 | ////////////load assets////////// 4 | let sprites = {}; 5 | let assetsStillLoading = 0; 6 | 7 | function loadSprite(fileName){ 8 | assetsStillLoading ++; 9 | 10 | let spriteImage = new Image() 11 | spriteImage.src = "./assets/sprites/" + fileName; 12 | 13 | spriteImage.addEventListener("load", function(){ 14 | assetsStillLoading --; 15 | }) 16 | 17 | return spriteImage; 18 | 19 | } 20 | 21 | function loadAssets(callback){ 22 | sprites.background = loadSprite("background.png") 23 | sprites.stick = loadSprite("stick.png") 24 | sprites.whiteBall = loadSprite("ball.png") 25 | 26 | assetsLoadingLoop(callback) 27 | } 28 | 29 | function assetsLoadingLoop(callback){ 30 | if(assetsStillLoading){ 31 | requestAnimationFrame(assetsLoadingLoop.bind(this, callback)) 32 | }else{ 33 | callback() 34 | } 35 | } 36 | 37 | /////////////////////////////// 38 | 39 | 40 | 41 | ////////////vector///////////// 42 | function Vector(x = 0, y = 0) { 43 | this.x = x; 44 | this.y = y; 45 | } 46 | 47 | Vector.prototype.copy = function(){ 48 | return new Vector(this.x, this.y) 49 | } 50 | 51 | Vector.prototype.mult = function(value){ 52 | return new Vector(this.x * value, this.y * value) 53 | } 54 | 55 | Vector.prototype.length = function(){ 56 | return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)) 57 | } 58 | 59 | 60 | Vector.prototype.addTo = function(vector){ 61 | this.x += vector.x; 62 | this.y += vector.y; 63 | } 64 | 65 | 66 | /////////////////////////////// 67 | 68 | ////////////mouse handler////////// 69 | function ButtonState(){ 70 | this.down = false; 71 | this.pressed = false; 72 | } 73 | 74 | function MouseHnadler(){ 75 | this.left = new ButtonState(); 76 | this.middle = new ButtonState(); 77 | this.right = new ButtonState(); 78 | 79 | this.position = new Vector(); 80 | 81 | document.addEventListener("mousemove" , handleMouseMove) 82 | document.addEventListener("mousedown" , handleMouseDown) 83 | document.addEventListener("mouseup" , handleMouseUp) 84 | } 85 | 86 | MouseHnadler.prototype.reset = function(){ 87 | this.left.pressed = false; 88 | this.middle.pressed = false; 89 | this.right.pressed = false; 90 | } 91 | 92 | function handleMouseMove(e){ 93 | Mouse.position.x = e.pageX; 94 | Mouse.position.y = e.pageY; 95 | } 96 | function handleMouseDown(e){ 97 | handleMouseMove(e) 98 | if(e.which == 1){ 99 | Mouse.left.pressed = true; 100 | Mouse.left.down = true; 101 | }else if(e.which == 2){ 102 | Mouse.middle.pressed = true; 103 | Mouse.middle.down = true; 104 | }else if(e.which == 3){ 105 | Mouse.right.pressed = true; 106 | Mouse.right.down = true; 107 | } 108 | } 109 | function handleMouseUp(e){ 110 | handleMouseMove(e) 111 | if(e.which == 1){ 112 | Mouse.left.down = false; 113 | }else if(e.which == 2){ 114 | Mouse.middle.down = false; 115 | }else if(e.which == 3){ 116 | Mouse.right.down = false; 117 | } 118 | } 119 | 120 | let Mouse = new MouseHnadler(); 121 | /////////////////////////////// 122 | 123 | 124 | ////////////canvas///////////// 125 | function Canvas2D() { 126 | this._canvas = document.getElementById("screen"); 127 | this.ctx = this._canvas.getContext("2d"); 128 | } 129 | 130 | Canvas2D.prototype.clear = function() { 131 | this.ctx.clearRect(0, 0, this._canvas.clientWidth, this._canvas.height); 132 | }; 133 | 134 | Canvas2D.prototype.drawImage = function( 135 | image, 136 | position = new Vector() , 137 | origin = new Vector() , 138 | rotation = 0 139 | ) { 140 | this.ctx.save(); 141 | this.ctx.translate(position.x, position.y); 142 | this.ctx.rotate(rotation); 143 | this.ctx.drawImage(image, -origin.y, -origin.y); 144 | this.ctx.restore(); 145 | }; 146 | 147 | let Canvas = new Canvas2D(); 148 | 149 | /////////////////////////////// 150 | 151 | ////////////Ball///////////// 152 | function Ball(position){ 153 | this.position = position; 154 | this.velocity = new Vector(); 155 | } 156 | 157 | Ball.prototype.update = function(delta){ 158 | 159 | } 160 | 161 | Ball.prototype.draw = function(){ 162 | Canvas.drawImage(sprites.whiteBall, this.position, BALL_ORIGIN ) 163 | } 164 | /////////////////////////////// 165 | 166 | 167 | ////////////game world///////////// 168 | function GameWorld(){ 169 | this.whiteBall = new Ball(new Vector(413,413)) 170 | } 171 | 172 | GameWorld.prototype.update = function(){ 173 | 174 | } 175 | 176 | GameWorld.prototype.draw = function(){ 177 | Canvas.drawImage(sprites.background ) 178 | this.whiteBall.draw(); 179 | } 180 | 181 | let gameworld = new GameWorld() 182 | /////////////////////////////// 183 | 184 | 185 | function animate(){ 186 | Canvas.clear(); 187 | gameworld.update(); 188 | gameworld.draw(); 189 | requestAnimationFrame(animate); 190 | } 191 | 192 | loadAssets(animate) 193 | -------------------------------------------------------------------------------- /billiard/billiard_5_whiteball/billiard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | billiard 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /billiard/billiard_6_stick/billiard/assets/sprites/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_6_stick/billiard/assets/sprites/background.png -------------------------------------------------------------------------------- /billiard/billiard_6_stick/billiard/assets/sprites/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_6_stick/billiard/assets/sprites/ball.png -------------------------------------------------------------------------------- /billiard/billiard_6_stick/billiard/assets/sprites/stick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_6_stick/billiard/assets/sprites/stick.png -------------------------------------------------------------------------------- /billiard/billiard_6_stick/billiard/game.js: -------------------------------------------------------------------------------- 1 | const BALL_ORIGIN = new Vector(25,25) 2 | 3 | const STICK_ORIGIN = new Vector(970, 11); 4 | const SHOOT_ORIGIN = new Vector(950, 11); 5 | 6 | ////////////load assets////////// 7 | let sprites = {}; 8 | let assetsStillLoading = 0; 9 | 10 | function loadSprite(fileName){ 11 | assetsStillLoading ++; 12 | 13 | let spriteImage = new Image() 14 | spriteImage.src = "./assets/sprites/" + fileName; 15 | 16 | spriteImage.addEventListener("load", function(){ 17 | assetsStillLoading --; 18 | }) 19 | 20 | return spriteImage; 21 | 22 | } 23 | 24 | function loadAssets(callback){ 25 | sprites.background = loadSprite("background.png") 26 | sprites.stick = loadSprite("stick.png") 27 | sprites.whiteBall = loadSprite("ball.png") 28 | 29 | assetsLoadingLoop(callback) 30 | } 31 | 32 | function assetsLoadingLoop(callback){ 33 | if(assetsStillLoading){ 34 | requestAnimationFrame(assetsLoadingLoop.bind(this, callback)) 35 | }else{ 36 | callback() 37 | } 38 | } 39 | 40 | /////////////////////////////// 41 | 42 | 43 | 44 | ////////////vector///////////// 45 | function Vector(x = 0, y = 0) { 46 | this.x = x; 47 | this.y = y; 48 | } 49 | 50 | Vector.prototype.copy = function(){ 51 | return new Vector(this.x, this.y) 52 | } 53 | 54 | Vector.prototype.mult = function(value){ 55 | return new Vector(this.x * value, this.y * value) 56 | } 57 | 58 | Vector.prototype.length = function(){ 59 | return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)) 60 | } 61 | 62 | 63 | Vector.prototype.addTo = function(vector){ 64 | this.x += vector.x; 65 | this.y += vector.y; 66 | } 67 | 68 | 69 | /////////////////////////////// 70 | 71 | ////////////mouse handler////////// 72 | function ButtonState(){ 73 | this.down = false; 74 | this.pressed = false; 75 | } 76 | 77 | function MouseHnadler(){ 78 | this.left = new ButtonState(); 79 | this.middle = new ButtonState(); 80 | this.right = new ButtonState(); 81 | 82 | this.position = new Vector(); 83 | 84 | document.addEventListener("mousemove" , handleMouseMove) 85 | document.addEventListener("mousedown" , handleMouseDown) 86 | document.addEventListener("mouseup" , handleMouseUp) 87 | } 88 | 89 | MouseHnadler.prototype.reset = function(){ 90 | this.left.pressed = false; 91 | this.middle.pressed = false; 92 | this.right.pressed = false; 93 | } 94 | 95 | function handleMouseMove(e){ 96 | Mouse.position.x = e.pageX; 97 | Mouse.position.y = e.pageY; 98 | } 99 | function handleMouseDown(e){ 100 | handleMouseMove(e) 101 | if(e.which == 1){ 102 | Mouse.left.pressed = true; 103 | Mouse.left.down = true; 104 | }else if(e.which == 2){ 105 | Mouse.middle.pressed = true; 106 | Mouse.middle.down = true; 107 | }else if(e.which == 3){ 108 | Mouse.right.pressed = true; 109 | Mouse.right.down = true; 110 | } 111 | } 112 | function handleMouseUp(e){ 113 | handleMouseMove(e) 114 | if(e.which == 1){ 115 | Mouse.left.down = false; 116 | }else if(e.which == 2){ 117 | Mouse.middle.down = false; 118 | }else if(e.which == 3){ 119 | Mouse.right.down = false; 120 | } 121 | } 122 | 123 | let Mouse = new MouseHnadler(); 124 | /////////////////////////////// 125 | 126 | 127 | ////////////canvas///////////// 128 | function Canvas2D() { 129 | this._canvas = document.getElementById("screen"); 130 | this.ctx = this._canvas.getContext("2d"); 131 | } 132 | 133 | Canvas2D.prototype.clear = function() { 134 | this.ctx.clearRect(0, 0, this._canvas.clientWidth, this._canvas.height); 135 | }; 136 | 137 | Canvas2D.prototype.drawImage = function( 138 | image, 139 | position = new Vector() , 140 | origin = new Vector() , 141 | rotation = 0 142 | ) { 143 | this.ctx.save(); 144 | this.ctx.translate(position.x, position.y); 145 | this.ctx.rotate(rotation); 146 | this.ctx.drawImage(image, -origin.x, -origin.y); 147 | this.ctx.restore(); 148 | }; 149 | 150 | let Canvas = new Canvas2D(); 151 | 152 | /////////////////////////////// 153 | 154 | ////////////Ball///////////// 155 | function Ball(position){ 156 | this.position = position; 157 | this.velocity = new Vector(); 158 | } 159 | 160 | Ball.prototype.update = function(delta){ 161 | 162 | } 163 | 164 | Ball.prototype.draw = function(){ 165 | Canvas.drawImage(sprites.whiteBall, this.position, BALL_ORIGIN ) 166 | } 167 | 168 | Ball.prototype.shoot = function(power, rotation){ 169 | 170 | } 171 | /////////////////////////////// 172 | 173 | ////////////Stick///////////// 174 | function Stick(position, onShoot){ 175 | this.position = position; 176 | this.rotation = 0; 177 | this.origin = STICK_ORIGIN.copy(); 178 | this.power = 0; 179 | this.onShoot = onShoot; 180 | } 181 | 182 | Stick.prototype.draw = function(){ 183 | Canvas.drawImage(sprites.stick, this.position, this.origin, this.rotation) 184 | } 185 | 186 | Stick.prototype.update = function(){ 187 | this.updateRotation(); 188 | } 189 | 190 | Stick.prototype.updateRotation = function(){ 191 | let opposite = Mouse.position.y - this.position.y; 192 | let adjacent = Mouse.position.x - this.position.x; 193 | 194 | this.rotation = Math.atan2(opposite, adjacent) 195 | } 196 | 197 | /////////////////////////////// 198 | 199 | 200 | ////////////game world///////////// 201 | function GameWorld(){ 202 | this.whiteBall = new Ball(new Vector(413,413)) 203 | this.stick = new Stick(new Vector(413,413), this.whiteBall.shoot.bind(this.whiteBall) ) 204 | } 205 | 206 | GameWorld.prototype.update = function(){ 207 | this.stick.update() 208 | } 209 | 210 | GameWorld.prototype.draw = function(){ 211 | Canvas.drawImage(sprites.background ) 212 | this.whiteBall.draw(); 213 | this.stick.draw(); 214 | } 215 | 216 | let gameworld = new GameWorld() 217 | /////////////////////////////// 218 | 219 | 220 | function animate(){ 221 | Canvas.clear(); 222 | gameworld.update(); 223 | gameworld.draw(); 224 | requestAnimationFrame(animate); 225 | } 226 | 227 | loadAssets(animate) 228 | -------------------------------------------------------------------------------- /billiard/billiard_6_stick/billiard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | billiard 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /billiard/billiard_7_shoot/billiard/assets/sprites/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_7_shoot/billiard/assets/sprites/background.png -------------------------------------------------------------------------------- /billiard/billiard_7_shoot/billiard/assets/sprites/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_7_shoot/billiard/assets/sprites/ball.png -------------------------------------------------------------------------------- /billiard/billiard_7_shoot/billiard/assets/sprites/stick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_7_shoot/billiard/assets/sprites/stick.png -------------------------------------------------------------------------------- /billiard/billiard_7_shoot/billiard/game.js: -------------------------------------------------------------------------------- 1 | const BALL_ORIGIN = new Vector(25,25) 2 | 3 | const STICK_ORIGIN = new Vector(970, 11); 4 | const SHOOT_ORIGIN = new Vector(950, 11); 5 | const DELTA = 1/100; 6 | 7 | ////////////load assets////////// 8 | let sprites = {}; 9 | let assetsStillLoading = 0; 10 | 11 | function loadSprite(fileName){ 12 | assetsStillLoading ++; 13 | 14 | let spriteImage = new Image() 15 | spriteImage.src = "./assets/sprites/" + fileName; 16 | 17 | spriteImage.addEventListener("load", function(){ 18 | assetsStillLoading --; 19 | }) 20 | 21 | return spriteImage; 22 | 23 | } 24 | 25 | function loadAssets(callback){ 26 | sprites.background = loadSprite("background.png") 27 | sprites.stick = loadSprite("stick.png") 28 | sprites.whiteBall = loadSprite("ball.png") 29 | 30 | assetsLoadingLoop(callback) 31 | } 32 | 33 | function assetsLoadingLoop(callback){ 34 | if(assetsStillLoading){ 35 | requestAnimationFrame(assetsLoadingLoop.bind(this, callback)) 36 | }else{ 37 | callback() 38 | } 39 | } 40 | 41 | /////////////////////////////// 42 | 43 | 44 | 45 | ////////////vector///////////// 46 | function Vector(x = 0, y = 0) { 47 | this.x = x; 48 | this.y = y; 49 | } 50 | 51 | Vector.prototype.copy = function(){ 52 | return new Vector(this.x, this.y) 53 | } 54 | 55 | Vector.prototype.mult = function(value){ 56 | return new Vector(this.x * value, this.y * value) 57 | } 58 | 59 | Vector.prototype.length = function(){ 60 | return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)) 61 | } 62 | 63 | 64 | Vector.prototype.addTo = function(vector){ 65 | this.x += vector.x; 66 | this.y += vector.y; 67 | } 68 | 69 | 70 | /////////////////////////////// 71 | 72 | ////////////mouse handler////////// 73 | function ButtonState(){ 74 | this.down = false; 75 | this.pressed = false; 76 | } 77 | 78 | function MouseHnadler(){ 79 | this.left = new ButtonState(); 80 | this.middle = new ButtonState(); 81 | this.right = new ButtonState(); 82 | 83 | this.position = new Vector(); 84 | 85 | document.addEventListener("mousemove" , handleMouseMove) 86 | document.addEventListener("mousedown" , handleMouseDown) 87 | document.addEventListener("mouseup" , handleMouseUp) 88 | } 89 | 90 | MouseHnadler.prototype.reset = function(){ 91 | this.left.pressed = false; 92 | this.middle.pressed = false; 93 | this.right.pressed = false; 94 | } 95 | 96 | function handleMouseMove(e){ 97 | Mouse.position.x = e.pageX; 98 | Mouse.position.y = e.pageY; 99 | } 100 | function handleMouseDown(e){ 101 | handleMouseMove(e) 102 | if(e.which == 1){ 103 | Mouse.left.pressed = true; 104 | Mouse.left.down = true; 105 | }else if(e.which == 2){ 106 | Mouse.middle.pressed = true; 107 | Mouse.middle.down = true; 108 | }else if(e.which == 3){ 109 | Mouse.right.pressed = true; 110 | Mouse.right.down = true; 111 | } 112 | } 113 | function handleMouseUp(e){ 114 | handleMouseMove(e) 115 | if(e.which == 1){ 116 | Mouse.left.down = false; 117 | }else if(e.which == 2){ 118 | Mouse.middle.down = false; 119 | }else if(e.which == 3){ 120 | Mouse.right.down = false; 121 | } 122 | } 123 | 124 | let Mouse = new MouseHnadler(); 125 | /////////////////////////////// 126 | 127 | 128 | ////////////canvas///////////// 129 | function Canvas2D() { 130 | this._canvas = document.getElementById("screen"); 131 | this.ctx = this._canvas.getContext("2d"); 132 | } 133 | 134 | Canvas2D.prototype.clear = function() { 135 | this.ctx.clearRect(0, 0, this._canvas.clientWidth, this._canvas.height); 136 | }; 137 | 138 | Canvas2D.prototype.drawImage = function( 139 | image, 140 | position = new Vector() , 141 | origin = new Vector() , 142 | rotation = 0 143 | ) { 144 | this.ctx.save(); 145 | this.ctx.translate(position.x, position.y); 146 | this.ctx.rotate(rotation); 147 | this.ctx.drawImage(image, -origin.x, -origin.y); 148 | this.ctx.restore(); 149 | }; 150 | 151 | let Canvas = new Canvas2D(); 152 | 153 | /////////////////////////////// 154 | 155 | ////////////Ball///////////// 156 | function Ball(position){ 157 | this.position = position; 158 | this.velocity = new Vector(); 159 | } 160 | 161 | Ball.prototype.update = function(delta){ 162 | this.position.addTo(this.velocity.mult(delta)) 163 | this.velocity = this.velocity.mult(.98) 164 | } 165 | 166 | Ball.prototype.draw = function(){ 167 | Canvas.drawImage(sprites.whiteBall, this.position, BALL_ORIGIN ) 168 | } 169 | 170 | Ball.prototype.shoot = function(power, rotation){ 171 | this.velocity = new Vector(power * Math.cos(rotation), power * Math.sin(rotation)) 172 | } 173 | /////////////////////////////// 174 | 175 | ////////////Stick///////////// 176 | function Stick(position, onShoot){ 177 | this.position = position; 178 | this.rotation = 0; 179 | this.origin = STICK_ORIGIN.copy(); 180 | this.power = 0; 181 | this.onShoot = onShoot; 182 | } 183 | 184 | Stick.prototype.draw = function(){ 185 | Canvas.drawImage(sprites.stick, this.position, this.origin, this.rotation) 186 | } 187 | 188 | Stick.prototype.update = function(){ 189 | this.updateRotation(); 190 | if(Mouse.left.down){ 191 | this.increasePower(); 192 | }else if(this.power > 0){ 193 | this.shoot(); 194 | } 195 | } 196 | 197 | Stick.prototype.shoot = function(){ 198 | this.onShoot(this.power, this.rotation); 199 | this.power = 0; 200 | this.origin = SHOOT_ORIGIN.copy(); 201 | } 202 | 203 | 204 | Stick.prototype.updateRotation = function(){ 205 | let opposite = Mouse.position.y - this.position.y; 206 | let adjacent = Mouse.position.x - this.position.x; 207 | 208 | this.rotation = Math.atan2(opposite, adjacent) 209 | } 210 | 211 | Stick.prototype.increasePower = function(){ 212 | this.power += 100; 213 | this.origin.x += 5; 214 | } 215 | 216 | /////////////////////////////// 217 | 218 | 219 | ////////////game world///////////// 220 | function GameWorld(){ 221 | this.whiteBall = new Ball(new Vector(413,413)) 222 | this.stick = new Stick(new Vector(413,413), this.whiteBall.shoot.bind(this.whiteBall) ) 223 | } 224 | 225 | GameWorld.prototype.update = function(){ 226 | this.stick.update() 227 | this.whiteBall.update(DELTA) 228 | } 229 | 230 | GameWorld.prototype.draw = function(){ 231 | Canvas.drawImage(sprites.background ) 232 | this.whiteBall.draw(); 233 | this.stick.draw(); 234 | } 235 | 236 | let gameworld = new GameWorld() 237 | /////////////////////////////// 238 | 239 | 240 | function animate(){ 241 | Canvas.clear(); 242 | gameworld.update(); 243 | gameworld.draw(); 244 | requestAnimationFrame(animate); 245 | } 246 | 247 | loadAssets(animate) 248 | -------------------------------------------------------------------------------- /billiard/billiard_7_shoot/billiard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | billiard 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /billiard/billiard_8_reposition/billiard/assets/sprites/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_8_reposition/billiard/assets/sprites/background.png -------------------------------------------------------------------------------- /billiard/billiard_8_reposition/billiard/assets/sprites/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_8_reposition/billiard/assets/sprites/ball.png -------------------------------------------------------------------------------- /billiard/billiard_8_reposition/billiard/assets/sprites/stick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/billiard/billiard_8_reposition/billiard/assets/sprites/stick.png -------------------------------------------------------------------------------- /billiard/billiard_8_reposition/billiard/game.js: -------------------------------------------------------------------------------- 1 | const BALL_ORIGIN = new Vector(25,25) 2 | 3 | const STICK_ORIGIN = new Vector(970, 11); 4 | const SHOOT_ORIGIN = new Vector(950, 11); 5 | const DELTA = 1/100; 6 | 7 | ////////////load assets////////// 8 | let sprites = {}; 9 | let assetsStillLoading = 0; 10 | 11 | function loadSprite(fileName){ 12 | assetsStillLoading ++; 13 | 14 | let spriteImage = new Image() 15 | spriteImage.src = "./assets/sprites/" + fileName; 16 | 17 | spriteImage.addEventListener("load", function(){ 18 | assetsStillLoading --; 19 | }) 20 | 21 | return spriteImage; 22 | 23 | } 24 | 25 | function loadAssets(callback){ 26 | sprites.background = loadSprite("background.png") 27 | sprites.stick = loadSprite("stick.png") 28 | sprites.whiteBall = loadSprite("ball.png") 29 | 30 | assetsLoadingLoop(callback) 31 | } 32 | 33 | function assetsLoadingLoop(callback){ 34 | if(assetsStillLoading){ 35 | requestAnimationFrame(assetsLoadingLoop.bind(this, callback)) 36 | }else{ 37 | callback() 38 | } 39 | } 40 | 41 | /////////////////////////////// 42 | 43 | 44 | 45 | ////////////vector///////////// 46 | function Vector(x = 0, y = 0) { 47 | this.x = x; 48 | this.y = y; 49 | } 50 | 51 | Vector.prototype.copy = function(){ 52 | return new Vector(this.x, this.y) 53 | } 54 | 55 | Vector.prototype.mult = function(value){ 56 | return new Vector(this.x * value, this.y * value) 57 | } 58 | 59 | Vector.prototype.length = function(){ 60 | return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)) 61 | } 62 | 63 | 64 | Vector.prototype.addTo = function(vector){ 65 | this.x += vector.x; 66 | this.y += vector.y; 67 | } 68 | 69 | 70 | /////////////////////////////// 71 | 72 | ////////////mouse handler////////// 73 | function ButtonState(){ 74 | this.down = false; 75 | this.pressed = false; 76 | } 77 | 78 | function MouseHnadler(){ 79 | this.left = new ButtonState(); 80 | this.middle = new ButtonState(); 81 | this.right = new ButtonState(); 82 | 83 | this.position = new Vector(); 84 | 85 | document.addEventListener("mousemove" , handleMouseMove) 86 | document.addEventListener("mousedown" , handleMouseDown) 87 | document.addEventListener("mouseup" , handleMouseUp) 88 | } 89 | 90 | MouseHnadler.prototype.reset = function(){ 91 | this.left.pressed = false; 92 | this.middle.pressed = false; 93 | this.right.pressed = false; 94 | } 95 | 96 | function handleMouseMove(e){ 97 | Mouse.position.x = e.pageX; 98 | Mouse.position.y = e.pageY; 99 | } 100 | function handleMouseDown(e){ 101 | handleMouseMove(e) 102 | if(e.which == 1){ 103 | Mouse.left.pressed = true; 104 | Mouse.left.down = true; 105 | }else if(e.which == 2){ 106 | Mouse.middle.pressed = true; 107 | Mouse.middle.down = true; 108 | }else if(e.which == 3){ 109 | Mouse.right.pressed = true; 110 | Mouse.right.down = true; 111 | } 112 | } 113 | function handleMouseUp(e){ 114 | handleMouseMove(e) 115 | if(e.which == 1){ 116 | Mouse.left.down = false; 117 | }else if(e.which == 2){ 118 | Mouse.middle.down = false; 119 | }else if(e.which == 3){ 120 | Mouse.right.down = false; 121 | } 122 | } 123 | 124 | let Mouse = new MouseHnadler(); 125 | /////////////////////////////// 126 | 127 | 128 | ////////////canvas///////////// 129 | function Canvas2D() { 130 | this._canvas = document.getElementById("screen"); 131 | this.ctx = this._canvas.getContext("2d"); 132 | } 133 | 134 | Canvas2D.prototype.clear = function() { 135 | this.ctx.clearRect(0, 0, this._canvas.clientWidth, this._canvas.height); 136 | }; 137 | 138 | Canvas2D.prototype.drawImage = function( 139 | image, 140 | position = new Vector() , 141 | origin = new Vector() , 142 | rotation = 0 143 | ) { 144 | this.ctx.save(); 145 | this.ctx.translate(position.x, position.y); 146 | this.ctx.rotate(rotation); 147 | this.ctx.drawImage(image, -origin.x, -origin.y); 148 | this.ctx.restore(); 149 | }; 150 | 151 | let Canvas = new Canvas2D(); 152 | 153 | /////////////////////////////// 154 | 155 | ////////////Ball///////////// 156 | function Ball(position){ 157 | this.position = position; 158 | this.velocity = new Vector(); 159 | this.moving = false 160 | } 161 | 162 | Ball.prototype.update = function(delta){ 163 | this.position.addTo(this.velocity.mult(delta)) 164 | this.velocity = this.velocity.mult(.98) 165 | if( this.velocity.length() < 5){ 166 | this.velocity = new Vector(); 167 | this.moving = false; 168 | } 169 | } 170 | 171 | Ball.prototype.draw = function(){ 172 | Canvas.drawImage(sprites.whiteBall, this.position, BALL_ORIGIN ) 173 | } 174 | 175 | Ball.prototype.shoot = function(power, rotation){ 176 | this.velocity = new Vector(power * Math.cos(rotation), power * Math.sin(rotation)) 177 | this.moving = true; 178 | } 179 | /////////////////////////////// 180 | 181 | ////////////Stick///////////// 182 | function Stick(position, onShoot){ 183 | this.position = position; 184 | this.rotation = 0; 185 | this.origin = STICK_ORIGIN.copy(); 186 | this.power = 0; 187 | this.onShoot = onShoot; 188 | this.shot = false; 189 | } 190 | 191 | Stick.prototype.draw = function(){ 192 | Canvas.drawImage(sprites.stick, this.position, this.origin, this.rotation) 193 | } 194 | 195 | Stick.prototype.update = function(){ 196 | this.updateRotation(); 197 | if(Mouse.left.down){ 198 | this.increasePower(); 199 | }else if(this.power > 0){ 200 | this.shoot(); 201 | } 202 | } 203 | 204 | Stick.prototype.shoot = function(){ 205 | this.onShoot(this.power, this.rotation); 206 | this.power = 0; 207 | this.origin = SHOOT_ORIGIN.copy(); 208 | this.shot = true; 209 | } 210 | 211 | 212 | Stick.prototype.updateRotation = function(){ 213 | let opposite = Mouse.position.y - this.position.y; 214 | let adjacent = Mouse.position.x - this.position.x; 215 | 216 | this.rotation = Math.atan2(opposite, adjacent) 217 | } 218 | 219 | Stick.prototype.increasePower = function(){ 220 | this.power += 100; 221 | this.origin.x += 5; 222 | } 223 | 224 | Stick.prototype.reposition = function(position){ 225 | this.position = position.copy(); 226 | this.origin = STICK_ORIGIN.copy(); 227 | } 228 | 229 | 230 | 231 | /////////////////////////////// 232 | 233 | 234 | ////////////game world///////////// 235 | function GameWorld(){ 236 | this.whiteBall = new Ball(new Vector(413,413)) 237 | this.stick = new Stick(new Vector(413,413), this.whiteBall.shoot.bind(this.whiteBall) ) 238 | } 239 | 240 | GameWorld.prototype.update = function(){ 241 | this.stick.update() 242 | this.whiteBall.update(DELTA) 243 | if(!this.whiteBall.moving && this.stick.shot){ 244 | this.stick.reposition(this.whiteBall.position) 245 | } 246 | } 247 | 248 | GameWorld.prototype.draw = function(){ 249 | Canvas.drawImage(sprites.background ) 250 | this.whiteBall.draw(); 251 | this.stick.draw(); 252 | } 253 | 254 | let gameworld = new GameWorld() 255 | /////////////////////////////// 256 | 257 | 258 | function animate(){ 259 | Canvas.clear(); 260 | gameworld.update(); 261 | gameworld.draw(); 262 | requestAnimationFrame(animate); 263 | } 264 | 265 | loadAssets(animate) 266 | -------------------------------------------------------------------------------- /billiard/billiard_8_reposition/billiard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | billiard 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dummyProject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | dummy project 7 | 8 | 9 | 10 | 11 |
12 |

header

13 |

dummy project

14 |
15 |
16 |
17 |
18 | 19 |
20 |

main

21 | 35 |
36 |
37 | 41 | 42 | -------------------------------------------------------------------------------- /dummyProject/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | max-width: 500px; 3 | margin: 0px auto; 4 | } 5 | 6 | header, main, footer{ 7 | border: 2px solid black; 8 | padding: 30px; 9 | margin-bottom: 20px; 10 | } 11 | 12 | #to-do-list{ 13 | padding: 30px; 14 | } 15 | 16 | .to-do-section{ 17 | padding: 30px; 18 | } 19 | 20 | .to-do-section, #to-do-list, .to-do-item, .title, #header-title, .to-do-span, form{ 21 | border: 1px solid #3498db; 22 | } 23 | 24 | -------------------------------------------------------------------------------- /flappy_bird_codes/audio/die.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/flappy_bird_codes/audio/die.wav -------------------------------------------------------------------------------- /flappy_bird_codes/audio/flap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/flappy_bird_codes/audio/flap.wav -------------------------------------------------------------------------------- /flappy_bird_codes/audio/hit.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/flappy_bird_codes/audio/hit.wav -------------------------------------------------------------------------------- /flappy_bird_codes/audio/score.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/flappy_bird_codes/audio/score.wav -------------------------------------------------------------------------------- /flappy_bird_codes/audio/start.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/flappy_bird_codes/audio/start.wav -------------------------------------------------------------------------------- /flappy_bird_codes/debug.log: -------------------------------------------------------------------------------- 1 | [1227/111054.360:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | [1228/104501.945:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 3 | -------------------------------------------------------------------------------- /flappy_bird_codes/game.js: -------------------------------------------------------------------------------- 1 | 2 | var cvs = document.getElementById("mycanvas"); 3 | var ctx = cvs.getContext("2d"); 4 | 5 | var DEGREE = Math.PI / 180 6 | var frames = 0; 7 | 8 | var sprite = new Image(); 9 | sprite.src = "img/sprite.png"; 10 | 11 | var SCORE = new Audio(); 12 | SCORE.src = "audio/score.wav"; 13 | 14 | var FLAP = new Audio(); 15 | FLAP.src = "audio/flap.wav"; 16 | 17 | var HIT = new Audio(); 18 | HIT.src = "audio/hit.wav"; 19 | 20 | var DIE = new Audio(); 21 | DIE.src = "audio/die.wav"; 22 | 23 | var START = new Audio(); 24 | START.src = "audio/start.wav"; 25 | 26 | var state = { 27 | current : 0, 28 | getReady : 0, 29 | game : 1, 30 | over : 2 31 | } 32 | 33 | function clickHandler(){ 34 | switch (state.current) { 35 | case state.getReady: 36 | START.play() 37 | state.current = state.game; 38 | break; 39 | case state.game: 40 | FLAP.play() 41 | bird.flap(); 42 | break; 43 | default: 44 | bird.speed = 0; 45 | bird.rotation = 0; 46 | pipes.position = []; 47 | score.value = 0; 48 | state.current = state.getReady; 49 | break; 50 | } 51 | } 52 | 53 | document.addEventListener("click", clickHandler) 54 | document.addEventListener("keydown", function(e){ 55 | if(e.which == 32){ 56 | clickHandler(); 57 | } 58 | }) 59 | 60 | var bg = { 61 | sX: 0, 62 | sY: 0, 63 | w: 275, 64 | h: 226, 65 | x: 0, 66 | y: cvs.height - 226, 67 | draw : function(){ 68 | ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h) 69 | ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x + this.w, this.y, this.w, this.h) 70 | } 71 | } 72 | 73 | var fg = { 74 | sX: 276, 75 | sY: 0, 76 | w: 224, 77 | h: 112, 78 | x: 0, 79 | dx: 2, 80 | y: cvs.height - 112, 81 | draw : function(){ 82 | ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h) 83 | ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x + this.w, this.y, this.w, this.h) 84 | }, 85 | update : function(){ 86 | if(state.current == state.game){ 87 | this.x = (this.x - this.dx) % (this.w/2); 88 | } 89 | } 90 | } 91 | 92 | var pipes = { 93 | top : { 94 | sX : 553, 95 | sY : 0, 96 | }, 97 | bottom : { 98 | sX : 502, 99 | sY : 0, 100 | }, 101 | w : 53, 102 | h : 400, 103 | dx : 2, 104 | gap : 80, 105 | position : [], 106 | maxYPos : -150, 107 | draw : function(){ 108 | for(let i = 0; i < this.position.length; i++){ 109 | let p = this.position[i] 110 | let topYPos = p.y; 111 | let bottomYPos = p.y + this.h + this.gap; 112 | ctx.drawImage(sprite, this.top.sX, this.top.sY, this.w, this.h, p.x, topYPos, this.w, this.h) 113 | ctx.drawImage(sprite, this.bottom.sX, this.bottom.sY, this.w, this.h, p.x, bottomYPos, this.w, this.h) 114 | 115 | } 116 | }, 117 | update : function(){ 118 | if(state.current != state.game) return; 119 | if(frames % 100 == 0){ 120 | this.position.push({ 121 | x: cvs.width , 122 | y: this.maxYPos * (Math.random() +1) 123 | }) 124 | } 125 | 126 | for(let i = 0; i < this.position.length; i++){ 127 | let p = this.position[i] 128 | p.x -= this.dx 129 | 130 | let bottomPipesPos = p.y + this.h + this.gap; 131 | 132 | if(bird.x + bird.radius > p.x && bird.x - bird.radius < p.x + this.w && bird.y + bird.radius > p.y 133 | && bird.y - bird.radius < p.y + this.h ){ 134 | HIT.play() 135 | state.current = state.over; 136 | } 137 | 138 | if(bird.x + bird.radius > p.x && bird.x - bird.radius < p.x + this.w && bird.y + bird.radius > bottomPipesPos 139 | && bird.y - bird.radius < bottomPipesPos + this.h ){ 140 | HIT.play() 141 | state.current = state.over; 142 | } 143 | 144 | if(p.x + this.w <= 0){ 145 | this.position.shift() 146 | score.value += 1; 147 | SCORE.play() 148 | score.best = Math.max(score.value, score.best) 149 | localStorage.setItem("best", score.best) 150 | } 151 | } 152 | 153 | } 154 | } 155 | 156 | var getReady = { 157 | sX: 0, 158 | sY: 228, 159 | w: 173, 160 | h: 152, 161 | x: cvs.width/2 - 173/2, 162 | y: 80, 163 | draw : function(){ 164 | if(state.current == state.getReady){ 165 | ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h) 166 | } 167 | } 168 | } 169 | 170 | var gameOver = { 171 | sX: 175, 172 | sY: 228, 173 | w: 225, 174 | h: 202, 175 | x: cvs.width/2 - 225/2, 176 | y: 90, 177 | draw : function(){ 178 | if(state.current == state.over){ 179 | ctx.drawImage(sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h) 180 | } 181 | } 182 | } 183 | 184 | var bird = { 185 | animation : [ 186 | {sX: 276, sY: 112}, 187 | {sX: 276, sY: 139}, 188 | {sX: 276, sY: 164}, 189 | {sX: 276, sY: 139}, 190 | ] 191 | , 192 | w: 34, 193 | h: 26, 194 | x: 50, 195 | y: 150, 196 | speed: 0, 197 | gravity: 0.25, 198 | animationIndex: 0, 199 | rotation : 0, 200 | jump : 4.6, 201 | radius : 12, 202 | draw : function(){ 203 | let bird = this.animation[this.animationIndex] 204 | ctx.save(); 205 | ctx.translate(this.x, this.y); 206 | ctx.rotate(this.rotation); 207 | ctx.drawImage(sprite, bird.sX, bird.sY, this.w, this.h, - this.w/2, - this.h/2, this.w, this.h) 208 | ctx.restore(); 209 | }, 210 | update : function(){ 211 | let period = state.current == state.getReady ? 10 : 5; 212 | this.animationIndex += frames % period == 0 ? 1 : 0; 213 | this.animationIndex = this.animationIndex % this.animation.length 214 | if(state.current == state.getReady){ 215 | this.y = 150; 216 | }else{ 217 | this.speed += this.gravity; 218 | this.y += this.speed; 219 | if(this.speed < this.jump){ 220 | this.rotation = - 25 * DEGREE; 221 | }else{ 222 | this.rotation = 90 * DEGREE; 223 | } 224 | } 225 | 226 | if(this.y + this.h/2 >= cvs.height - fg.h){ 227 | this.y = cvs.height - fg.h - this.h/2; 228 | this.animationIndex = 1; 229 | if(state.current == state.game){ 230 | DIE.play(); 231 | state.current = state.over; 232 | } 233 | } 234 | }, 235 | flap : function(){ 236 | this.speed = - this.jump; 237 | } 238 | } 239 | 240 | var score = { 241 | best : parseInt(localStorage.getItem("best")) || 0, 242 | value : 0, 243 | draw : function(){ 244 | ctx.fillStyle = "#FFF" 245 | ctx.strokeStyle = "#000" 246 | 247 | 248 | if(state.current == state.game){ 249 | ctx.lineWidth = 2; 250 | ctx.font = "35px IMPACT"; 251 | 252 | ctx.fillText(this.value, cvs.width/2, 50) 253 | ctx.strokeText(this.value, cvs.width/2, 50) 254 | 255 | }else if(state.current == state.over){ 256 | ctx.font = "25px IMPACT"; 257 | 258 | ctx.fillText(this.value, 225, 186) 259 | ctx.strokeText(this.value, 225, 186) 260 | 261 | ctx.fillText(this.best, 225, 228) 262 | ctx.strokeText(this.best, 225, 228) 263 | } 264 | } 265 | } 266 | 267 | function update(){ 268 | bird.update(); 269 | fg.update(); 270 | pipes.update(); 271 | } 272 | 273 | function draw(){ 274 | ctx.fillStyle = "#70c5ce" 275 | ctx.fillRect(0, 0, cvs.width, cvs.height) 276 | bg.draw() 277 | pipes.draw() 278 | fg.draw() 279 | bird.draw() 280 | getReady.draw() 281 | gameOver.draw() 282 | score.draw() 283 | 284 | } 285 | 286 | function animate(){ 287 | update() 288 | draw() 289 | frames ++; 290 | requestAnimationFrame(animate) 291 | } 292 | 293 | animate() 294 | -------------------------------------------------------------------------------- /flappy_bird_codes/img/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohamad-sw/herojs-codes/eff2510d4191293669f4a4c155dbcf7f8fb36103/flappy_bird_codes/img/sprite.png -------------------------------------------------------------------------------- /flappy_bird_codes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /hashProject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 |

HOME

14 |
15 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /hashProject/script.js: -------------------------------------------------------------------------------- 1 | router() 2 | 3 | window.addEventListener("hashchange",(e)=>{ 4 | router() 5 | }) 6 | 7 | function router(){ 8 | 9 | switch (location.hash) { 10 | case "": 11 | render({title: "HOME", color: "red", href:"#home"}) 12 | break; 13 | case "#home": 14 | render({title: "HOME", color: "red", href:"#home"}) 15 | break; 16 | case "#search": 17 | render({title: "SEARCH", color: "blue", href:"#search"}) 18 | break; 19 | case "#likes": 20 | render({title: "LIKES", color: "yellow", href:"#likes"}) 21 | break; 22 | case "#profile": 23 | render({title: "PROFILE", color: "pink", href:"#profile"}) 24 | break; 25 | 26 | } 27 | } 28 | 29 | function render(data){ 30 | document.querySelector("h1").innerText = data.title; 31 | document.querySelector("main").style.backgroundColor = data.color; 32 | document.querySelectorAll("a").forEach(element=>{ 33 | if(element.href.includes(data.href)){ 34 | element.style.color = "black" 35 | }else{ 36 | element.style.color = "#666" 37 | } 38 | }) 39 | 40 | } -------------------------------------------------------------------------------- /hashProject/style.css: -------------------------------------------------------------------------------- 1 | main,nav{ 2 | max-width: 400px; 3 | margin: 0px auto; 4 | display: flex; 5 | } 6 | 7 | main{ 8 | background-color: red; 9 | min-height: 90vh; 10 | position: relative; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | nav{ 16 | background-color: white; 17 | min-height: 50px; 18 | justify-content: space-around; 19 | align-items: center; 20 | } 21 | 22 | 23 | nav a{ 24 | list-style-type: none; 25 | color: #666; 26 | cursor: pointer; 27 | } 28 | 29 | -------------------------------------------------------------------------------- /stateProject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 |

HOME

14 |
15 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /stateProject/script.js: -------------------------------------------------------------------------------- 1 | document.querySelector("nav").addEventListener("click", (e)=>{ 2 | // if user clicks on nav 3 | if(e.target.nodeName != "I") return 4 | let data; 5 | switch (e.target.getAttributeNode("item-id").value) { 6 | case "home": 7 | data = {title:"HOME",color:"red",itemId : "home"} 8 | update(data) 9 | history.pushState(data , "home", "/home") 10 | break; 11 | case "search": 12 | data = {title:"SEARCH",color:"blue",itemId : "search"} 13 | update(data) 14 | history.pushState(data , "search", "search") 15 | break; 16 | case "likes": 17 | data = {title:"LIKES",color:"yellow",itemId : "likes"} 18 | update(data) 19 | history.pushState(data , "likes", "likes") 20 | break; 21 | default: 22 | data = {title:"PROFILE",color:"pink",itemId : "profile"} 23 | update(data) 24 | history.pushState(data , "profile", "profile") 25 | } 26 | }) 27 | 28 | window.addEventListener("popstate",e=>{ 29 | if(history.state){ 30 | update(history.state) 31 | }else{ 32 | update({title:"HOME",color:"red",itemId : "home"}) 33 | } 34 | }) 35 | 36 | function update(data){ 37 | document.querySelector("h1").innerText = data.title; 38 | document.querySelector("main").style.backgroundColor = data.color; 39 | document.querySelectorAll("i").forEach(element=>{ 40 | element.style.color = "#666" 41 | }) 42 | document.querySelector(`i[item-id=${data.itemId}]`).style.color = "black" 43 | } -------------------------------------------------------------------------------- /stateProject/style.css: -------------------------------------------------------------------------------- 1 | main,nav{ 2 | max-width: 400px; 3 | margin: 0px auto; 4 | display: flex; 5 | } 6 | 7 | main{ 8 | background-color: red; 9 | min-height: 90vh; 10 | position: relative; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | nav{ 16 | background-color: white; 17 | min-height: 50px; 18 | justify-content: space-around; 19 | align-items: center; 20 | } 21 | 22 | 23 | nav i{ 24 | list-style-type: none; 25 | color: #666; 26 | cursor: pointer; 27 | } 28 | 29 | -------------------------------------------------------------------------------- /to-do/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TO DO 7 | 8 | 9 | 10 |
11 |

TO DO LIST

12 |
13 | 14 |
15 |
16 |
17 |

your list

18 | 37 |
38 |
39 |
40 | 41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /to-do/script.js: -------------------------------------------------------------------------------- 1 | let list = document.querySelector("#to-do-list") 2 | let addInput = document.querySelector("#add-form input") 3 | let searchInput = document.querySelector("#search-form input") 4 | let addBtn = document.querySelector("#add-form button") 5 | 6 | list.addEventListener("click",(e)=>{ 7 | if(e.target.nodeName == "SPAN"){ 8 | e.target.parentNode.remove() 9 | if(list.children.length == 0){ 10 | listEmptyMsg = document.createElement("div") 11 | listEmptyMsg.style.textAlign = "center" 12 | listEmptyMsg.style.color = "#333" 13 | listEmptyMsg.innerText = "your list is empty" 14 | listEmptyMsg.id = "emptyMsg" 15 | list.appendChild(listEmptyMsg) 16 | } 17 | } 18 | }) 19 | 20 | 21 | addBtn.addEventListener("click", (e)=>{ 22 | e.preventDefault() 23 | if(!addInput.value) 24 | return 25 | 26 | if(document.querySelector("#emptyMsg")){ 27 | document.querySelector("#emptyMsg").remove() 28 | } 29 | 30 | list.appendChild(createListItem(addInput.value)) 31 | addInput.value = "" 32 | }) 33 | 34 | 35 | searchInput.addEventListener("input", (e)=>{ 36 | Array.from(list.children).forEach(element => { 37 | if(document.querySelector("#emptyMsg")){ 38 | return 39 | } 40 | if(!element.querySelector(".title").innerText.toLowerCase().includes(e.target.value.toLowerCase())){ 41 | element.style.display = "none" 42 | }else 43 | element.style.display = "flex" 44 | }); 45 | }) 46 | 47 | 48 | function createListItem(itemValue){ 49 | let item = document.createElement("li") 50 | let title = document.createElement("span") 51 | let btn = document.createElement("span") 52 | 53 | item.className = "to-do-item" 54 | 55 | title.className = "title" 56 | title.innerText = itemValue 57 | 58 | btn.className = "delete-btn" 59 | btn.innerText = "delete" 60 | 61 | item.appendChild(title) 62 | item.appendChild(btn) 63 | 64 | return item 65 | 66 | } 67 | -------------------------------------------------------------------------------- /to-do/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-width: 500px; 3 | margin: 0px auto; 4 | } 5 | 6 | header { 7 | text-align: center; 8 | padding: 30px 0px; 9 | color: #2980b9; 10 | font-family: Impact; 11 | } 12 | 13 | #search-form input[type="text"] { 14 | padding: 10px; 15 | width: 100%; 16 | font-size: 1.3em; 17 | } 18 | 19 | #to-do-list { 20 | list-style-type: none; 21 | padding-left: 0; 22 | } 23 | 24 | #to-do-list li { 25 | display: flex; 26 | justify-content: space-between; 27 | padding-bottom: 10px; 28 | font-size: 1.2em; 29 | } 30 | 31 | 32 | .delete-btn { 33 | background-color: #3498db; 34 | color: white; 35 | padding: 5px; 36 | border-radius: 5px; 37 | cursor: pointer; 38 | } 39 | 40 | .add-to-do { 41 | padding-top: 30px; 42 | } 43 | 44 | #add-form { 45 | display: flex; 46 | } 47 | 48 | #add-form input[type="text"] { 49 | display: block; 50 | width: 100%; 51 | padding: 10px; 52 | font-size: 1.3em; 53 | } 54 | 55 | #add-form button { 56 | background: none; 57 | border: 3px solid #2980b9; 58 | color: #2980b9; 59 | font-family: Impact; 60 | outline: none; 61 | font-size: 1.3em; 62 | cursor: pointer; 63 | } 64 | 65 | footer { 66 | padding-top: 50px; 67 | } 68 | 69 | footer a { 70 | text-decoration: none; 71 | color: rgba(0, 0, 0, 0.4); 72 | font-family: Impact; 73 | } 74 | --------------------------------------------------------------------------------