Highland/DimensionInvasion
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Stage & Player Movement with Dash

Browse Source
This commit is contained in:
LittleSheep 2023-11-26 22:38:33 +08:00
commit 62ae1730fd
16 changed files with 1621 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

5
.prettierrc Normal file
View File

@ -0,0 +1,5 @@
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": false
}

28
README.md Normal file
View File

@ -0,0 +1,28 @@
## Usage
```bash
$ npm install # or pnpm install or yarn install
```
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
## Available Scripts
In the project directory, you can run:
### `npm run dev`
Runs the app in the development mode.<br>
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
### `npm run build`
Builds the app for production to the `dist` folder.<br>
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!
## Deployment
Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)

20
index.html Normal file
View File

@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cyberattack</title>
<style>
body, html {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

21
package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "@codingland/cyber-attack",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"solid-js": "^1.8.5",
"solid-styled-components": "^0.28.5"
},
"devDependencies": {
"solid-devtools": "^0.29.2",
"typescript": "^5.2.2",
"vite": "^5.0.0",
"vite-plugin-solid": "^2.7.2"
}
}

1294
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

1
public/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

9
src/index.tsx Normal file
View File

@ -0,0 +1,9 @@
/* @refresh reload */
import { render } from "solid-js/web";
import "solid-devtools";
import Root from "./root";
const root = document.getElementById("root");
render(() => <Root />, root!);

9
src/root.tsx Normal file
View File

@ -0,0 +1,9 @@
import Stage from "./stage";
export default function Root() {
return (
<div>
<Stage />
</div>
)
}

41
src/stage/index.tsx Normal file
View File

@ -0,0 +1,41 @@
import { styled } from "solid-styled-components";
import { Show, createSignal, onMount } from "solid-js";
import { vector2d } from "./vector";
import Player from "./objects/player";
const StageContainer = styled("div")`
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
`;
export default function Stage() {
let container: HTMLDivElement = document.createElement("div");
let playerPosition = new vector2d(0, 0);
let [ready, setReady] = createSignal(false);
function movePlayer(element: HTMLDivElement) {
playerPosition = new vector2d(
element.clientWidth / 2,
element.clientHeight / 2
);
setReady(true);
}
onMount(() => movePlayer(container));
return (
<StageContainer ref={container}>
<Show when={ready()}>
<Player size={64} position={playerPosition} />
</Show>
</StageContainer>
);
}

116
src/stage/objects/player.tsx Normal file
View File

@ -0,0 +1,116 @@
import { styled } from "solid-styled-components";
import { createSignal, onCleanup, onMount } from "solid-js";
import { vector2d } from "../vector";
export default function Player(props: {
size?: number;
speed?: number;
position?: vector2d;
}) {
const size = props.size ?? 64;
let speed = props.speed ?? 8;
// Movement & Position
const [x, setX] = createSignal(props.position?.x ?? 0);
const [y, setY] = createSignal(props.position?.y ?? 0);
let velocity = new vector2d(0, 0);
// Modify `velocity` value and then call this function
// This function will move position by `velocity`
function move() {
setX((x) => (x += velocity.x));
setY((y) => (y += velocity.y));
}
// Movement keybindings
window.addEventListener("keydown", ({ key }) => {
switch (key) {
case "w":
velocity.y = -speed;
break;
case "s":
velocity.y = speed;
break;
case "a":
velocity.x = -speed;
break;
case "d":
velocity.x = speed;
break;
}
});
window.addEventListener("keyup", ({ key }) => {
switch (key) {
case "w":
case "s":
velocity.y = 0;
break;
case "a":
case "d":
velocity.x = 0;
break;
}
});
// Keep listen to the `velocity` and call move function
onMount(() => {
const loop = setInterval(() => move(), 10);
onCleanup(() => clearInterval(loop));
});
// Skills
let cooldown: { [id: string]: number } = {
dash: 0,
};
function reduceCooldown(amount: number = 1) {
Object.keys(cooldown).forEach((k) => {
if (cooldown[k] > 0) {
cooldown[k] -= amount;
}
});
}
window.addEventListener("keydown", ({ key }) => {
// Dash
// Fast move from one place to another place
// TL;DR Speed up player movement speed in a short time
if (key == " " /* Spacebar */) {
if (cooldown.dash > 0) return;
const multiplier = 2
velocity.x *= multiplier;
velocity.y *= multiplier;
cooldown.dash = 1;
setTimeout(() => {
if (velocity.x > speed) velocity.x = speed;
if (velocity.x < -speed) velocity.x = -speed;
if (velocity.y > speed) velocity.y = speed;
if (velocity.y < -speed) velocity.y = -speed;
}, 250);
}
});
onMount(() => {
const loop = setInterval(() => reduceCooldown(0.01), 10);
onCleanup(() => clearInterval(loop));
});
// Renderer
const PlayerRenderer = styled("div")`
width: ${size.toString()}px;
height: ${size.toString()}px;
border-radius: ${(size / 2).toString()}px;
border: solid #eee 2px;
background-color: #fefefe;
position: absolute;
`;
return <PlayerRenderer style={{ left: `${x()}px`, top: `${y()}px` }} />;
}

9
src/stage/vector.ts Normal file
View File

@ -0,0 +1,9 @@
export class vector2d {
public x: number;
public y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}

1
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

26
tsconfig.json Normal file
View File

@ -0,0 +1,26 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
tsconfig.node.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import devtools from "solid-devtools/vite";
export default defineConfig({
plugins: [solid(), devtools({ autoname: true })],
});