├── bg.jpg
├── music.mp3
├── scream.mp3
├── sprites.png
├── playerSprite.png
├── style.css
├── README.md
├── player.js
├── roguelike.html
├── basicFunction.js
├── game.js
└── canvasdisplay.js


/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TanviKumar/roguelike/HEAD/bg.jpg


--------------------------------------------------------------------------------
/music.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TanviKumar/roguelike/HEAD/music.mp3


--------------------------------------------------------------------------------
/scream.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TanviKumar/roguelike/HEAD/scream.mp3


--------------------------------------------------------------------------------
/sprites.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TanviKumar/roguelike/HEAD/sprites.png


--------------------------------------------------------------------------------
/playerSprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TanviKumar/roguelike/HEAD/playerSprite.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | 	body{
 2 | 		margin: 0;
 3 | 		padding: 0;
 4 | 		background-image: url("bg.jpg");
 5 | 		font-family: 'Shadows Into Light', cursive;
 6 | 	}
 7 |     canvas{
 8 | 		margin: auto;
 9 | 		padding: 0;
10 | 		display: block;
11 | 		position: absolute;
12 | 		top: 0;
13 | 		bottom: 0;
14 | 		left: 0;
15 | 		right: 0;
16 |         border: 4px dotted #7fffd4;
17 |     }
18 | 
19 | 	div{
20 | 		text-align: center;
21 | 		margin: 0 auto;
22 | 	}
23 | 	span{
24 | 		text-decoration: bold;
25 | 		font-size: 200%;
26 | 		color: white;
27 | 	}


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Roguelike Game 
 2 | Made using HTML, CSS and JavaScript. In order to run this game, git clone and run the file roguelike.html on your browser.
 3 | ## Instructions
 4 | + Use the arrow keys for player movement.
 5 | + Avoid the purple demons.
 6 | + Collect the yellow flasks for 100 points
 7 | + Blue flasks give you 500 points and let you run over demons for 20 seconds.
 8 | + There are 3 levels to the game.
 9 | + Each level has a time limit. (Reduces for each level)
10 | + For each second saved you receive 10 points.
11 | + Reach the blue hole which is the exit.
12 | + Failure to complete a level in time or allowing a demon to reach you leads you back to the start.
13 | 


--------------------------------------------------------------------------------
/player.js:
--------------------------------------------------------------------------------
 1 | function Player(){
 2 | 	this.points = 0;
 3 | 	this.timePoints =0;
 4 | 	this.direction="down";
 5 | 	this.level=1;
 6 | }
 7 | 
 8 | 
 9 | Player.prototype.directionAssign= function(){
10 | 	var dirNum;
11 | 	switch(this.direction){
12 | 		case "down"  : dirNum=0;
13 | 					    break;
14 | 		case "left"  : dirNum=1;
15 | 						break;
16 | 		case "right" : dirNum=2;
17 | 						break;
18 | 		case "up"    : dirNum=3;
19 | 						break;
20 | 
21 | 	}
22 | 	return dirNum;
23 | }
24 | 
25 | 
26 | Player.prototype.updatePoint = function(value){
27 | 	this.points+=value;
28 | 	document.getElementById("points").innerHTML = this.points.toString();
29 | }
30 | 
31 | Player.prototype.updateLevel = function(){
32 | 	document.getElementById("level").innerHTML = this.level.toString();
33 | }
34 | 


--------------------------------------------------------------------------------
/roguelike.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<title>Roguelike</title>
 4 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
 5 | 	<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
 6 | 	<link rel="stylesheet" type="text/css" href="style.css">
 7 | 
 8 | 
 9 | </head>
