feat(game) : added ui base for steering
parent
4f3e52b9d7
commit
602536bc23
|
@ -2,9 +2,9 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
<title>Mario Kart 3.js</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.2 KiB |
|
@ -0,0 +1,35 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
export const HUD = () => {
|
||||
const wheel = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e) => {
|
||||
if (wheel.current) {
|
||||
const { clientX, clientY } = e;
|
||||
const screenWidth = window.innerWidth;
|
||||
const rotation = ((clientX - screenWidth / 2) / screenWidth) * 180;
|
||||
|
||||
wheel.current.style.left = `${clientX - 100}px`;
|
||||
wheel.current.style.top = `${clientY - 100}px`;
|
||||
wheel.current.style.transform = `rotate(${rotation}deg)`;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<img
|
||||
ref={wheel}
|
||||
src="./steering_wheel.png"
|
||||
alt="steering wheel"
|
||||
className="steering-wheel"
|
||||
style={{ position: 'absolute', pointerEvents: 'none', transformOrigin: 'center' }}
|
||||
/>
|
||||
);
|
||||
};
|
|
@ -3,6 +3,23 @@
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
*
|
||||
body {
|
||||
margin: 0;
|
||||
cursor:none;
|
||||
overflow-y: none;
|
||||
overflow-x: none;
|
||||
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
position:absolute;
|
||||
z-index: 100;
|
||||
top:0;
|
||||
width: 200px;
|
||||
opacity: 0.2;
|
||||
}
|
|
@ -2,9 +2,11 @@ import React from 'react'
|
|||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
import { HUD } from './HUD'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<HUD />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue