Commit fe6f96c
Changed files (3)
006.GamePad
006.GamePad/index.html
@@ -22,9 +22,28 @@
<p class="modal__p">
<ul>
<li>
- A simple gamepad design using SVG and JavaScript.
+ A simple gamepad using
+ <span style="color:var(--lightGold)">
+ SVG
+ </span>
+ and
+ <span style="color:var(--lightGold)">
+ JavaScript.
+ </span>
+ </li>
+ <li>
+ It uses
+ <span style="color:var(--lightGold)">
+ gamepad API
+ </span>
+ to get the input.
+ </li>
+ <li>
+ <span style="color:var(--lightGold)">
+ Aesprite sheet
+ </span>
+ used for the character animation.
</li>
-
</ul>
</p>
@@ -34,7 +53,8 @@
<!-- Main Content -->
<h1>GamePad</h1>
<p id="tooltip"></p>
- <svg id="controller" style="opacity: 25%;" width="500" height="330" viewBox="0 0 300 230" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg id="controller" style="opacity: 25%;" width="500" height="330" viewBox="0 0 300 230" fill="none"
+ xmlns="http://www.w3.org/2000/svg">
<g id="Group">
<path id="BACK"
d="M135.211 80.9539C135.211 84.7195 132.245 87.7721 128.585 87.7721C124.926 87.7721 121.959 84.7195 121.959 80.9539C121.959 77.1883 124.926 74.1357 128.585 74.1357C132.245 74.1357 135.211 77.1883 135.211 80.9539Z"
@@ -128,12 +148,19 @@
stroke="white" stroke-width="2" />
</g>
</svg>
- <p class="character-dialog">
- Hello
- </p>
+
+ <div class="keyboard" id="keyboard">
+ <button id="a" class="left">A</button>
+ <button id="d" class="right">D</button>
+ <button id="w" class="top">W</button>
+ <button id="s" class="bottom">S</button>
+ </div>
+
+ <p class="character-dialog"></p>
<div class="Character" id="character-hitbox">
- <img class="Character_spritesheet pixelart" src="../assets/images/female_aesprite.png" id="character" alt="Character" />
- </div>
+ <img class="Character_spritesheet pixelart" src="../assets/images/female_aesprite.png" id="character"
+ alt="Character" />
+ </div>
<!-- Footer -->
006.GamePad/script.js
@@ -1,31 +1,40 @@
+const gamepads = {};
+const deadZone = 0.05;
+
+let cheatcodes = [];
+const cheatkeys = ["h", "l", "k", "1", "8"];
+let cheatTimeout;
+let isCheatActivated = false;
+
const tooltip = document.getElementById("tooltip");
+const keyboard = document.getElementById("keyboard");
+
+const w = document.querySelector("#w");
+const s = document.querySelector("#s");
+const a = document.querySelector("#a");
+const d = document.querySelector("#d");
+
+const controller = document.getElementById("controller");
const hitbox = document.getElementById("character-hitbox");
const character = document.getElementById("character");
const dialog = document.querySelector(".character-dialog");
-const gamepads = {};
-const deadZone = 0.05;
-const controller = document.getElementById("controller");
const backBtn = document.getElementById("BACK");
const startBtn = document.getElementById("START");
const leftBtn = document.getElementById("LEFT");
const rightBtn = document.getElementById("RIGHT");
const upBtn = document.getElementById("UP");
const downBtn = document.getElementById("DOWN");
-
const btnX = document.getElementById("xbox-x");
const btnY = document.getElementById("xbox-y");
const btnA = document.getElementById("xbox-a");
const btnB = document.getElementById("xbox-b");
-
const btnL1 = document.getElementById("xbox-L1");
const btnR1 = document.getElementById("xbox-R1");
-
const btnL2 = document.getElementById("xbox-L2");
const btnR2 = document.getElementById("xbox-R2");
const btnL2Path = document.getElementById("xbox-L2-Path");
const btnR2Path = document.getElementById("xbox-R2-Path");
-
const leftAnalog = document.getElementById("xbox-LAnalog");
const rightAnalog = document.getElementById("xbox-RAnalog");
const leftAnalogPath = document.getElementById("xbox-LAnalog-Path");
@@ -47,14 +56,17 @@ const dialogs = [
"Are you a campfire?<br/> Because you're hot and I want s'more.",
"Do you like science?<br/> Because I've got my ion you.",
"Are you a beaver?<br/> Because daaaaaam.",
- "Are you a parking ticket?<br/> Because you've got FINE written all over you.",
+ "Are you a parking ticket?<br/> Because you've got FINE written all over you.",
]
function removeGamepad(gamepad) {
delete gamepads[gamepad.index];
}
-
function addGamepad(gamepad) {
+ if (isCheatActivated) {
+ return;
+ }
+
gamepads[gamepad.index] = gamepad;
requestAnimationFrame(updateStatus);
if (Object.keys(gamepads).length > 1) {
@@ -68,49 +80,43 @@ function addGamepad(gamepad) {
dialog.style.visibility = "visible";
dialog.innerHTML = "Hello Gorgeous! ";
}
-
function pressuredButton(btn, path, state) {
btn.style.opacity = state;
btn.style.transform = `translate(0,${state * 7}px)`
path.style.transform = `translate(0,${state * 7}px)`
}
-
-function activateButton(btn, state) {
+function activateButton(btn, state,vibrate = false) {
if (state) {
btn.style.fill = "var(--lightGold)";
+ if (vibrate) {
+ gamepads[0].vibrationActuator.playEffect("dual-rumble", {
+ duration: 10,
+ strongMagnitude: 0.5,
+ weakMagnitude: 0.5
+ });
+ }
} else {
btn.style.fill = "black";
}
}
-function analogButton(btn, path, x, y,isAnalogLeftStick) {
+function analogButton(btn, path, x, y, isAnalogLeftStick) {
if (Math.abs(x) < deadZone) x = 0;
if (Math.abs(y) < deadZone) y = 0;
btn.style.transform = `translate(${x * 10}px,${y * 10}px)`
path.style.transform = `translate(${x * 10}px,${y * 10}px)`
- if(!isAnalogLeftStick){
+ if (!isAnalogLeftStick) {
return
}
- // move the character around the screen and dont let it go out of screen
- let characterX = hitbox.getBoundingClientRect().x;
- let characterY = hitbox.getBoundingClientRect().y;
- let characterWidth = hitbox.getBoundingClientRect().width;
- let characterHeight = hitbox.getBoundingClientRect().height;
- let windowWidth = window.innerWidth;
- let windowHeight = window.innerHeight;
- let characterNewX = characterX + x * 1.5;
- let characterNewY = characterY + y * 1.5;
-
-
- let characterDirection = "";
+ let characterDirection = "";
character.classList.toggle("face-up", false);
character.classList.toggle("face-down", false);
character.classList.toggle("face-left", false);
character.classList.toggle("face-right", false);
- if(x === 0 && y === 0){
+ if (x === 0 && y === 0) {
return;
}
if (x > 0) {
@@ -126,25 +132,7 @@ function analogButton(btn, path, x, y,isAnalogLeftStick) {
character.classList.toggle("face-up", true);
characterDirection = "up";
}
-
- // if (characterNewX < 0) {
- // hitbox.style.left = 0;
- // } else if (characterNewX + characterWidth > windowWidth) {
- // hitbox.style.left = windowWidth - characterWidth + "px";
- // } else {
- // hitbox.style.left = characterNewX + "px";
- // }
-
- // if (characterNewY < 0) {
- // hitbox.style.top = 0;
- // }
- // else if (characterNewY + characterHeight > windowHeight) {
- // hitbox.style.top = windowHeight - characterHeight + "px";
- // } else {
- // hitbox.style.top = characterNewY + "px";
- // }
}
-
function updateStatus() {
if (Object.keys(gamepads).length > 1) return;
let gamepad = navigator.getGamepads()[0];
@@ -186,10 +174,10 @@ function updateStatus() {
activateButton(rightBtn, dPad_right);
activateButton(backBtn, bk_key);
activateButton(startBtn, strt_key);
- activateButton(btnX, X_key);
- activateButton(btnY, Y_key);
- activateButton(btnA, A_key);
- activateButton(btnB, B_key);
+ activateButton(btnX, X_key,true);
+ activateButton(btnY, Y_key,true);
+ activateButton(btnA, A_key,true);
+ activateButton(btnB, B_key,true);
activateButton(btnL1, L1_key);
activateButton(btnR1, R1_key);
activateButton(btnL2, L2_key);
@@ -200,8 +188,8 @@ function updateStatus() {
pressuredButton(btnL2, btnL2Path, L2_key);
pressuredButton(btnR2, btnR2Path, R2_key);
- analogButton(leftAnalog, leftAnalogPath, leftAnalogX, leftAnalogY,true);
- analogButton(rightAnalog, rightAnalogPath, rightAnalogX, rightAnalogY,false);
+ analogButton(leftAnalog, leftAnalogPath, leftAnalogX, leftAnalogY, true);
+ analogButton(rightAnalog, rightAnalogPath, rightAnalogX, rightAnalogY, false);
}
requestAnimationFrame(updateStatus);
}
@@ -211,86 +199,115 @@ window.addEventListener("gamepaddisconnected", (e) => removeGamepad(e.gamepad));
tooltip.innerHTML = "Connect a gamepad and press any button!";
+// ================== Keyboard Movement ==================
+function keyboardMovement() {
+ let posX = hitbox.offsetLeft;
+ let posY = hitbox.offsetTop;
+ const speed = 2;
+ const keysPressed = {};
+
+ function moveCharacter() {
+ let moved = false;
+
+ if (keysPressed["w"]) {
+ posY -= speed;
+ moved = true;
+ character.classList.toggle("face-up", true);
+ w.classList.toggle("lit", true);
+ } else {
+ character.classList.toggle("face-up", false);
+ w.classList.toggle("lit", false);
+ }
+
+ if (keysPressed["a"]) {
+ posX -= speed;
+ moved = true;
+ character.classList.toggle("face-left", true);
+ a.classList.toggle("lit", true);
+ } else {
+ character.classList.toggle("face-left", false);
+ a.classList.toggle("lit", false);
+ }
+
+ if (keysPressed["s"]) {
+ posY += speed;
+ moved = true;
+ character.classList.toggle("face-down", true);
+ s.classList.toggle("lit", true);
+ } else {
+ character.classList.toggle("face-down", false);
+ s.classList.toggle("lit", false);
+ }
+
+ if (keysPressed["d"]) {
+ posX += speed;
+ moved = true;
+ character.classList.toggle("face-right", true);
+ d.classList.toggle("lit", true);
+ } else {
+ character.classList.toggle("face-right", false);
+ d.classList.toggle("lit", false);
+ }
+
+ // Keep the character within the window boundaries
+ posX = Math.max(0, Math.min(window.innerWidth - 50, posX));
+ posY = Math.max(0, Math.min(window.innerHeight - 50, posY));
+
+ if (moved) {
+ hitbox.style.left = posX + "px";
+ hitbox.style.top = posY + "px";
+ }
+ }
+ function gameLoop() {
+ moveCharacter();
+ requestAnimationFrame(gameLoop);
+ }
+ document.addEventListener("keydown", function (event) {
+ keysPressed[event.key.toLowerCase()] = true;
+ });
+
+ document.addEventListener("keyup", function (event) {
+ keysPressed[event.key.toLowerCase()] = false;
+ });
+
+ gameLoop();
+};
+
+// ================== Cheat Code Section ==================
+function triggerCheat() {
+ document.querySelector("h1").textContent = "Gamer Mode";
+ controller.style.display = "none";
+ keyboard.style.display = "block";
+ character.style.visibility = "visible";
+ hitbox.style.position = "absolute";
+ hitbox.style.left = "48%";
+ hitbox.style.bottom = "20%";
+ dialog.style.display = "none";
+ keyboardMovement();
+}
+document.addEventListener("keydown", event => {
+ if (cheatkeys.includes(event.key.toLowerCase())) {
+ cheatcodes.push(event.key.toLowerCase());
+ clearTimeout(cheatTimeout);
+ cheatTimeout = setTimeout(() => {
+ cheatcodes = [];
+ }, 3000);
+
+ if (cheatcodes.length == 5) {
+ let cheatcode = cheatcodes.join("");
+ if (cheatcode === "hlk18") {
+ isCheatActivated = true;
+ triggerCheat()
+ tooltip.textContent = `Cheat code activated!`;
+ }
+ cheatcodes = [];
+ }
+ } else {
+ cheatcodes = [];
+ }
+});
-
-
-
-
-
-
-
-
-
-// document.addEventListener("DOMContentLoaded", function () {
-// const character = document.getElementById("character");
-// const char = document.getElementById("char");
-
-// let posX = window.innerWidth / 2;
-// let posY = window.innerHeight / 2;
-// const speed = 2;
-// const keysPressed = {};
-
-// function moveCharacter() {
-// let moved = false;
-
-// if (keysPressed["w"]) {
-// posY -= speed;
-// moved = true;
-// char.classList.toggle("face-up", true);
-// } else {
-// char.classList.toggle("face-up", false);
-// }
-
-// if (keysPressed["a"]) {
-// posX -= speed;
-// moved = true;
-// char.classList.toggle("face-left", true);
-// } else {
-// char.classList.toggle("face-left", false);
-// }
-
-// if (keysPressed["s"]) {
-// posY += speed;
-// moved = true;
-// char.classList.toggle("face-down", true);
-// } else {
-// char.classList.toggle("face-down", false);
-// }
-
-// if (keysPressed["d"]) {
-// posX += speed;
-// moved = true;
-// char.classList.toggle("face-right", true);
-// } else {
-// char.classList.toggle("face-right", false);
-// }
-
-// // Keep the character within the window boundaries
-// posX = Math.max(0, Math.min(window.innerWidth - 50, posX));
-// posY = Math.max(0, Math.min(window.innerHeight - 50, posY));
-
-// if (moved) {
-// character.style.left = posX + "px";
-// character.style.top = posY + "px";
-// }
-// }
-
-// function gameLoop() {
-// moveCharacter();
-// requestAnimationFrame(gameLoop);
-// }
-
-// document.addEventListener("keydown", function (event) {
-// keysPressed[event.key.toLowerCase()] = true;
-// });
-
-// document.addEventListener("keyup", function (event) {
-// keysPressed[event.key.toLowerCase()] = false;
-// });
-
-// gameLoop();
-// });
006.GamePad/style.css
@@ -61,4 +61,53 @@
transform: translate3d(-100%,0,0)
}
}
-
\ No newline at end of file
+
+ .keyboard {
+ position: relative;
+ width: 200px;
+ height: 120px;
+ display: none;
+}
+
+ .keyboard button {
+ color : white;
+ text-decoration: none;
+ border: 3px solid white;
+ border-radius: 5px;
+ box-shadow: -2px 2px;
+ flex-grow: 1;
+ font-family: monospace;
+ background: black;
+ font-size: 20px;
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+}
+
+.left {
+ left: 0;
+}
+
+.right {
+ right: 0;
+ box-shadow: 2px -2px !important;
+}
+
+.top, .bottom {
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.bottom, .left, .right {
+ bottom: 0px;
+}
+
+.lit{
+ background: 3px solid var(--gold) !important;
+ color: var(--gold) !important;
+ border: 3px solid var(--gold) !important;
+}