Some work
This commit is contained in:
parent
445d143c13
commit
61ca6e1817
|
|
@ -0,0 +1 @@
|
||||||
|
www/js/escalator.js
|
||||||
|
|
@ -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
13
js/main.js
|
|
@ -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);
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
})();
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
class Object {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
"use strict";
|
||||||
|
(function() {
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
Loading…
Reference in New Issue