My HTML:
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;">
<div id="box" align="center">
<button id="up">↑</button>
<br>
<button id="left">←</button>
<button id="down">↓</button>
<button id="right">→</button>
</div>
</canvas>
</body>
</html>
My css:
width: 100%
}
user-select:none;
My JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 0;
var y = 100;
var t = Date.now();
var speed = 400;
function draw(){
var timePassed = (Date.now() - t) / 1000;
t = Date.now();
var fps = Math.round(1 / timePassed);
ctx.clearRect(0,0,600,400);
ctx.beginPath();
ctx.rect(x,y,100 ,100);
ctx.font = "12px Arial";
ctx.fillText("FPS: " + fps , 20 , 30);
ctx.fillStyle = "brown";
ctx.fill();
if (i == 1 && x+100 < 600) {
x += (speed * timePassed);
}
else if (i == 2 && x > 0) {
x -= (speed * timePassed);
}
else if (i == 3 && y+100 < 400) {
y += (speed * timePassed);
}
else if (i == 4 && y > 0) {
y -= (speed * timePassed);
}
window.requestAnimationFrame(draw);
}
window.onload = init
function init() {
window.requestAnimationFrame(gameloop)
}
function gameloop() {
window.requestAnimationFrame(draw)
}
var i = 0;
let up = document.getElementById("up");
let left = document.getElementById("left");
let right = document.getElementById("right");
let down = document.getElementById("down");
up.ontouchstart = function() {
i = 1;
}
up.ontouchend = function() {
i = 0;
}
left.ontouchstart = function() {
i = 2;
}
left.ontouchend = function() {
i = 0;
}
right.ontouchstart = function() {
i= 3;
}
right.ontouchend = function() {
i = 0;
}
down.ontouchstart = function() {
i = 4;
}
down.ontouchend = function() {
i = 0;
}