Astuce de capture de la souris avec JS

4,904 codex

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 January 2026

Horloge React composée de composants d'horloges

14 January 2025

Exemple de page Web de portfolio

8 January 2025

Un code de Mikeykun

HTML

<!doctype html>
<html lang="en">
<head>
  <title>Webleb</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
      <script id="rendered-js">
const { useState, useRef, useEffect, useLayoutEffect, createContext } = React;

/**
 * Globals
 */

const CONSTANTS = {
  assetPath: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/184729" };

const ASSETS = {
  head: `${CONSTANTS.assetPath}/head.svg`,
  waiting: `${CONSTANTS.assetPath}/hand.svg`,
  stalking: `${CONSTANTS.assetPath}/hand-waiting.svg`,
  grabbing: `${CONSTANTS.assetPath}/hand.svg`,
  grabbed: `${CONSTANTS.assetPath}/hand-with-cursor.svg`,
  shaka: `${CONSTANTS.assetPath}/hand-surfs-up.svg` };

Object.keys(ASSETS).forEach(key => {
  const img = new Image();
  img.src = ASSETS[key];
});

const useHover = () => {
  const ref = useRef();
  const [hovered, setHovered] = useState(false);

const enter = () => setHovered(true);
  const leave = () => setHovered(false);

useEffect(
  () => {
    ref.current.addEventListener("mouseenter", enter);
    ref.current.addEventListener("mouseleave", leave);
    return () => {
      ref.current.removeEventListener("mouseenter", enter);
      ref.current.removeEventListener("mouseleave", leave);
    };
  },
  [ref]);

return [ref, hovered];
};

// Mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

useEffect(() => {
    const setFromEvent = e => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", setFromEvent);

return () => {
      window.removeEventListener("mousemove", setFromEvent);
    };
  }, []);

return position;
};

// Element position
const usePosition = () => {
  const ref = useRef();
  const [position, setPosition] = useState({});

const handleResize = () => {
    setPosition(ref.current.getBoundingClientRect());
  };

useLayoutEffect(() => {
    handleResize();
    window.addEventListener('resize', handleResize);

return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [ref.current]);

return [ref, position];
};

/**
 * React Components
 */

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      debug: false,
      cursorGrabbed: false,
      gameOver: false };

this.handleToggleDebug = this.handleToggleDebug.bind(this);
    this.handleButtonClicked = this.handleButtonClicked.bind(this);
    this.handleCursorGrabbed = this.handleCursorGrabbed.bind(this);
  }

handleToggleDebug() {
    this.setState({
      debug: !this.state.debug });

}

handleCursorGrabbed() {
    this.setState({
      cursorGrabbed: true });

setTimeout(() => {
      this.setState({
        cursorGrabbed: false });

}, 2000);
  }

handleButtonClicked() {
    this.setState({
      gameOver: true });

setTimeout(() => {
      this.setState({
        gameOver: false });

}, 4000);
  }

render() {
    const { cursorGrabbed, gameOver, debug } = this.state;
    const screenStyle = cursorGrabbed ? { cursor: "none" } : {};
    const appClass = debug ? "app app--debug" : "app";

return /*#__PURE__*/(
      React.createElement("div", { className: appClass, style: screenStyle }, /*#__PURE__*/
      React.createElement("section", { className: "container" }, /*#__PURE__*/
      React.createElement("h1", null, "Mouse Grabber"), /*#__PURE__*/
      React.createElement("p", null, "This is a classic website, no traps or weird stuff!"), /*#__PURE__*/

React.createElement("button", "Debug")), /*#__PURE__*/

React.createElement("button", {
        className: "trap-button",
        onClick: this.handleButtonClicked },
      gameOver && "Nice one",
      cursorGrabbed && "Gotcha!",
      !gameOver && !cursorGrabbed && "Button!"), /*#__PURE__*/

React.createElement("div", { className: "grab-zone-wrapper" }, /*#__PURE__*/
      React.createElement(GrabZone, {
        onCursorGrabbed: this.handleCursorGrabbed,
        cursorGrabbed: cursorGrabbed,
        gameOver: gameOver }))));

}}

