[英]Making game responsive (fit different screen sizes)
I am working on a game project in React JS. 我正在React JS中开发游戏项目。 I am not able to make it responsive.
我无法使其响应。 It's more of a CSS issue than react I think.
我认为这更多的是CSS问题而不是反应。 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:- 对象和场景的Saas:
.scene-container
position: absolute
height: 100vh
width: 100%
background-color: black
cursor: pointer
.object-container
position: absolute
cursor: pointer
You can try to use transform and media queries in your SASS file like this: 您可以尝试在SASS文件中使用转换和媒体查询,如下所示:
SASS code: 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
}
}
You can add more media queries, it will make the game fit better in the window. 您可以添加更多媒体查询,这将使游戏更适合窗口显示。 The game wont be full screen all the time, there will be a small space each side but it will work on any device.
游戏不会一直全屏播放,每侧都有很小的空间,但可以在任何设备上使用。 You will also have to adapt the transform scale.
您还必须调整转换比例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.