Question

I am working on a game project in React JS. I am not able to make it responsive. It's more of a CSS issue than react I think. Can someone please suggest an approach to correct this. This is how I have created the game scenes

Here is the code for Level:-

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>
    );
  }
}

Here is Scene Component:-

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

Here is Object Component:-

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 for Object and Scene:-

.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
  }
}

您可以添加更多媒体查询，这将使游戏更适合窗口显示。游戏不会一直全屏播放，每侧都有很小的空间，但可以在任何设备上使用。您还必须调整变换比例。

Making game responsive (fit different screen sizes)

1 个答案: