Making game responsive (fit different screen sizes)

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


1 Answer
1

You can try to use transform and media queries in your SASS file like this:

SASS code:

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.