10 | <body>
11 | 
12 | 	<div>
13 | 		<span>Time Remaining : </span>
14 | 		<span id="time"></span>
15 | 		<span>   ||  Points : </span>
16 | 		<span id="points"> 00</span>
17 | 		<span>   ||  Level : </span>
18 | 		<span id="level"> 1</span>
19 | 	</div>
20 | 	<script type="text/javascript" src="canvasdisplay.js"></script>
21 | 	<script type="text/javascript" src="player.js"></script>
22 | 	<script type="text/javascript" src="game.js"></script>
23 | 	<script type="text/javascript" src="basicFunction.js"></script>
24 | 	<script type="text/javascript">
25 | 		alert("Arrow keys to move. Stay clear of purple demons. Yellow jars worth 100 points. Blue jars worth 500 points and allow let you go over demons for 20 seconds. Each second is worth 10 points. ")
26 | 	</script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/basicFunction.js:
--------------------------------------------------------------------------------
 1 | //Global Variable declarations
 2 | var playerSprite= document.createElement("img");
 3 | 	playerSprite.src="playerSprite.png";
 4 | var backgroundSprite = document.createElement("img");
 5 | 	backgroundSprite.src="sprites.png";
 6 | var directionKey = 37;
 7 | var myReq;
 8 | var display = document.getElementById("time");
 9 | var last;
10 | var now=0,dt;
11 | 
12 | var scream = new Audio("scream.mp3");
13 | scream.addEventListener("ended", function(){
14 | 	music.play();
15 | });
16 | //For the music
17 | var music = new Audio("music.mp3");
18 | music.addEventListener("ended", function() {
19 | this.currentTime = 0;
20 | 	this.play();
21 | }, false);
22 | music.play();
23 | 
24 | //Returns Time
25 | function timestamp(){
26 | 	return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
27 | }
28 | 
29 | function onLoad(){
30 | 	last= timestamp();
31 | 	var gameObject = new Game();
32 | 	gameObject.canvasObject.assignMap();
33 | 	gameObject.playerObject.level = document.getElementById("level").innerHTML;
34 | 	gameObject.playerObject.points = Number(document.getElementById("points").innerHTML);
35 | 	gameObject.duration = (4.5 - gameObject.playerObject.level*0.5)*60;
36 | 	gameObject.startLoop();
37 | 
38 | }
39 | 
40 | function keypress(e){
41 | 	e=e|| window.event;
42 | 	switch(e.keyCode){
43 | 		case 37   : directionKey = 37;
44 | 					break;
45 | 		case 38   : directionKey=38;
46 | 					break;
47 | 		case 39   : directionKey=39;
48 | 					break;
49 | 		case 40   : directionKey=40;
50 | 					break;
51 | 	}
52 | }
53 | 
54 | 
55 | window.addEventListener("load", onLoad);
56 | window.addEventListener("keydown",keypress);
57 | 


