./exe/controller/readme.txt
This is a proof-of-concept for a game controller interface for tablets.
Giving up buttons for touch-screens certainly means simplicity for the hardware manufacturer, and often simplicity for the user as well. The screen size can afford to be bigger, since no space is given away to the buttons. But something is lost too... The good thing about a game controller is that once you learn it, you can use it without having to look at it.
This program attempts to bridge the gap by turning the tablet screen into a controller. The layout is all done with simple page divisions and css flexbox properties for layout. In fact, the only thing in the <body> that is not a <div> is the <canvas>.
The game here is just a moving square, nothing special. This template can be an interface to a whole variety of games written in javascript. Take it and modify it for your purposes. Different buttons can be added for different purposes, the color of everything can be changed... It really depends on the requirements of your game.
Many default touch controls had to be overridden in order to make sure that the player didn't accidentally scroll the page around or zoom in while tapping the buttons. Overriding defaults is one of the annoying but necessary things that have to be done in order to get programs running well on tablet.
./exe/controller/main.html
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="top">
</div>
<div class="middle">
<div class="left">
</div>
<div class="canvas_frame">
<canvas class="canvas"></canvas>
</div>
<div class="right">
</div>
</div>
<div class="bottom">
<div class="directions">
<div class="dirtop">
<div class="grid-item"></div>
<div class="dir-up"></div>
<div class="grid-item"></div>
</div>
<div class="dirmid">
<div class="dir-left"></div>
<div class="grid-item"></div>
<div class="dir-right"></div>
</div>
<div class="dirbot">
<div class="grid-item"></div>
<div class="dir-down"></div>
<div class="grid-item"></div>
</div>
</div>
<div class="bottom_middle">
<div class="bmt">
<div class="display">
001
</div>
<div class="display">
001
</div>
</div>
<div class="bmb">
</div>
</div>
<div class="buttons">
<div class="big-button">
</div>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
./exe/controller/style.css
html {
touch-action: none;
}
body {
background-color: #123;
/*cursor: none;*/
overflow: hidden;
}
div {
background-color: #456;
display: flex;
align-items: stretch;
justify-content:stretch;
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container {
flex-direction: column;
border-radius:30px 30px 100px 100px;
border: #369 outset;
justify-content: center;
background-color: #345;
}
canvas {
background-color: #111;
height: 55vh;
border-radius: 5px;
touch-action: none;
border: #369 inset;
}
.top {
padding: 1vh;
width: 2px;
visibility: hidden;
}
.canvas_frame {
background-color: #456;
padding: 20px;
flex-grow:1;
border-radius: 1vh 1vw 0px 0px;
border: #369 inset;
border-bottom: none;
visibility: visible;
}
.bottom {
background-color: #456;
border-radius: 0px 0px 100px 100px;
}
.middle {
background-color: #345;
visibility: hidden;
}
.canvas,
.bottom_middle {
flex-grow:2;
}
.bottom_middle {
background-color: #456;
flex-direction: column;
}
.bmt {
height: 16vh;
background-color: #456;
justify-content: space-between;
}
.bmb{
background-color: #345;
flex-grow: 1;
border-top: #369 outset;
}
.left,
.right {
width: 7vh;
background-color: #345;
visibility: hidden;
}
.display {
font: 20px Courier;
justify-content: center;
align-items: center;
color: coral;
margin: 40px;
border-radius: 30px;
background-color: #123;
border:inset #234;
flex:1;
}
.buttons,
.directions {
background-color: #345;
padding: 10px 50px;
flex-direction:column;
border: #369 outset;
}
.directions {
border-top-right-radius: 120px;
border-bottom-left-radius: 100px;
}
.buttons {
border-top-left-radius: 120px;
border-bottom-right-radius: 100px;
justify-content: center;
}
.dirtop,
.dirmid,
.dirbot {
visibility:hidden;
}
.big-button,
.dir-left,
.dir-up,
.dir-right,
.dir-down,
.grid-item {
border: #548 solid;
padding: 4vh;
}
.big-button,
.dir-left,
.dir-up,
.dir-right,
.dir-down {
border-radius: 50%;
visibility:visible;
background-color: #734;
}
.big-button:active,
.dir-left:active,
.dir-up:active,
.dir-right:active,
.dir-down:active {
background-color: #634;
border: #548 inset;
}
.big-button {
padding: 5vw;
}
./exe/controller/game.js
const canvas = document.querySelector(".canvas")
canvas.width = canvas.clientWidth-20;
canvas.height = canvas.clientHeight-20;
const up = document.querySelector(".dir-up")
const left = document.querySelector(".dir-left")
const right = document.querySelector(".dir-right")
const down = document.querySelector(".dir-down")
const button = document.querySelector(".big-button")
const ctx = canvas.getContext('2d');
function preventDefault(e){
e.preventDefault();
}
document.body.addEventListener('touchmove', preventDefault, { passive: false });
console.log('width',canvas.width);
console.log('height',canvas.height);
let x = 100;
let y = 100;
function draw_player(){
clear();
console.log('drawing');
ctx.fillStyle = "#123";
ctx.fillRect(x,y,100,100);
}
function clear() {
ctx.fillStyle = "#000";
ctx.fillRect(0,0,canvas.width, canvas.height);
}
up.addEventListener("pointerdown", (e) => {
y-=10;
draw_player();
});
down.addEventListener("pointerdown", (e) => {
y+=10;
draw_player();
});
right.addEventListener("pointerdown", (e) => {
x+=10;
draw_player();
});
left.addEventListener("pointerdown", (e) => {
x-=10;
draw_player();
});
button.addEventListener("pointerdown", (e) => {
ctx.fillStyle = "#369";
ctx.fillRect(x,y, 100, 100);
});
