Light

christopher4lis / canvas-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

439.0 23.0 348.0 900 KB

An HTML5 canvas boilerplate with ES6 and live-reloading with BrowserSync.

JavaScript 92.28% HTML 7.72%

canvas-boilerplate's Introduction

Canvas Boilerplate is the go-to solution for quickly creating modern canvas pieces using ES6 and webpack.

Getting Started

Clone the repo:

git clone https://github.com/christopher4lis/canvas-boilerplate.git

Install dependencies:
```
yarn
```
or
```
npm install
```
Run webpack:
```
npm start
```

Your canvas piece should open up automatically at http://localhost:3000 and you should see 'HTML CANVAS BOILERPLATE' on hover.

canvas-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

fabioga stefcab erody chaitanyanarukulla avinashsivaraman hazantip artyprog immanuelsun westerjn rachdaup93 zremboldt congcongbo heibjornendre mmoehrlein hamzaerbay simondamminga thebrownviking20 absalan sagarpreet-chadha sidd-92 etuckram semiroundpizza8 bernatferragut k3rnel-err0r killercodes sartra mflodmark vikasrana1989 shahidfoy nicobresson rajibchanda mfarooqi tonymedrano mattcritelli clash-shubh vegasvikk bfriedman117 ckarras11 banafanah tusharkhan bachphuc bobbyprather arielprez charleschiayh whiplash5057 mblancodev mkbryla jamesgrubb tor020 shehanhasintha freneticninja evenzhanglll arredondop03 mrfoofums npkumar gregartist arturkondas dgiulian obsequey mortuz juleeya jabramova uoon-dev petarnonkovic gbspace kkannen wangabeng oksanaharris falsanu danilorenatosilva iamezell bstid mostafa7904 jayelbiz keren-w maclure koukouroukoukou ain-crad vshkr99 samer69255 theowavelet jonathan-e-rodriguez suipshesta blucky36 dnnp2011 wbchen99 seeo madeshichinmay gianfrancescogonzaga lungolago cubix1337 mhdalmajid gauravsinghrawat mr02trg bradencodes vcc1432 yaroslavkhadaihexup kurtvan caleblovell georgefikri

canvas-boilerplate's Issues

Square problem

I ran into a problem with square shape. Euclidean distance formula works but not as I expected. When one square touch the corner of other suqare - collision does not happened :(

Code Example:

	collision()
	{
		// this.collisions - many objects on scene (1 in this example)
		// this one current object
		for (var index in this.collisions) {
			if (this == this.collisions[index]) continue;
			
			if (this.distance(this.x, this.y, this.collisions[index].x, this.collisions[index].y) < this.width) {
				console.log('sense');
				break;
			}
		}
	}
	
	distance(x1, y1, x2, y2) {
		const xDist = x2 - x1
		const yDist = y2 - y1
		
		return Math.sqrt(Math.pow(xDist, 2) + Math.pow(yDist, 2));
	}

Can you explain why and how to solve it, please? Thank you

No wiki

I cant view the wiki to get the utils functions

Not Working

The code is not working for me. I did npm install, it got opened on localhost:3000 and it displays just the text "HTML CANVAS BOILERPLATE" along the cursor.
Am I missing out on something?

Project wont start at all.

The project wont work at all for me, using npm start prompts following error on Windows 11.

I freshly installed nodejs less than 1 hour ago, on a clean Windows 11 system. Running node v18.4.0.
Just cloned and did npm install, and have not touched files in between or after at all.

Regular expression denial of service in glob-parent - https://github.com/advisories/GHSA-ww39-953v-wcq6
PS D:\Development\Web Games\canvas-boilerplate> npm start

> [email protected] start
> webpack --config webpack.config.js


webpack is watching the files…

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\Development\Web Games\canvas-boilerplate\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\Development\Web Games\canvas-boilerplate\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at D:\Development\Web Games\canvas-boilerplate\node_modules\graceful-fs\graceful-fs.js:115:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\Development\Web Games\canvas-boilerplate\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at context.callback (D:\Development\Web Games\canvas-boilerplate\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\Development\Web Games\canvas-boilerplate\node_modules\babel-loader\lib\index.js:59:71
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.4.0
PS D:\Development\Web Games\canvas-boilerplate>

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.