// GrabZone (The hover trigger zone)
const GrabZone = ({ cursorGrabbed, gameOver, onCursorGrabbed }) => {
  const [outerRef, outerHovered] = useHover();
  const [innerRef, innerHovered] = useHover();
  const [isExtended, setExtendedArm] = useState(false);

// If state is grabbing for a long time, they're being clever!
  useEffect(() => {
    let timer;
    if (state === "grabbing") {
      timer = setTimeout(() => {
        // Not so clever now, are they?
        setExtendedArm(true);
        timer = null;
      }, 2000);
    }
    return () => {
      setExtendedArm(false);
      if (timer) {
        clearTimeout(timer);
      }
    };
  },
  [state]);

return /*#__PURE__*/(
    React.createElement("div", { className: "grab-zone", ref: outerRef }, /*#__PURE__*/
    React.createElement("div", { className: "grab-zone__debug" }, /*#__PURE__*/
    React.createElement("strong", null, "Debug info:"), /*#__PURE__*/
    React.createElement("p", null, "Current state: ", state), /*#__PURE__*/
    React.createElement("p", null, "Extended arm: ", isExtended ? "Yes" : "No")), /*#__PURE__*/

React.createElement("div", { className: "grab-zone__danger", ref: innerRef }, /*#__PURE__*/
    React.createElement(Grabber, {
      state: state,
      gameOver: gameOver,
      extended: isExtended,
      onCursorGrabbed: onCursorGrabbed }))));

};

// Grabber (The graphic)
const Grabber = ({ state, gameOver, extended, onCursorGrabbed }) => {
  const mousePos = useMousePosition();
  const [ref, position] = usePosition();
  const hasCursor = false;

// Calculate rotation of armWrapper
  const x = position.left + position.width * 0.5;
  const y = position.top + position.height * 0.5;
  const angle = gameOver ? 0 : Math.atan2(mousePos.x - x, -(mousePos.y - y)) * (180 / Math.PI);

// Ensure value is within acceptable range (-75 to 75)
  const rotation = Math.min(Math.max(parseInt(angle), -79), 79);

const grabberClass = `grabber grabber--${state} ${extended && "grabber--extended"}`;
  const wrapperStyle = { transform: `rotate(${rotation}deg)` };

let handImageSrc = ASSETS[state];

return /*#__PURE__*/(
    React.createElement("div", { className: grabberClass }, /*#__PURE__*/
    React.createElement("div", { className: "grabber__body" }), /*#__PURE__*/
    React.createElement("img", { className: "grabber__face", src: ASSETS.head }), /*#__PURE__*/
    React.createElement("div", { className: "grabber__arm-wrapper", ref: ref, style: wrapperStyle }, /*#__PURE__*/
    React.createElement("div", { className: "grabber__arm" }, /*#__PURE__*/
    React.createElement("img", {
      className: "grabber__hand",
      src: handImageSrc,
      onMouseEnter: onCursorGrabbed })))));

};

// Render app
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("app"));
//# sourceURL=pen.js
    </script>

CSS

