Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@madhanaadithyap
madhanaadithyap committed Mar 12, 2024
1 parent 3762fa3 commit 3be82b8
Show file tree
Hide file tree
Showing 7 changed files with 538 additions and 391 deletions.
Binary file removed 1.png
View file
Binary file not shown.
133 changes: 133 additions & 0 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/* -----------------------------------------------
/* How to use? : Check the GitHub README
/* ----------------------------------------------- */

/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
/*
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.js loaded - callback');
});
*/

/* Otherwise just put the config content (json): */

particlesJS('particles-js',

{
"particles": {
"number": {
"value": 20,
"density": {
"enable": true,
"value_area": 20000
}
},
"color": {
"value": "#DD819C"
},
"shape": {
"type": "circle",
"stroke": {
"width":0,
"color": "#DD819C"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.8,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": false,
"anim": {
"enable": false,
"speed": 6,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 1,
"color": "#DD819C",
"opacity": 1,
"width": 1
},
"move": {
"enable": true,
"speed": 40,
"direction": "bottom-right",
"random": false,
"straight": true,
"out_mode": "in",
"attract": {
"enable": true,
"rotateX": 200,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "bubble"
},
"onclick": {
"enable": false,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 10,
"duration": 1,
"opacity":0.25,
"speed": 10
},
"repulse": {
"distance": 700
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#000",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}

);
Binary file removed bgg.mp4
View file
Binary file not shown.
237 changes: 215 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,224 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Madhan Aadithya</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main">
<video src="bgg.mp4" autoplay loop muted ></video>
<h1>
TUNED<br>
</h1>
</div>
<div id="about" class="div">
<div class="wrapper">
<div class="static-txt"></div>
<ul class="dynamic">
<li><span>Html</span></li>
<li><span>Css</span></li>
<li><span>Python</span></li>
<li><span>இசை</span></li>
</ul>
<body onload="{greet()}">
<!--
see the video tutorial for how this kind of thing works:
https://youtu.be/H3Fn33lYuE0
-->

<div class="frame">
<div class="corner_topleft"></div>
<div class="corner_topright"></div>
<div class="corner_bottomleft"></div>
<div class="corner_bottomright"></div>


<div class="camera">
<div class="map pixel-art">
<div class="character" facing="down" walking="true">
<div class="shadow pixel-art"></div>
<div class="character_spritesheet pixel-art"></div>
</div>
</div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>


<div class="dpad">
<div class="DemoDirectionUI flex-center">
<button class="dpad-button dpad-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 13 13" shape-rendering="crispEdges">
<path class="Arrow_outline-top" stroke="#5f5f5f" d="M1 0h11M0 1h1M12 1h1M0 2h1M12 2h1M0 3h1M12 3h1M0 4h1M12 4h1M0 5h1M12 5h1M0 6h1M12 6h1M0 7h1M12 7h1M0 8h1M12 8h1" />
<path class="Arrow_surface" stroke="#f5f5f5" d="M1 1h11M1 2h11M1 3h5M7 3h5M1 4h4M7 4h5M1 5h3M7 5h5M1 6h4M7 6h5M1 7h5M7 7h5M1 8h11" />
<path class="Arrow_arrow-inset" stroke="#434343" d="M6 3h1M5 4h1M4 5h1" />
<path class="Arrow_arrow-body" stroke="#5f5f5f" d="M6 4h1M5 5h2M5 6h2M6 7h1" />
<path class="Arrow_outline-bottom" stroke="#434343" d="M0 9h1M12 9h1M0 10h1M12 10h1M0 11h1M12 11h1M1 12h11" />
<path class="Arrow_edge" stroke="#ffffff" d="M1 9h11" />
<path class="Arrow_front" stroke="#cccccc" d="M1 10h11M1 11h11" />
</svg>
</button>
<button class="dpad-button dpad-up">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 13 13" shape-rendering="crispEdges">
<path class="Arrow_outline-top" stroke="#5f5f5f" d="M1 0h11M0 1h1M12 1h1M0 2h1M12 2h1M0 3h1M12 3h1M0 4h1M12 4h1M0 5h1M12 5h1M0 6h1M12 6h1M0 7h1M12 7h1M0 8h1M12 8h1" />
<path class="Arrow_surface" stroke="#f5f5f5" d="M1 1h11M1 2h11M1 3h11M1 4h5M7 4h5M1 5h4M8 5h4M1 6h3M9 6h3M1 7h11M1 8h11" />
<path class="Arrow_arrow-inset" stroke="#434343" d="M6 4h1M5 5h1M7 5h1" />
<path class="Arrow_arrow-body" stroke="#5f5f5f" d="M6 5h1M4 6h5" />
<path class="Arrow_outline-bottom" stroke="#434343" d="M0 9h1M12 9h1M0 10h1M12 10h1M0 11h1M12 11h1M1 12h11" />
<path class="Arrow_edge" stroke="#ffffff" d="M1 9h11" />
<path class="Arrow_front" stroke="#cccccc" d="M1 10h11M1 11h11" />
</svg>
</button>
<button class="dpad-button dpad-down">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 13 13" shape-rendering="crispEdges">
<path class="Arrow_outline-top" stroke="#5f5f5f" d="M1 0h11M0 1h1M12 1h1M0 2h1M12 2h1M0 3h1M12 3h1M0 4h1M12 4h1M0 5h1M12 5h1M0 6h1M12 6h1M0 7h1M12 7h1M0 8h1M12 8h1" />
<path class="Arrow_surface" stroke="#f5f5f5" d="M1 1h11M1 2h11M1 3h11M1 4h3M9 4h3M1 5h4M8 5h4M1 6h5M7 6h5M1 7h11M1 8h11" />
<path class="Arrow_arrow-inset" stroke="#434343" d="M4 4h5" />
<path class="Arrow_arrow-body" stroke="#5f5f5f" d="M5 5h3M6 6h1" />
<path class="Arrow_outline-bottom" stroke="#434343" d="M0 9h1M12 9h1M0 10h1M12 10h1M0 11h1M12 11h1M1 12h11" />
<path class="Arrow_edge" stroke="#ffffff" d="M1 9h11" />
<path class="Arrow_front" stroke="#cccccc" d="M1 10h11M1 11h11" />
</svg>
</button>
<button class="dpad-button dpad-right">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 13 13" shape-rendering="crispEdges">
<path class="Arrow_outline-top" stroke="#5f5f5f" d="M1 0h11M0 1h1M12 1h1M0 2h1M12 2h1M0 3h1M12 3h1M0 4h1M12 4h1M0 5h1M12 5h1M0 6h1M12 6h1M0 7h1M12 7h1M0 8h1M12 8h1" />
<path class="Arrow_surface" stroke="#f5f5f5" d="M1 1h11M1 2h11M1 3h5M7 3h5M1 4h5M8 4h4M1 5h5M9 5h3M1 6h5M8 6h4M1 7h5M7 7h5M1 8h11" />
<path class="Arrow_arrow-inset" stroke="#434343" d="M6 3h1M7 4h1M8 5h1" />
<path class="Arrow_arrow-body" stroke="#5f5f5f" d="M6 4h1M6 5h2M6 6h2M6 7h1" />
<path class="Arrow_outline-bottom" stroke="#434343" d="M0 9h1M12 9h1M0 10h1M12 10h1M0 11h1M12 11h1M1 12h11" />
<path class="Arrow_edge" stroke="#ffffff" d="M1 9h11" />
<path class="Arrow_front" stroke="#cccccc" d="M1 10h11M1 11h11" />
</svg>
</button>
</div>
</div>
<h1>Madhan Aadithya</h1>





</div>
</div>
<script>
var character = document.querySelector(".character");
var map = document.querySelector(".map");

//start in the middle of the map
var x = 90;
var y = 34;
var held_directions = []; //State of which arrow keys we are holding down
var speed = 1; //How fast the character moves in pixels per frame

const placeCharacter = () => {

var pixelSize = parseInt(
getComputedStyle(document.documentElement).getPropertyValue('--pixel-size')
);

const held_direction = held_directions[0];
if (held_direction) {
if (held_direction === directions.right) {x += speed;}
if (held_direction === directions.left) {x -= speed;}
if (held_direction === directions.down) {y += speed;}
if (held_direction === directions.up) {y -= speed;}
character.setAttribute("facing", held_direction);
}
character.setAttribute("walking", held_direction ? "true" : "false");

//Limits (gives the illusion of walls)
var leftLimit = -4000;
var rightLimit = (4000 * 11)+8;
var topLimit = -8 + 32;
var bottomLimit = (16 * 4000);
if (x < leftLimit) { x = leftLimit; }
if (x > rightLimit) { x = rightLimit; }
if (y < topLimit) { y = topLimit; }
if (y > bottomLimit) { y = bottomLimit; }


var camera_left = (window.innerWidth)/2.5;
var camera_top = (window.innerHeight)/4;

map.style.transform = `translate3d( ${-x*pixelSize+camera_left}px, ${-y*pixelSize+camera_top}px, 0 )`;
character.style.transform = `translate3d( ${x*pixelSize}px, ${y*pixelSize}px, 0 )`;
}


//Set up the game loop
const step = () => {
placeCharacter();
window.requestAnimationFrame(() => {
step();
})
}
step(); //kick off the first step!



/* Direction key state */
const directions = {
up: "up",
down: "down",
left: "left",
right: "right",
}
const keys = {
38: directions.up,
37: directions.left,
39: directions.right,
40: directions.down,
}
document.addEventListener("keydown", (e) => {
var dir = keys[e.which];
if (dir && held_directions.indexOf(dir) === -1) {
held_directions.unshift(dir)
}
})

document.addEventListener("keyup", (e) => {
var dir = keys[e.which];
var index = held_directions.indexOf(dir);
if (index > -1) {
held_directions.splice(index, 1)
}
});



/* BONUS! Dpad functionality for mouse and touch */
var isPressed = false;
const removePressedAll = () => {
document.querySelectorAll(".dpad-button").forEach(d => {
d.classList.remove("pressed")
})
}
document.body.addEventListener("mousedown", () => {
console.log('mouse is down')
isPressed = true;
})
document.body.addEventListener("mouseup", () => {
console.log('mouse is up')
isPressed = false;
held_directions = [];
removePressedAll();
})
const handleDpadPress = (direction, click) => {
if (click) {
isPressed = true;
}
held_directions = (isPressed) ? [direction] : []

if (isPressed) {
removePressedAll();
document.querySelector(".dpad-"+direction).classList.add("pressed");
}
}
//Bind a ton of events for the dpad
document.querySelector(".dpad-left").addEventListener("touchstart", (e) => handleDpadPress(directions.left, true));
document.querySelector(".dpad-up").addEventListener("touchstart", (e) => handleDpadPress(directions.up, true));
document.querySelector(".dpad-right").addEventListener("touchstart", (e) => handleDpadPress(directions.right, true));
document.querySelector(".dpad-down").addEventListener("touchstart", (e) => handleDpadPress(directions.down, true));

document.querySelector(".dpad-left").addEventListener("mousedown", (e) => handleDpadPress(directions.left, true));
document.querySelector(".dpad-up").addEventListener("mousedown", (e) => handleDpadPress(directions.up, true));
document.querySelector(".dpad-right").addEventListener("mousedown", (e) => handleDpadPress(directions.right, true));
document.querySelector(".dpad-down").addEventListener("mousedown", (e) => handleDpadPress(directions.down, true));

document.querySelector(".dpad-left").addEventListener("mouseover", (e) => handleDpadPress(directions.left));
document.querySelector(".dpad-up").addEventListener("mouseover", (e) => handleDpadPress(directions.up));
document.querySelector(".dpad-right").addEventListener("mouseover", (e) => handleDpadPress(directions.right));
document.querySelector(".dpad-down").addEventListener("mouseover", (e) => handleDpadPress(directions.down));








</script>
</body>
</html>
Loading

0 comments on commit 3be82b8

Please sign in to comment.