css - 使游戏响应(适应不同的屏幕尺寸)

Question

我正在使用 React JS 开发一个游戏元素。我无法使其响应。这更像是一个 CSS 问题，而不是我认为的 react 。有人可以建议一种方法来纠正这个问题。这就是我创建游戏场景的方式

这是关卡的代码:-

import React from "react";
import Scene from "../components/Scene";
import Sobject from "../components/Object";
import Room from "../images/level1/Room.png";
import Bed from "../images/level1/Bed.png";
import Bag from "../images/level1/Bag.png";
import Book from "../images/level1/Books.png";
import Window from "../images/level1/Window.png";
import { Link } from "react-router-dom";
import ReactCountdownClock from "react-countdown-clock";

export default class Level extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      show: false
    };
  }

  render() {
    return (
      <div>
        <Scene>
          <Sobject name={"room"} xPos={0} yPos={0}>
            <img src={Room} height="725" width="1485" />
          </Sobject>
          <Sobject name={"bed"} xPos={20} yPos={280}>
            <img src={Bed} height="445" width="850" />
          </Sobject>
          <Sobject name={"window"} xPos={10} yPos={20}>
            <img src={Window} height="260" width="380" />
          </Sobject>
          <Sobject name={"bag"} xPos={40} yPos={470}>
            <img src={Bag} height="200" />
          </Sobject>

          <Sobject name={"book"} xPos={440} yPos={330}>
            <img src={Book} height="180" width="180" />
          </Sobject>
        </Scene>
      </div>
    );
  }
}

这是场景组件:-

import React from "react";
export default class Scene extends React.Component {
  render() {
    return <div className={"scene-container"}>{this.props.children}</div>;
  }
}

这是对象组件:-

import React from "react";

export default class Sobject extends React.Component {
  constructor(props) {
    super(props);
    this.name = props.name | "";
    this.type = "generic";
    this.xPos = props.xPos | 0;
    this.yPos = props.yPos | 0;
  }

  render() {
    return (
      <div
        className={"object-container"}
        style={{
          left: this.xPos,
          top: this.yPos
        }}
      >
        {this.props.children}
      </div>
    );
  }
}

对象和场景的 SaaS:-

.scene-container
  position: absolute
  height: 100vh
  width: 100%
  background-color: black
  cursor: pointer

.object-container
  position: absolute
  cursor: pointer

Answer 1

您可以尝试在 SASS 文件中使用转换和媒体查询，如下所示:

SASS 代码:

$col-md: 768px;
$col-sm: 576px;  <--------------------------------------------add more of this
.scene-container {
  position:relative;
  width:991px;
  height:auto;
  margin:0 auto;
  @media screen and (max-width: $col-sm) {
     transform:scale(.6);   <---------------------------------addapt this value
  }
  @media screen and (min-width: $col-md) {    <---------------add more of this
     transform:scale(.8);   <---------------------------------and this value
  }
}

您可以添加更多媒体查询，这将使游戏更好地适应窗口。游戏不会一直全屏显示，每边都会有一个小空间，但它可以在任何设备上运行。您还必须调整变换比例。