fastcadejs v1.0.5
Copyright (c) 2020-2023 by Leonardo Berti
Arcade HTML5 Game Engine
(under construction!)
Usage
- File index.html
<html>
<head>
<title>Fastcade Game Engine Test</title>
</head>
<body>
<p>Test</p>
<canvas id="canvas"></canvas>
</body>
</html>- File index.ts
import {AnimationLoop,Graphics} from "fastcadejs";
class MyGame
{
constructor(private readonly gr:Graphics,private readonly animationLoop:AnimationLoop)
{
}
public render(timestamp: number, dt: number): void {
this.gr.cls();
this.gr.setTextColor(Graphics.C_WHITE);
this.gr.setDrawColor(Graphics.C_BLUE);
this.gr.drawCircle(100,100,20);
this.gr.setClearColor(Graphics.C_DARK_GREY);
this.gr.writeText(20, 20, "Hello!");
}
}
//entry point
window.onload = () => {
let game:MyGame;
(new AnimationLoop("canvas", 800, 600)).start(
(g: Graphics, a: AnimationLoop) => {
game = new MyGame(g, a);
}, (ts, dt) => {
game.render(ts, dt);
}
);
}Create a project with webpack
Prerequisites:
npm,nodejs
create a folder mygame and from that folder:
run
npm install typescriptinstall webpack and ts-loader
npm init -y
npm install -D webpack webpack-cli ts-loader webpack-dev-serverAdd a webpack.config.js file
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
title: 'our project',
template: 'src/index.html' })
],
devServer: {
static: path.join(__dirname, "dist"),
compress: true,
port: 4000,
},
};
Install the HtmlWebpackPlugin:npm install html-webpack-plugin --save-dev
Create a typescript configuration file:{ "compilerOptions": { "noImplicitAny": false, "target": "es2018", "module": "ES2015", "allowJs": true, "declaration": true, "removeComments": true, "sourceMap": true, "moduleResolution": "nodenext" }, "exclude": "node_modules" , "include": "src/*/" , }
Create a package configuration, add these two script to the scripts section of package.json"develop": "webpack-dev-server --mode development", "build" : "webpack --mode production"
now the package.json will look like:{ "dependencies": { "fastcadejs": "^1.0.1", "typescript": "^5.1.3" }, "name": "test_fastcadejs", "version": "1.0.0", "main": "index.js", "devDependencies": { "html-webpack-plugin": "^5.5.3", "ts-loader": "^9.4.3", "webpack": "^5.86.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "develop": "webpack-dev-server --mode development", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "description": "" }
Add the index.html and index.ts as defined in Usage section to ./src folder
Run the application from command line:npm run develop
Open browser on http://localhost:4000