✨ Stage & Player Movement with Dash
This commit is contained in:
commit
62ae1730fd
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal 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
5
.prettierrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": false
|
||||
}
|
||||
28
README.md
Normal file
28
README.md
Normal 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
20
index.html
Normal 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
21
package.json
Normal 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
1294
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
1
public/vite.svg
Normal file
1
public/vite.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
9
src/index.tsx
Normal file
9
src/index.tsx
Normal 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
9
src/root.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import Stage from "./stage";
|
||||
|
||||
export default function Root() {
|
||||
return (
|
||||
<div>
|
||||
<Stage />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
41
src/stage/index.tsx
Normal file
41
src/stage/index.tsx
Normal 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
116
src/stage/objects/player.tsx
Normal 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
9
src/stage/vector.ts
Normal 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
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal 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
10
tsconfig.node.json
Normal 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
7
vite.config.ts
Normal 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 })],
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user