RNGRPG

├── RNGRPG.gif ├── dungeon.avif ├── item.js ├── bullet.js ├── index.html ├── style.css ├── mob.js ├── bulletcontroller.js ├── hero.js ├── README.md └── script.js /RNGRPG.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MemeEngineer/RNGRPG/HEAD/RNGRPG.gif -------------------------------------------------------------------------------- /dungeon.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MemeEngineer/RNGRPG/HEAD/dungeon.avif -------------------------------------------------------------------------------- /item.js: -------------------------------------------------------------------------------- 1 | class Item{ 2 | constructor(itemid,item=[]){ 3 | this.itemid = itemid 4 | this.item = item 5 | } 6 | 7 | } 8 | 9 | 10 | export class Diamond extends Item{ 11 | constructor(itemid = 10, item= ['💎']){ 12 | super(itemid, item) 13 | this.itemid= itemid 14 | this.item = item 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /bullet.js: -------------------------------------------------------------------------------- 1 | export default class Bullet{ 2 | constructor(x,y,speed, damage){ 3 | this.x = x; 4 | this.y = y; 5 | this.speed = speed; 6 | this.damage = damage; 7 | this.width = 5; 8 | this.height = 15; 9 | this.color = "red"; 10 | } 11 | 12 | draw(ctx){ 13 | //makes color of the bullet 14 | ctx.fillStyle = this.color; 15 | // placement of the bullet 16 | this.y -= this.speed; 17 | //dimensional properties of the bullet 18 | ctx.fillRect(this.x,this.y, this.width, this.height) 19 | } 20 | //collision mechanic with bullet based on position on canvas 21 | collideWith(mob){ 22 | if( 23 | this.x < mob.x + mob.width && 24 | this.x + this.width > mob.x && 25 | this.y < mob.y + mob.height && 26 | this.y + this.height > mob.y 27 | ){ 28 | mob.takeDamage(this.damage); 29 | return true 30 | } 31 | return false 32 | } 33 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | RNGRPG 9 | 10 | 11 |

12 |

13 |

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 44 | 45 | 46 | 49 | 50 | 51 |

Items:

23 \| Health 24 \|

31 \| Damage: 32 \|
1
Kill Count:
42 \| 43 \|

52 | 53 |

54 | 55 | 56 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: darkslateblue; 3 | display:flex; 4 | flex-direction: column; 5 | align-items: center; 6 | padding:0; 7 | margin:0; 8 | height:100vh; 9 | background-image: url(dungeon.avif); 10 | background-size: cover; 11 | 12 | 13 | } 14 | 15 | #canvas-container{ 16 | display:flex; 17 | 18 | } 19 | img{ 20 | height:25vh; 21 | width: 100%; 22 | } 23 | /* 24 | table#inventory{ 25 | display:flex; 26 | flex-direction:column; 27 | align-items: center; 28 | background-color: beige; 29 | } */ 30 | 31 | table, th, td { 32 | border: 10px gray solid; 33 | background-color: beige; 34 | display:flex; 35 | justify-content: center; 36 | 37 | } 38 | td#health{ 39 | color: red 40 | } 41 | /* canvas{ 42 | background-color: gray; 43 | width: 75%; 44 | height: 750px; 45 | position:relative; 46 | z-index: 0; 47 | 48 | } */ 49 | /* #item-container{ 50 | width:25%; 51 | } */ 52 | /* div#hero{ 53 | width: 10px; 54 | height:10px; 55 | background-color: red; 56 | position:absolute; 57 | z-index: 1; 58 | } */ 59 | 60 | /* div#mob{ 61 | width: 10px; 62 | height:10px; 63 | background-color: blue; 64 | position: absolute; 65 | z-index: 1; 66 | top:100px; 67 | left: 100px; 68 | right:100px; 69 | } */ -------------------------------------------------------------------------------- /mob.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default class Mob{ 4 | 5 | constructor(x,y,color,health=['♥','♥','♥','♥']){ 6 | this.x = x; 7 | this.y = y; 8 | this.color = color; 9 | this.health = health 10 | this.width = 50; 11 | this.height = 50; 12 | } 13 | 14 | 15 | 16 | draw(ctx){ 17 | ctx.fillStyle = this.color; 18 | ctx.fillRect(this.x,this.y,this.width,this.height) 19 | ctx.strokeRect(this.x,this.y,this.width,this.height) 20 | //draw text 21 | ctx.fillStyle = 'red'; 22 | ctx.font = "15px arial"; 23 | ctx.fillText( 24 | this.health, 25 | this.x + this.width / 100, 26 | this.y + this.height / 10 27 | ) 28 | } 29 | 30 | takeDamage(){ 31 | this.health.pop() 32 | } 33 | //collision mechanic with player/hero 34 | collideWithHero(knight){ 35 | if( 36 | this.x < knight.x + knight.width && 37 | this.x + this.width > knight.x && 38 | this.y < knight.y + knight.height && 39 | this.y + this.height > knight.y 40 | ){ 41 | knight.takeDamage(); 42 | return true 43 | } 44 | return false 45 | } 46 | // HealthBar(){ 47 | 48 | // for (i= 0; i < 4; i++){ 49 | // this.health.push('♥') 50 | // } 51 | // } 52 | // arrHealth = [] 53 | // fillHealth(){ 54 | // health = arrHealth.fill('♥')* Math.floor(Math.random()* 5) 55 | // console.log(arrHealth) 56 | // } 57 | 58 | } 59 | -------------------------------------------------------------------------------- /bulletcontroller.js: -------------------------------------------------------------------------------- 1 | import Bullet from "./bullet.js" 2 | export default class BulletController{ 3 | //puts the bullets in an array 4 | bullets = [] 5 | //keeps a timer for each bullet 6 | timerTillNextBullet = 0; 7 | constructor(gameArea){ 8 | this.gameArea = gameArea; 9 | } 10 | shoot(x,y,speed,damage,delay){ 11 | //spaces out bullet attack in an array 12 | // when timer is less than or = to 0 fires off bullet 13 | if(this.timerTillNextBullet <= 0){ 14 | this.bullets.push(new Bullet(x,y,speed,damage)) 15 | this.timerTillNextBullet = delay; 16 | } 17 | //timer decrement 18 | this.timerTillNextBullet--; 19 | } 20 | draw(ctx){ 21 | //removes bullet in array if bullet goes past bullet height 22 | this.bullets.forEach((bullet) => { 23 | if(this.isBulletOffScreen(bullet)){ 24 | const index = this.bullets.indexOf(bullet); 25 | this.bullets.splice(index,1) 26 | } 27 | //draws bullet onto the canvas / game-area 28 | bullet.draw(ctx) 29 | }) 30 | } 31 | //if one bullet hits a mob remove the bullet from array 32 | collideWith(mob){ 33 | return this.bullets.some(bullet => { 34 | if( bullet.collideWith(mob)){ 35 | this.bullets.splice(this.bullets.indexOf(bullet), 1); 36 | return true 37 | } 38 | return false 39 | }) 40 | } 41 | 42 | 43 | //returns true/false if bullet Y position is less than the bullet height (- is because of the grid origin) 44 | isBulletOffScreen(bullet){ 45 | return bullet.y <= -bullet.height 46 | } 47 | } -------------------------------------------------------------------------------- /hero.js: -------------------------------------------------------------------------------- 1 | export default class Hero{ 2 | constructor(x,y, BulletController,health= ['❤','❤','❤'],damage,item =[]){ 3 | this.x = x; 4 | this.y = y; 5 | this.BulletController = BulletController 6 | this.width = 25; 7 | this.height = 25; 8 | this.speed = 3; 9 | this.health = health; 10 | this.damage = damage; 11 | this.item = item; 12 | //event listener when pressing W,S,A,D (up, down, left, right) 13 | document.addEventListener("keydown", this.keydown); 14 | document.addEventListener("keyup",this.keyup); 15 | } 16 | 17 | draw(ctx){ 18 | //calling the movement method 19 | this.move() 20 | //makes border color 21 | ctx.strokeStyle = "yellow"; 22 | //makes border around shape 23 | ctx.strokeRect(this.x,this.y,this.width,this.height); 24 | //fills in shape color 25 | ctx.fillStyle = 'black'; 26 | //makes shape a rectange with x, y location & width and height 27 | ctx.fillRect(this.x,this.y,this.width,this.height); 28 | //health properties 29 | ctx.fillStyle = 'red'; 30 | ctx.font = "15px arial"; 31 | ctx.fillText( 32 | this.health, 33 | this.x - (this.width / 2), 34 | this.y + this.height / .6 35 | ) 36 | 37 | //calling on the attack method 38 | this.attack(); 39 | } 40 | 41 | attack(){ 42 | if(this.attackPressed){ 43 | const speed = 4; 44 | const delay = 7; 45 | this.damage = 1; 46 | const bulletX = this.x + this.width /2; 47 | const bulletY = this.y; 48 | this.BulletController.shoot(bulletX, bulletY, speed, this.damage, delay) 49 | } 50 | } 51 | 52 | takeDamage(){ 53 | this.health.pop() 54 | } 55 | 56 | move(){ 57 | if(this.upPressed){ 58 | this.y -= this.speed; 59 | } 60 | if(this.downPressed){ 61 | this.y += this.speed; 62 | } 63 | if(this.leftPressed){ 64 | this.x -= this.speed; 65 | } 66 | if(this.rightPressed){ 67 | this.x += this.speed; 68 | } 69 | } 70 | 71 | keydown = (e) => { 72 | if(e.key === "w"){ 73 | this.upPressed = true 74 | } 75 | if(e.key === "s"){ 76 | this.downPressed = true 77 | } 78 | if(e.key === "a"){ 79 | this.leftPressed = true 80 | } 81 | if(e.key === "d"){ 82 | this.rightPressed = true 83 | } 84 | if(e.key === "h"){ 85 | this.attackPressed = true; 86 | } 87 | } 88 | 89 | keyup = (e) => { 90 | if(e.key === "w"){ 91 | this.upPressed = false 92 | } 93 | if(e.key === "s"){ 94 | this.downPressed = false 95 | } 96 | if(e.key === "a"){ 97 | this.leftPressed = false 98 | } 99 | if(e.key === "d"){ 100 | this.rightPressed = false 101 | } 102 | if(e.key === "h"){ 103 | this.attackPressed = false; 104 | } 105 | } 106 | } 107 | 108 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # RNGRPG (Random Number Generator Role-Playing Game) 2 | _____________ 3 | # Live DEMO: https://memeengineer.github.io/RNGRPG/ 4 | _____________ 5 | 6 | ![RNGRPG](https://github.com/MemeEngineer/RNGRPG/assets/90629466/f0b6236d-5fb9-49f9-827c-4e49ba188078) 7 | 8 | # About 9 | ______________ 10 | A simple analog WASD and H key game. The game is simple: Defeat the enemies and find the Gem of Swag 💎 (1/10 Drop Rate). The lower the kill count the better. Game design was based off of Space invaders and Pac-Man game development. 11 | 12 | ![image](https://github.com/MemeEngineer/RNGRPG/assets/90629466/d976107e-ff36-46f3-8b5f-63d2c08d9150) 13 | 14 | ![image](https://github.com/MemeEngineer/RNGRPG/assets/90629466/e2afc6d8-5d2b-4d61-8175-53a9bc94cc31) 15 | 16 | # Motivation 17 | ______________ 18 | This game was created for my love of MMORPGs. Inspired by games with drop rates and rare items. RNG based games have always intrigued me because people love a good grind to find items that would boosts the character stats. This is a short homage, to games that give us that dopamine when trying to find rare items for your character. 19 | 20 | # Game Logic / Game Mechanic 21 | ______________ 22 | Created with Object Oriented programming in mind. Each class/object has X & Y coordinates. The bullets/attack event happens at the players X & Y coordinate and is put into an array. If the Mob(Moveable Objects) / enemies are in the same X & Y coordinate as the bullets then the collision will trigger a class method to reduce the Mobs health. The game takes place in a canvas element in HTML