├── run.mp3 ├── .gitattributes ├── dead.mp3 ├── flame.gif ├── jump.mp3 ├── Dead (1).png ├── Dead (2).png ├── Dead (3).png ├── Dead (4).png ├── Dead (5).png ├── Dead (6).png ├── Dead (7).png ├── Dead (8).png ├── Dead (9).png ├── Jump (1).png ├── Jump (2).png ├── Jump (3).png ├── Jump (4).png ├── Jump (5).png ├── Jump (6).png ├── Jump (7).png ├── Jump (8).png ├── Jump (9).png ├── Run (1).png ├── Run (2).png ├── Run (3).png ├── Run (4).png ├── Run (5).png ├── Run (6).png ├── Run (7).png ├── Run (8).png ├── Dead (10).png ├── Jump (10).png ├── Jump (11).png ├── Jump (12).png ├── background.png ├── screenshot.png ├── index.html ├── README.md ├── LICENSE ├── style.css └── stript.js /run.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/run.mp3 -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /dead.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/dead.mp3 -------------------------------------------------------------------------------- /flame.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/flame.gif -------------------------------------------------------------------------------- /jump.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/jump.mp3 -------------------------------------------------------------------------------- /Dead (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (1).png -------------------------------------------------------------------------------- /Dead (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (2).png -------------------------------------------------------------------------------- /Dead (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (3).png -------------------------------------------------------------------------------- /Dead (4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (4).png -------------------------------------------------------------------------------- /Dead (5).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (5).png -------------------------------------------------------------------------------- /Dead (6).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (6).png -------------------------------------------------------------------------------- /Dead (7).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (7).png -------------------------------------------------------------------------------- /Dead (8).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (8).png -------------------------------------------------------------------------------- /Dead (9).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (9).png -------------------------------------------------------------------------------- /Jump (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (1).png -------------------------------------------------------------------------------- /Jump (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (2).png -------------------------------------------------------------------------------- /Jump (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (3).png -------------------------------------------------------------------------------- /Jump (4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (4).png -------------------------------------------------------------------------------- /Jump (5).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (5).png -------------------------------------------------------------------------------- /Jump (6).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (6).png -------------------------------------------------------------------------------- /Jump (7).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (7).png -------------------------------------------------------------------------------- /Jump (8).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (8).png -------------------------------------------------------------------------------- /Jump (9).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (9).png -------------------------------------------------------------------------------- /Run (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Run (1).png -------------------------------------------------------------------------------- /Run (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Run (2).png -------------------------------------------------------------------------------- /Run (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Run (3).png -------------------------------------------------------------------------------- /Run (4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Run (4).png -------------------------------------------------------------------------------- /Run (5).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Run (5).png -------------------------------------------------------------------------------- /Run (6).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Run (6).png -------------------------------------------------------------------------------- /Run (7).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Run (7).png -------------------------------------------------------------------------------- /Run (8).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Run (8).png -------------------------------------------------------------------------------- /Dead (10).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Dead (10).png -------------------------------------------------------------------------------- /Jump (10).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (10).png -------------------------------------------------------------------------------- /Jump (11).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (11).png -------------------------------------------------------------------------------- /Jump (12).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/Jump (12).png -------------------------------------------------------------------------------- /background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/background.png -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lakshithamadumal/2D-Running-Game/HEAD/screenshot.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Red Hat Boy 5 | 6 | 7 | 8 | 9 |
10 | 11 |

0

12 | 13 | 14 |
15 |
16 |
Game Over
17 |
Your Score
18 |
0
19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 2D Running Game 🏃‍♂️💨 2 | 3 | A **2D Running Game** is a fast-paced side-scroller where your character dashes forward, avoiding obstacles and collecting power-ups 🏃‍♂️💨. With simple controls, this game offers endless fun and excitement! 🚀🎮 4 | 5 | ## Technologies Used 🛠️ 6 | - **HTML** 🌐 7 | - **CSS** 🎨 8 | - **JavaScript** 💻 9 | - **VS Code** 🖥️ 10 | 11 | ## Features ✨ 12 | - Side-scrolling action ⬅️➡️ 13 | - Character movement and obstacle dodging 🏃‍♂️💨 14 | - Power-ups collection 💡 15 | - Simple and fun gameplay 🎮 16 | 17 | ## Screenshot 📸 18 | ![2D Running Game Screenshot](screenshot.png) 19 | 20 | 🌍 Live Demo: [![Vercel](https://img.shields.io/badge/Live_Demo-000000?logo=vercel&logoColor=white)](https://2d-running-game.vercel.app/) 21 | 22 | ## How to Play 🎮 23 | 1. Use the arrow keys (or predefined keys) to move your character ⬆️⬇️⬅️➡️. 24 | 2. Dodge obstacles and collect power-ups to boost your score! 🚧💎 25 | 3. Try to go as far as you can without hitting any obstacles! 🏁 26 | 27 | Enjoy the game! 🎉 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Lakshitha Madumal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .b{ 2 | width: 100%; 3 | height: 100vh; 4 | background-image: url("background.png"); 5 | background-size: cover; 6 | background-repeat: repeat-x; 7 | overflow-x: hidden; 8 | position: absolute; 9 | } 10 | 11 | .body{ 12 | margin: 0px; 13 | } 14 | 15 | .f{ 16 | height: 150px; 17 | margin-top: 520px; 18 | position: absolute; 19 | } 20 | 21 | .boy{ 22 | height: 270px; 23 | margin-top: 370px; 24 | position: absolute; 25 | } 26 | 27 | .score{ 28 | position: absolute; 29 | margin-left: 40px; 30 | font-family: Arial, Helvetica, sans-serif; 31 | font-weight: bold; 32 | font-size: 100px; 33 | margin-top: 10px; 34 | } 35 | 36 | .end{ 37 | position: absolute; 38 | background-image: url(background.png); 39 | width: 100%; 40 | height: 100vh; 41 | background-size: cover; 42 | justify-content: center; 43 | display: flex; 44 | align-items: center; 45 | color: rgb(0, 0, 0); 46 | flex-direction: column; 47 | font-size: 150px; 48 | font-weight: bold; 49 | visibility: hidden; 50 | } 51 | 52 | .btn{ 53 | width: 200px; 54 | height: 50px; 55 | font-size: 30px; 56 | border-radius: 8px; 57 | background-color: rgb(255, 5, 5); 58 | color: rgb(255, 255, 255); 59 | font-weight: bold; 60 | border-style: none; 61 | font-family:monospace; 62 | cursor: pointer; 63 | } 64 | 65 | .font{ 66 | font-family: Centaur; 67 | } -------------------------------------------------------------------------------- /stript.js: -------------------------------------------------------------------------------- 1 | var rs=new Audio("run.mp3"); 2 | rs.loop=true; 3 | var js=new Audio("jump.mp3"); 4 | var ds=new Audio("dead.mp3"); 5 | 6 | var rw=0; //Run worker 7 | var b=0; //background 8 | var bw=0; //background worker 9 | var fw=0; //flame worker 10 | var fid=0; 11 | var j =1; //jump 12 | var u =0; //score 13 | var sw=0; //score worker 14 | var jw=0; //jump worker 15 | var mt=370; //බාධකයේ උස 16 | var p =1000; 17 | var img=document.getElementById("boy"); //boy 18 | var r = 1; //run 19 | var d = 1; //dead 20 | var dw = 0; //dead worker 21 | 22 | 23 | function key(event){ 24 | if(event.which==13){ 25 | if(rw==0){ 26 | fid=f() 27 | fw=setInterval(move,80); 28 | rw=setInterval(run,100); 29 | rs.play(); 30 | bw=setInterval(back,80); 31 | sw=setInterval(score,1000); 32 | } 33 | } 34 | if(event.which==32){ 35 | if(jw==0){ 36 | clearInterval(rw); 37 | rs.pause(); 38 | jw=setInterval(jump,100); 39 | js.play(); 40 | rw=-1; 41 | } 42 | } 43 | } 44 | 45 | 46 | function f(){ 47 | for(var y=0;y<500;y++){ 48 | var a=document.createElement("img"); 49 | a.src="flame.gif"; 50 | a.className="f"; 51 | a.style.marginLeft=p+"px"; 52 | 53 | if(y<=5){ 54 | p=p+700; 55 | } 56 | if(y>=6){ 57 | p=p+450; 58 | } 59 | 60 | a.id="d"+y; 61 | document.getElementById("b").appendChild(a); 62 | } 63 | } 64 | 65 | function move(){ 66 | for(var y=0; y<100;y++){ 67 | var z =getComputedStyle(document.getElementById("d"+y)); 68 | var w = parseInt(z.marginLeft) - 20; 69 | document.getElementById("d"+y).style.marginLeft=w+"px"; 70 | 71 | if(w>80 & w<=210){ 72 | if(mt>300){ 73 | clearInterval(rw); 74 | clearInterval(jw); 75 | jw=-1; 76 | clearInterval(fw); 77 | clearInterval(bw); 78 | clearInterval(sw); 79 | dw=setInterval(dead,100); 80 | rs.pause(); 81 | ds.play(); 82 | } 83 | } 84 | } 85 | } 86 | 87 | 88 | function run(){ 89 | r=r+1; 90 | if(r==9){ 91 | r=1; 92 | } 93 | img.src="Run ("+r+").png"; 94 | } 95 | 96 | 97 | function back(){ 98 | b=b-20 99 | document.getElementById("b").style.backgroundPositionX=b+"px"; 100 | } 101 | 102 | 103 | function jump(){ 104 | if(j<=6){ 105 | mt = mt - 40; 106 | } 107 | if(j>=7){ 108 | mt = mt + 40; 109 | } 110 | img.style.marginTop= mt + "px"; 111 | 112 | j=j+1; 113 | if(j==13){ 114 | j=1; 115 | clearInterval(jw); 116 | rw=0; 117 | rw=setInterval(run,100); 118 | rs.play(); 119 | jw=0; 120 | 121 | if(fid==0){ 122 | fid=f(); 123 | } 124 | if(fw==0){ 125 | fw=setInterval(move,80); 126 | } 127 | if(bw==0){ 128 | bw=setInterval(back,80); 129 | } 130 | if(sw==0){ 131 | sw=setInterval(score,1000); 132 | } 133 | } 134 | img.src="Jump ("+j+").png" 135 | } 136 | 137 | 138 | function score(){ 139 | u=u+5 140 | document.getElementById("score").innerHTML=u; 141 | } 142 | 143 | 144 | function dead(){ 145 | d=d+1; 146 | if(d==11){ 147 | d=10; 148 | img.style.marginTop="390px"; 149 | document.getElementById("end").style.visibility="visible"; 150 | document.getElementById("endscore").innerHTML=u; 151 | } 152 | img.src="Dead ("+d+").png"; 153 | } 154 | 155 | 156 | function re(){ 157 | location.reload(); 158 | } 159 | --------------------------------------------------------------------------------