使游戏具有响应性(适合不同的屏幕尺寸)

Question

我正在React JS中进行一个游戏项目。我无法让它做出回应。我认为这更像是一个CSS问题，而不是反应。有人能提出一个纠正这种情况的方法吗。这就是我创建游戏场景的方式

这是级别的代码：-

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

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