h1 {
    font-size: 2.2rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
}
@media (min-width: 900px) {
    h1 {
        font-size: 2.488rem;
   }
}
h2 {
    font-size: 1.4rem;
    margin: 0.5rem 0;
    line-height: 1.15;
    font-weight: 200;
}
@media (min-width: 900px) {
    h2 {
        margin: 1rem 0;
        font-size: 1.44rem;
   }
}
p {
    margin-top: 0.25rem;
}
@media (min-width: 900px) {
    p {
        margin-top: 0.5rem;
   }
}
a {
    color: #0f1108;
    text-decoration: none;
    border-bottom: currentcolor 1px solid;
}
.container {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 1rem 100px 1rem;
}
@media (min-width: 900px) {
    .container {
        max-width: 650px;
        padding: 0 1rem 90px 1rem;
   }
}
.app {
    position: relative;
    background: #79c4e7;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 2rem);
    margin: 1rem;
    overflow: hidden;
}
.app--debug .grab-zone {
    background: rgba(0, 0, 0, 0.15);
}
.app--debug .grab-zone__debug {
    display: block;
}
.app--debug .grab-zone__danger {
    background: rgba(0, 0, 0, 0.15);
}
.app--debug .grabber__arm-wrapper {
    background: rgba(0, 0, 0, 0.15);
}
.grab-zone-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(30%) translateY(50%);
}
.grab-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 700px;
    height: 700px;
    border-radius: 50%;
}
.grab-zone__danger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
}
.grab-zone__debug {
    display: none;
    position: absolute;
    width: 300px;
    top: -100px;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
}
.grabber {
    position: relative;
    width: 100px;
    height: 100px;
}
.grabber__arm-wrapper {
    position: absolute;
    top: -80px;
    width: 24px;
    height: 260px;
}
.grabber__arm {
    position: relative;
    width: 24px;
    height: 200px;
    background: #7d9a9e;
    border-radius: 20px;
    overflow: visible;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}
.grabber__hand {
    display: block;
    position: absolute;
    top: -12px;
    transform: scale(1.4) rotate(-10deg) translateY(100%);
    transform-origin: bottom center;
    transition: transform 0.3s ease;
}
.grabber__face {
    position: absolute;
    width: 75px;
    height: 84px;
    right: 5%;
    transition: transform 0.3s ease;
}
.grabber__body {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 110px;
    height: 95px;
    border-radius: 50%;
    background: #7d9a9e;
    transition: transform 0.3s ease;
}
.grabber--waiting .grabber__hand {
    transform: scale(1.4) rotate(-10deg);
}
.grabber--waiting .grabber__arm {
    transform: translateY(80%);
}
.grabber--waiting .grabber__face {
    transform: translateY(60%);
}
.grabber--stalking .grabber__hand {
    transform: scale(1.4) rotate(-10deg);
}
.grabber--stalking .grabber__arm {
    transform: translateY(70%);
}
.grabber--stalking .grabber__face {
    transform: translateY(10%);
}
.grabber--grabbing .grabber__face {
    transform: translateY(-40%) rotate(10deg);
}
.grabber--grabbing .grabber__arm {
    transform: translateY(0%);
}
.grabber--grabbing .grabber__body {
    transform: translateY(-20%);
}
.grabber--grabbing .grabber__hand {
    transform: scale(1.7) rotate(10deg);
}
.grabber--grabbed .grabber__arm {
    transition: transform 1s ease;
}
.grabber--grabbed .grabber__hand {
    transition: transform 2.5s ease;
}
.grabber--grabbed .grabber__face {
    transform: translateY(70%);
    transition: transform 1s ease;
}
.grabber--grabbed .grabber__body {
    transform: translateY(50%);
    transition: transform 1s ease;
}
.grabber--extended .grabber__arm {
    transform: translateY(-20%);
}
.grabber--extended .grabber__face {
    transform: translateY(-60%) rotate(15deg);
}
.grabber--extended .grabber__body {
    transform: translateY(-40%);
}
.grabber--shaka .grabber__arm {
    transform: translateY(50%);
}
.grabber--shaka .grabber__hand {
    transform: scale(2.5) translateY(10%);
    animation: shaka 0.5s infinite alternate forwards;
    transform-origin: 55% 60%;
}
.grabber--shaka .grabber__face {
    transform: translateY(70%);
    transition: transform 1s ease;
}
.grabber--shaka .grabber__body {
    transform: translateY(50%);
    transition: transform 1s ease;
}
.trap-button {
    position: absolute;
    bottom: 80px;
    right: 70px;
    min-width: 125px;
    background: #8ecacc;
    color: white;
    border-radius: 5px;
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.debug-button {
    position: fixed;
    top: 0;
    right: 0;
    background: transparent;
    padding: 1rem;
    margin: 1rem;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
}
@keyframes shaka {
    0% {
        transform: scale(2.5) translateY(0%) rotate(-20deg);
   }
    100% {
        transform: scale(2.5) translateY(0%) rotate(20deg);
   }
}