--------------------------------------------------------------------------------
/game.js:
--------------------------------------------------------------------------------
  1 | function Game(){
  2 | 	this.demontimerCount = 0;
  3 | 	this.playerObject= new Player();
  4 | 	this.canvasObject= new CanvasDisplay();
  5 | 	this.timerCount=0;
  6 | 	this.boosterCount=0;
  7 | 	this.boosterSet = false;
  8 | 	this.duration =240;
  9 | 
 10 | };
 11 | 
 12 | Game.prototype.timer = function(){
 13 | 	this.duration--;
 14 | 	var minutes , seconds;
 15 | 	minutes = parseInt(this.duration / 60, 10);
 16 | seconds = parseInt(this.duration % 60, 10);
 17 | minutes = minutes < 10 ? "0" + minutes : minutes;
 18 |     seconds = seconds < 10 ? "0" + seconds : seconds;
 19 |     display.innerHTML = minutes + ":" + seconds;
 20 |     this.playerObject.timePoints = this.duration*10;
 21 |     if(this.duration<0){
 22 | 	this.loser();
 23 | 	window.cancelAnimationFrame(myReq);
 24 | 	onLoad();
 25 |     }
 26 | }
 27 | 
 28 | 
 29 | Game.prototype.drawFn = function(){
 30 | 	this.canvasObject.drawFrame();
 31 | 	var dirNum = this.playerObject.directionAssign();
 32 | 	this.canvasObject.drawPlayer(dirNum);
 33 | 	this.playerObject.updateLevel();
 34 | }
 35 | 
 36 | Game.prototype.changeBasics = function(){
 37 | 	this.canvasObject.moveCount++;
 38 | 	this.canvasObject.moveCount%=4;
 39 | 	directionKey=0;
 40 | }
 41 | 
 42 | Game.prototype.changePosition= function(){
 43 | 	switch(directionKey){
 44 | 		case 37   : if(this.canvasObject.yValue>0&&this.canvasObject.map[this.canvasObject.xValue][this.canvasObject.yValue-1]!=0)
 45 | 						this.canvasObject.yValue--;
 46 | 					this.playerObject.direction="left";
 47 | 					this.changeBasics();
 48 | 					break;
 49 | 		case 38   : if(this.canvasObject.xValue>0&&this.canvasObject.map[this.canvasObject.xValue-1][this.canvasObject.yValue]!=0)
 50 | 						this.canvasObject.xValue--;
 51 | 					this.playerObject.direction="up";
 52 | 					this.changeBasics();
 53 | 					break;
 54 | 		case 39   : if(this.canvasObject.yValue<this.canvasObject.length-1&&	this.canvasObject.map[this.canvasObject.xValue][this.canvasObject.yValue+1]!=0)
 55 | 						this.canvasObject.yValue++;
 56 | 					this.playerObject.direction="right";
 57 | 					this.changeBasics();
 58 | 					break;
 59 | 		case 40   : if(this.canvasObject.xValue<this.canvasObject.width-1&&this.canvasObject.map[this.canvasObject.xValue+1][this.canvasObject.yValue]!=0)
 60 | 						this.canvasObject.xValue++;
 61 | 					this.playerObject.direction="down";
 62 | 					this.changeBasics();
 63 | 					break;
 64 | 	}
 65 | }
 66 | 
 67 | Game.prototype.loser = function(){
 68 | 	alert("Feil. Back to square 1.")
 69 | 	this.playerObject.level=1;
 70 | 	document.getElementById("level").innerHTML= this.playerObject.level;
 71 | 	this.playerObject.updatePoint(-this.playerObject.points);
 72 | }
 73 | 
 74 | Game.prototype.nextLevel = function(){
 75 | 	if(this.playerObject.level>3){
 76 | 		alert("Great Job! " + document.getElementById("points").innerHTML);
 77 | 		this.playerObject.level=1;
 78 | 		this.playerObject.updateLevel();
 79 | 		document.getElementById("points").innerHTML=00;
 80 | 		onLoad();
 81 | 	}
 82 | 	else{
 83 | 		alert("Next Level");
 84 | 		this.playerObject.updateLevel();
 85 | 		onLoad();
 86 | 
 87 | 	}
 88 | }
 89 | 
 90 | Game.prototype.updateFn = function(dt){
 91 | 	this.timerCount+=dt;
 92 | 	this.demontimerCount+=dt;
 93 | 	if(this.boosterSet==true){
 94 | 		this.boosterCount+=dt;
 95 | 	}
 96 | 	this.changePosition();
 97 | 
 98 | 	if(this.canvasObject.map[this.canvasObject.xValue][this.canvasObject.yValue]==2){
 99 | 		this.playerObject.updatePoint(this.playerObject.timePoints);
100 | 		this.playerObject.level++;
101 | 		window.cancelAnimationFrame(myReq);
102 | 		this.nextLevel();
103 | 	}
104 | 	else if(this.canvasObject.map[this.canvasObject.xValue][this.canvasObject.yValue]==-1&&this.boosterSet==false){
105 | 		music.pause();
106 | 		scream.play();
107 | 		this.loser();
108 | 		window.cancelAnimationFrame(myReq);
109 | 		onLoad();
110 | 	}
111 | 	else if(this.canvasObject.map[this.canvasObject.xValue][this.canvasObject.yValue]==3){
112 | 		this.canvasObject.map[this.canvasObject.xValue][this.canvasObject.yValue]=1;
113 | 		this.playerObject.updatePoint(100);
114 | 		this.timerCheck();
115 | 	}
116 | 	else if(this.canvasObject.map[this.canvasObject.xValue][this.canvasObject.yValue]==4){
117 | 		this.canvasObject.map[this.canvasObject.xValue][this.canvasObject.yValue]=1;
118 | 		this.playerObject.updatePoint(500);
119 | 		this.boosterSet=true;
120 | 		this.timerCheck();
121 | 	}
122 | 	else
123 | 		this.timerCheck();	
124 | }
125 | 
126 | Game.prototype.timerCheck = function(){
127 | 	if(this.timerCount>1){
128 | 		this.timer();
129 | 		this.timerCount=0;
130 | 	}
131 | 	if(this.demontimerCount>0.5){
132 | 		this.canvasObject.demonTimer();
133 | 		this.demontimerCount=0;
134 | 	}
135 | 	if(this.boosterCount>20&&this.boosterSet==true){
136 | 		this.boosterSet=false;
137 | 		this.boosterCount=0;
138 | 	}
139 | }
140 | 
141 | Game.prototype.startLoop = function(){
142 | 	myReq = window.requestAnimationFrame(this.gameLoop.bind(this));
143 | }
144 | 
145 | Game.prototype.gameLoop = function(){
146 | 
147 | 	myReq = window.requestAnimationFrame(this.gameLoop.bind(this));
148 | 	now = timestamp();
149 | 	dt = (now- last)/1000;
150 | 	last=now;
151 | 	this.updateFn(dt);
152 | 	this.drawFn();
153 | }
154 | 


