example canvas gameloop

2021-06-28 22:47:01 +03:00 · 2021-06-28 22:47:01 +03:00 · 7e4e40c4d0
commit 7e4e40c4d0
parent 5833b1f067
3 changed files with 120 additions and 0 deletions
--- a/JavaScript/GameLoop/game.js
+++ b/JavaScript/GameLoop/game.js
@ -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();
+}
--- a/JavaScript/GameLoop/index.html
+++ b/JavaScript/GameLoop/index.html
@ -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>
--- a/JavaScript/GameLoop/styles.css
+++ b/JavaScript/GameLoop/styles.css
@ -0,0 +1,10 @@
+body {
+    background-color: #101024;
+    padding: 0;
+    margin: 0;
+}
+
+canvas#game {
+    margin: 0 auto;
+    display: block;
+}