iiiypuk/config
iiiypuk/config
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

example canvas gameloop

Browse Source
This commit is contained in:
Alexander Popov 2021-06-28 22:47:01 +03:00
parent 5833b1f067
commit 7e4e40c4d0
Signed by: iiiypuk
GPG Key ID: 398FC73478D97286
3 changed files with 120 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
JavaScript/GameLoop/game.js Normal file
View File

@ -0,0 +1,97 @@
'use strict';
// Main variables
let DEBUG = true;
let canvas;
let context;
let cW;
let cH;
// FPS
let secondsPassed;
let oldTimeStamp;
let fps;
let dragging = false;
function mMove(e) {
if (dragging) {
point.pX = e.offsetX * cW / canvas.clientWidth | 0;
point.pY = e.offsetY * cH / canvas.clientHeight | 0;
};
}
function mDown(e) {
dragging = true;
}
function mUp(e) {
dragging = false;
}
function clearContext() {
context.fillStyle = '#b27e56';
context.fillRect(0, 0, cW, cH);
}
// Init
window.onload = function() {
canvas = document.getElementById('game');
context = canvas.getContext('2d');
cW = canvas.width;
cH = canvas.height;
canvas.style.height = window.innerHeight + "px";
if (DEBUG) {
console.log('Canvas set size to ' + window.innerHeight + 'px');
console.log(canvas.getBoundingClientRect());
};
canvas.addEventListener('mousedown', mDown, false);
canvas.addEventListener('mouseup', mUp, false);
canvas.addEventListener('mousemove', mMove, false);
canvas.addEventListener('touchstart', mDown, false);
canvas.addEventListener('touchend', mUp, false);
canvas.addEventListener('touchmove', mMove, false);
window.requestAnimationFrame(gameLoop);
};
window.addEventListener('resize', function() {
let canvas = document.getElementById('game');
canvas.style.height = window.innerHeight + "px";
if (DEBUG) {
console.log('Canvas resized to ' + window.innerHeight + 'px');
console.log(canvas.getBoundingClientRect());
};
}, true);
// GameLoop
function gameLoop(timeStamp) {
// fps counter
secondsPassed = (timeStamp - oldTimeStamp) / 1000;
oldTimeStamp = timeStamp;
fps = Math.round(1 / secondsPassed);
// end fps counter
update();
draw();
if (DEBUG) {
context.font = '15px Arial';
context.fillStyle = '#101024';
context.fillText('FPS: ' + fps, 10, 20);
};
window.requestAnimationFrame(gameLoop);
}
function update() {
}
function draw() {
clearContext();
}

13
JavaScript/GameLoop/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Game</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<canvas id="game" width="768" height="1366"></canvas>
<script type="text/javascript" src="game.js"></script>
</body>
</html>

10
JavaScript/GameLoop/styles.css Normal file
View File

@ -0,0 +1,10 @@
body {
background-color: #101024;
padding: 0;
margin: 0;
}
canvas#game {
margin: 0 auto;
display: block;
}