escalator/escalator-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Some work

Browse Source
This commit is contained in:
Thomas Forgione 2018-08-20 17:22:33 +02:00
parent 445d143c13
commit 61ca6e1817
No known key found for this signature in database
GPG Key ID: 203DAEA747F48F41
10 changed files with 112 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
www/js/escalator.js

10
Makefile Normal file
View File

@ -0,0 +1,10 @@
.PHONY: www/js/escalator.js
www/js/escalator.js: $(shell find src -name "*.js")
cat \
src/open.js \
src/box.js \
src/main.js \
src/close.js \
> www/js/escalator.js

13
js/main.js
View File

@ -1,13 +0,0 @@
"use strict";
let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.log(canvas.width, canvas.height);
let context = canvas.getContext("2d");
context.fillStyle = "rgb(0.0, 0.0, 0.0)";
context.rect(canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
context.stroke();
console.log(canvas);

48
src/box.js Normal file
View File

@ -0,0 +1,48 @@
const MAX_SPEED = 20;
const MAX_JUMP = 2;
const G = 500;
class Box {
constructor() {
this.position = 0;
this.speed = 0;
this.size = 100;
this.jumpCounter = MAX_JUMP;
}
drawOn(canvas) {
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.beginPath();
ctx.rect(
canvas.width / 2.0 - this.size / 2.0,
canvas.height - this.size - this.position,
this.size,
this.size
);
ctx.fill();
}
update(time = 0.002) {
this.speed -= G * time;
this.speed = Math.max(this.speed, -MAX_SPEED);
this.position += this.speed;
if (this.position <= 0) {
this.position = 0;
this.speed = 0;
this.jumpCounter = MAX_JUMP;
}
}
jump() {
if (this.jumpCounter > 0) {
this.jumpCounter--;
this.speed = MAX_SPEED;
}
}
}

1
src/close.js Normal file
View File

@ -0,0 +1 @@
})();

40
src/main.js Normal file
View File

@ -0,0 +1,40 @@
let canvas, ctx, box;
init();
render();
function init() {
// Initialize canvas
canvas = document.getElementById('canvas');
document.body.style.margin = '0px';
onWindowResize();
ctx = canvas.getContext('2d');
// Initialize listeners
window.addEventListener('resize', onWindowResize);
document.addEventListener('touchstart', () => box.jump());
// Initialize game
box = new Box();
}
function render() {
// Manage physics
box.update();
// Do rendering
// canvas.width = canvas.width
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
box.drawOn(canvas);
requestAnimationFrame(render);
}
function onWindowResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

3
src/object.js Normal file
View File

@ -0,0 +1,3 @@
class Object {
}

2
src/open.js Normal file
View File

@ -0,0 +1,2 @@
"use strict";
(function() {

4
watch.sh Executable file
View File

@ -0,0 +1,4 @@
#!/usr/bin/env bash
inotifywait -r -q -e close_write src/ -m | while read line; do
make www/js/escalator.js
done

12
index.html → www/index.html
View File

@ -4,19 +4,13 @@
<title>Escalator</title> <title>Escalator</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<style> <style>
* { * { padding: 0; margin: 0; }
margin: 0px; canvas { display: block; margin: 0 auto; }
padding: 0px;
}
body {
overflow: hidden;
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<script src="js/main.js"></script> <script src="js/escalator.js"></script>
</body> </body>
</html> </html>