From 83df4ec5a44d4a2d752137ef81e2d9063040d5e2 Mon Sep 17 00:00:00 2001 From: rajeshkrack <116027779+rajeshkrack@users.noreply.github.com> Date: Wed, 19 Oct 2022 21:25:46 +0530 Subject: [PATCH] added a ninja fight game --- .prettierrc | 13 ++ index.html | 136 +++++++++++++++++++++ index.js | 346 +++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 4 + 4 files changed, 483 insertions(+), 16 deletions(-) create mode 100644 .prettierrc create mode 100644 index.html create mode 100644 style.css diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..553d3bf --- /dev/null +++ b/.prettierrc @@ -0,0 +1,13 @@ +{ + "singleQuote": true, + "semi": false, + "trailingComma": "none", + "overrides": [ + { + "files": "*.html", + "options": { + "parser": "html" + } + } + ] +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..28290a1 --- /dev/null +++ b/index.html @@ -0,0 +1,136 @@ + + + + + + + +

Let's play the Game For The Throne!

+ +
+ +
+ +
+
+
+
+ + +
+ 10 +
+ +
+
+
+
+
+
+
+ +
+
+
+
+

controls:

+

for player1:left-a, right-d, up-w,attack-spacebar

+

for player2:left-leftarrow, right-rightarrow, up-uparrow,attack-downarrow

+ + + + + + diff --git a/index.js b/index.js index 32bfe58..dd6f30d 100644 --- a/index.js +++ b/index.js @@ -1,18 +1,332 @@ -const ejs = require('ejs') -const fs = require('fs') -const axios = require('axios') - -axios.get('https://api.github.com/users/codemistic/followers') - .then((data) => printData(data.data)) - -function printData(followerData) { - fs.readFile(__dirname + '/template.ejs', (err, data) => { - if (err) throw err - const time = new Date().toLocaleString() - const writeData = ejs.render(data.toString(), { - followers: followerData, - time: time - }) - fs.writeFileSync('README.md', writeData); +const canvas = document.querySelector('canvas') +const c = canvas.getContext('2d') +document.getElementsByTagName("body")[0].style.backgroundImage='got.jpg' +canvas.width = 1024 +canvas.height = 576 + +c.fillRect(0, 0, canvas.width, canvas.height) + +const gravity =1 + +const background = new Sprite({ + position: { + x: 0, + y: 0 + }, + imageSrc: './img/background.png' +}) + +const shop = new Sprite({ + position: { + x: 600, + y: 128 + }, + imageSrc: './img/shop.png', + scale: 2.75, + framesMax: 6 +}) + +const player = new Fighter({ + position: { + x: 0, + y: 0 + }, + velocity: { + x: 0, + y: 0 + }, + offset: { + x: 0, + y: 0 + }, + imageSrc: './img/samuraiMack/Idle.png', + framesMax: 8, + scale: 2.5, + offset: { + x: 215, + y: 157 + }, + sprites: { + idle: { + imageSrc: './img/samuraiMack/Idle.png', + framesMax: 8 + }, + run: { + imageSrc: './img/samuraiMack/Run.png', + framesMax: 8 + }, + jump: { + imageSrc: './img/samuraiMack/Jump.png', + framesMax: 2 + }, + fall: { + imageSrc: './img/samuraiMack/Fall.png', + framesMax: 2 + }, + attack1: { + imageSrc: './img/samuraiMack/Attack1.png', + framesMax: 6 + }, + takeHit: { + imageSrc: './img/samuraiMack/Take Hit - white silhouette.png', + framesMax: 4 + }, + death: { + imageSrc: './img/samuraiMack/Death.png', + framesMax: 6 + } + }, + attackBox: { + offset: { + x: 100, + y: 50 + }, + width: 160, + height: 50 + } +}) + +const enemy = new Fighter({ + position: { + x: 400, + y: 100 + }, + velocity: { + x: 0, + y: 0 + }, + color: 'blue', + offset: { + x: -50, + y: 0 + }, + imageSrc: './img/kenji/Idle.png', + framesMax: 4, + scale: 2.5, + offset: { + x: 215, + y: 167 + }, + sprites: { + idle: { + imageSrc: './img/kenji/Idle.png', + framesMax: 4 + }, + run: { + imageSrc: './img/kenji/Run.png', + framesMax: 8 + }, + jump: { + imageSrc: './img/kenji/Jump.png', + framesMax: 2 + }, + fall: { + imageSrc: './img/kenji/Fall.png', + framesMax: 2 + }, + attack1: { + imageSrc: './img/kenji/Attack1.png', + framesMax: 4 + }, + takeHit: { + imageSrc: './img/kenji/Take hit.png', + framesMax: 3 + }, + death: { + imageSrc: './img/kenji/Death.png', + framesMax: 7 + } + }, + attackBox: { + offset: { + x: -170, + y: 50 + }, + width: 170, + height: 50 + } +}) + +console.log(player) + +const keys = { + a: { + pressed: false + }, + d: { + pressed: false + }, + ArrowRight: { + pressed: false + }, + ArrowLeft: { + pressed: false + } +} + +decreaseTimer() + +function animate() { + window.requestAnimationFrame(animate) + c.fillStyle = 'black' + c.fillRect(0, 0, canvas.width, canvas.height) + background.update() + shop.update() + c.fillStyle = 'rgba(255, 255, 255, 0.15)' + c.fillRect(0, 0, canvas.width, canvas.height) + player.update() + enemy.update() + + player.velocity.x = 0 + enemy.velocity.x = 0 + + // player movement + + if (keys.a.pressed && player.lastKey === 'a') { + player.velocity.x = -5 + player.switchSprite('run') + } else if (keys.d.pressed && player.lastKey === 'd') { + player.velocity.x = 5 + player.switchSprite('run') + } else { + player.switchSprite('idle') + } + + // jumping + if (player.velocity.y < 0) { + player.switchSprite('jump') + } else if (player.velocity.y > 0) { + player.switchSprite('fall') + } + + // Enemy movement + if (keys.ArrowLeft.pressed && enemy.lastKey === 'ArrowLeft') { + enemy.velocity.x = -5 + enemy.switchSprite('run') + } else if (keys.ArrowRight.pressed && enemy.lastKey === 'ArrowRight') { + enemy.velocity.x = 5 + enemy.switchSprite('run') + } else { + enemy.switchSprite('idle') + } + + // jumping + if (enemy.velocity.y < 0) { + enemy.switchSprite('jump') + } else if (enemy.velocity.y > 0) { + enemy.switchSprite('fall') + } + + // detect for collision & enemy gets hit + if ( + rectangularCollision({ + rectangle1: player, + rectangle2: enemy + }) && + player.isAttacking && + player.framesCurrent === 4 + ) { + enemy.takeHit() + player.isAttacking = false + + gsap.to('#enemyHealth', { + width: enemy.health + '%' + }) + } + + // if player misses + if (player.isAttacking && player.framesCurrent === 4) { + player.isAttacking = false + } + + // this is where our player gets hit + if ( + rectangularCollision({ + rectangle1: enemy, + rectangle2: player + }) && + enemy.isAttacking && + enemy.framesCurrent === 2 + ) { + player.takeHit() + enemy.isAttacking = false + + gsap.to('#playerHealth', { + width: player.health + '%' }) + } + + // if player misses + if (enemy.isAttacking && enemy.framesCurrent === 2) { + enemy.isAttacking = false + } + + // end game based on health + if (enemy.health <= 0 || player.health <= 0) { + determineWinner({ player, enemy, timerId }) + } } + +animate() + +window.addEventListener('keydown', (event) => { + if (!player.dead) { + switch (event.key) { + case 'd': + keys.d.pressed = true + player.lastKey = 'd' + break + case 'a': + keys.a.pressed = true + player.lastKey = 'a' + break + case 'w': + player.velocity.y = -20 + break + case ' ': + player.attack() + break + } + } + + if (!enemy.dead) { + switch (event.key) { + case 'ArrowRight': + keys.ArrowRight.pressed = true + enemy.lastKey = 'ArrowRight' + break + case 'ArrowLeft': + keys.ArrowLeft.pressed = true + enemy.lastKey = 'ArrowLeft' + break + case 'ArrowUp': + enemy.velocity.y = -20 + break + case 'ArrowDown': + enemy.attack() + + break + } + } +}) + +window.addEventListener('keyup', (event) => { + switch (event.key) { + case 'd': + keys.d.pressed = false + break + case 'a': + keys.a.pressed = false + break + } + + // enemy keys + switch (event.key) { + case 'ArrowRight': + keys.ArrowRight.pressed = false + break + case 'ArrowLeft': + keys.ArrowLeft.pressed = false + break + } +}) diff --git a/style.css b/style.css new file mode 100644 index 0000000..2c4576a --- /dev/null +++ b/style.css @@ -0,0 +1,4 @@ +body{ + /* background-image: url(''); */ + background-color: black; +} \ No newline at end of file