First Game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSGL First Drawing</title>
<meta name="Author" content="Tymon Woźniak">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="center">
<canvas class="gameCanvas" id="gameCanvas"></canvas>
</div>
<!-- JSGL -->
<script src="js/JSGL-v0.1.1-alpha.js"></script>
<!-- SCRIPTS -->
<script src="js/main.js"></script>
</body>
</html>// Base
const canvas = document.getElementById("gameCanvas"); // HTML Canvas Element
const gridSettings = new GridSettings(8, 8); // Canvas grid resolution
const game = new GameManager(canvas, gridSettings, 0.8); // Create GameInstance
game.renderer.fitCanvas(); // Resizing canvas to document
// Creating new custom GameObject
// GameObject help https://github.com/Moderrek/JSGL/wiki/Class-GameObject
class Board extends GameObject{
// Override
OnStart(gameManager) {
gameManager.update(); // tells to game manager that him need to redraw frame.
}
// Override
OnDraw(renderer, gameManager) {
for(let x = 0; x < 8; x += 1){
for(let y = 0; y < 8; y += 1){
let color = "black";
if((x+y) % 2 === 0){
color = "white";
}
renderer.drawGridRect(x, y, 1, 1, color);
}
}
}
}
class Pawn extends GameObject{
// Override
OnStart(gameManager) {
gameManager.update(); // tells to game manager that him need to redraw frame.
}
// Override
OnDraw(renderer, gameManager) {
// X or Y + (1 - radius )/2
// because we want to draw circle at center of tile.
// 1 - represents 1 tile.
renderer.drawCircle(this.getX()+0.1, this.getY()+0.1, 0.8, "red");
}
// Override
OnMouseClick(pos, gameManager) {
console.log(`Clicked Pawn! @ ${pos}`);
}
}
// Starting game
game.addGameObject(new Board().setSortingOrder(-1));
game.addGameObject(new Pawn(2,3));
game.addGameObject(new Pawn(1,7));
game.addGameObject(new Pawn(3,7));
game.addGameObject(new Pawn(5,7));
game.addGameObject(new Pawn(7,7).setSortingOrder(-3)); // why invisible? Because this GameObject is under the board. Look at sorting order.
// game.getGameObjects() will print game objects in order.
game.startGameLoop(); // Starts game loop