--------------------------------------------------------------------------------
/canvasdisplay.js:
--------------------------------------------------------------------------------
  1 | function CanvasDisplay(){
  2 | 	this.canvas = document.createElement("canvas");
  3 | 	this.canvas.width = "500";
  4 | 	this.canvas.height= "500";
  5 | 	this.width =40;
  6 | 	this.length=40;
  7 | 	this.xValue=0;
  8 | 	this.yValue=0;
  9 | 	this.map=[];
 10 | 	this.shownWidth=10;
 11 | 	this.shownLength=10;
 12 | 	this.level=1;
 13 | 	this.moveCount =0;
 14 | 	this.horizontalDemons=[];
 15 | 	this.context = this.canvas.getContext("2d");
 16 | 	document.body.appendChild(this.canvas);
 17 | }
 18 | 
 19 | //Draws the frame
 20 | CanvasDisplay.prototype.drawFrame= function(){
 21 | 	this.clearDisplay();
 22 | 	this.drawBackground();
 23 | };
 24 | 
 25 | CanvasDisplay.prototype.clearDisplay = function(){
 26 | 	this.context.fillStyle = "blue";
 27 | 	this.context.fillRect(0, 0,
 28 |    this.canvas.width, this.canvas.height);
 29 | };
 30 | 
 31 | CanvasDisplay.prototype.drawBackgroundSprite = function(imagex,imagey,canvasx,canvasy){
 32 | 	this.context.drawImage(backgroundSprite,imagex,imagey,25,25,canvasx*this.canvas.width/10,canvasy*this.canvas.height/10,this.canvas.width/10,this.canvas.height/10);
 33 | }
 34 | 
 35 | //draws background around player based on shown length and width
 36 | CanvasDisplay.prototype.drawBackground= function(){
 37 | 	var canvasx=0;
 38 | 	var canvasy=0;
 39 | 	var imagex=0,imagey=0;
 40 | 	for(var j=this.xValue-this.shownLength/2;j<this.xValue+this.shownLength/2;j++,canvasy++){
 41 | 		canvasx=0;
 42 | 		for(var i=this.yValue-this.shownWidth/2;i<this.yValue+this.shownWidth/2;i++,canvasx++){
 43 | 
 44 | 			if(i<0||i>this.width-1||j<0||j>this.length-1){
 45 | 				imagex=50; imagey=25;
 46 | 			}
 47 | 			else{
 48 | 				if(this.map[j][i]==1){
 49 | 					imagex=25; imagey=25;
 50 | 				}
 51 | 				else if(this.map[j][i]==0){
 52 | 					imagex=50; imagey=50;
 53 | 				}
 54 | 				else if(this.map[j][i]==2){
 55 | 					imagex=25; imagey=75;
 56 | 				}
 57 | 				else if(this.map[j][i]==3){
 58 | 					imagex=50; imagey=175;
 59 | 				}
 60 | 				else if(this.map[j][i]==-1){
 61 | 					imagex=50; imagey=125;
 62 | 				}
 63 | 				else if(this.map[j][i]==4){
 64 | 					imagex=0; imagey=175;
 65 | 				}
 66 | 
 67 | 			}
 68 | 			this.drawBackgroundSprite(imagex,imagey,canvasx,canvasy);	
 69 | 		}
 70 | 	}
 71 | };
 72 | 
 73 | CanvasDisplay.prototype.drawPlayer= function(dirNum){
 74 | 	this.context.drawImage(playerSprite,this.moveCount*50,dirNum*50,50,50,this.shownWidth/2*this.canvas.width/10, this.shownLength/2*this.canvas.height/10,this.canvas.width/10,this.canvas.height/10);
 75 | };
 76 | 
 77 | //Changes position of demons. Changes direction when obstacle is encountered.
 78 | CanvasDisplay.prototype.demonTimer = function(){
 79 | 	for (var i = 0; i < this.horizontalDemons.length; i++) {
 80 | 			var x= this.horizontalDemons[i].x;
 81 | 			var y= this.horizontalDemons[i].y;
 82 | 			var dir = this.horizontalDemons[i].dir;
 83 | 			if(dir==1){
 84 | 				if(y<this.width-1&&this.map[x][y+1]==1){
 85 | 					this.map[x][y]=1;
 86 | 					this.map[x][y+1]=-1;
 87 | 					this.horizontalDemons[i].y+=1;
 88 | 				}
 89 | 				else{
 90 | 					this.horizontalDemons[i].dir=-1;
 91 | 				}
 92 | 			}
 93 | 			else if(dir==-1){
 94 | 				if(y>0&&this.map[x][y-1]==1){
 95 | 					this.map[x][y]=1;
 96 | 					this.map[x][y-1]=-1;
 97 | 					this.horizontalDemons[i].y-=1;
 98 | 				}
 99 | 				else{
100 | 					this.horizontalDemons[i].dir=1;
101 | 				}
102 | 			}
103 | 		};
104 | }
105 | 
106 | //Assigns horizontal corridors to connect rooms.
107 | //The demons are assigned to some of these corridors.
108 | CanvasDisplay.prototype.horizontalCorridor = function(i){
109 | 	var demon = { x:0 , y:0, dir:1};
110 | 	var demon2= { x:0 , y:0, dir:1};
111 | 	if(Math.random()>0.5){
112 | 			for(var p=0;p<=this.width/4;p++){
113 | 					this.map[i+1][p]=1;
114 | 			};
115 | 			for(p=this.width/4;p<=this.width/2;p++){
116 | 					this.map[i+2][p]=1;
117 | 			};
118 | 			this.map[i+2][this.width/4]=-1;
119 | 			demon.x=i+2;
120 | 			demon.y=this.width/4;
121 | 			demon.dir=1;
122 | 			this.horizontalDemons.push(demon);
123 | 			for(;p<=this.width*3/4;p++){
124 | 					this.map[i][p]=1;
125 | 			};
126 | 			for(p=this.width*3/4;p<this.width;p++){
127 | 					this.map[i+1][p]=1;
128 | 			};
129 | 			this.map[i+1][this.width*3/4]=-1;
130 | 			demon2.x=i+1;
131 | 			demon2.y=this.width*3/4;
132 | 			demon2.dir=1;
133 | 			this.horizontalDemons.push(demon2);
134 | 
135 | 		}
136 | 		else{
137 | 			for(var p=0;p<=this.width/4;p++){
138 | 					this.map[i+1][p]=1;
139 | 			};
140 | 			this.map[i+1][1]=-1;
141 | 			demon.x=i+1;
142 | 			demon.y=1;
143 | 			demon.dir=1;
144 | 			this.horizontalDemons.push(demon);
145 | 			for(p=this.width/4;p<=this.width/2;p++){
146 | 					this.map[i][p]=1;
147 | 			};
148 | 			for(;p<=this.width*3/4;p++){
149 | 					this.map[i+1][p]=1;
150 | 			};
151 | 			this.map[i+1][this.width/2+1]=-1;
152 | 			demon2.x=i+1;
153 | 			demon2.y=this.width/2+1;
154 | 			demon2.dir=1;
155 | 			this.horizontalDemons.push(demon2);
156 | 			for(p=this.width*3/4;p<this.width;p++){
157 | 					this.map[i+2][p]=1;
158 | 			};
159 | 		}
160 | }
161 | 
162 | //Fixed vertical corridors are formed.
163 | CanvasDisplay.prototype.verticalCorridor = function(){
164 | 	for (var i = 0; i <this.length; i++) {
165 | 		this.map[i][0]=1;
166 | 		this.map[i][this.width-1]=1;
167 | 	};
168 | 	for (var i = 0; i < this.length/2; i++) {
169 | 		this.map[i][this.width/4]=1;
170 | 	};
171 | 	var booster = Math.ceil(Math.random()*(this.length/2));
172 | 	this.map[booster][this.width/4]=4;
173 | 	for (; i < this.length-2; i++) {
174 | 		this.map[i][this.width*3/4]=1;
175 | 	};
176 | 	var booster1 = Math.ceil(Math.random()*(this.length/2)+ this.length/2 -2);
177 | 	this.map[booster1][this.width*3/4]=4;
178 | }
179 | 
180 | //Rooms are created and corridors are made to connect them.
181 | CanvasDisplay.prototype.assignMap = function(){
182 | 	this.map=[];
183 | 	for (var i = 0; i < this.length; i++) {
184 | 		this.map[i]=[];
185 | 		for(var j=0;j<this.width;j++){
186 | 			this.map[i][j]=0;
187 | 		}
188 | 	};
189 | 	var horizontalLength;
190 | 	var roomLength;
191 | 	var max;
192 | 	for (var i = 0; i < this.length; i++) {
193 | 		max=0;
194 | 		for(var j=0;j<this.width;j++){
195 | 			horizontalLength= Math.floor(Math.random()*3+3);
196 | 			roomLength= Math.floor(Math.random()*3+3);
197 | 			if((j+horizontalLength<this.width)&&(i+roomLength<this.length)){
198 | 				if(max<roomLength)
199 | 					max=roomLength;
200 | 				for(var p=i;p<i+roomLength;p++){
201 | 					for(var q=j;q<j+horizontalLength;q++){
202 | 						this.map[p][q]=1;
203 | 						if(Math.random()>0.8)
204 | 							this.map[p][q]=3;
205 | 					};
206 | 				};
207 | 				var roomDistance=Math.random();
208 | 				if(roomDistance<0.34)
209 | 					j+=horizontalLength;
210 | 				else if(roomDistance<0.67)
211 | 					j+=(horizontalLength+1);
212 | 				else
213 | 					j+=(horizontalLength+2);
214 | 			}
215 | 		};
216 | 		this.horizontalCorridor(i);
217 | 		i+=max;
218 | 	};
219 | 
220 | 	this.verticalCorridor();
221 | 	for (var i = 0; i <this.length; i++) {
222 | 		this.map[i][0]=1;
223 | 		this.map[i][this.width-1]=1;
224 | 	};
225 | 	if(Math.random()<0.3)
226 | 		this.map[this.length-1][this.width-2]=2;
227 | 	else if(Math.random()<0.5)
228 | 		this.map[0][this.width-2]=2;
229 | 	else
230 | 		this.map[this.length-1][1]=2;
231 | }
232 | 


--------------------------------------------------------------------------------