uploaded existing project
This commit is contained in:
Ole Morud
22
main.html
Normal file
22
main.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="main.js" defer></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<style>
|
||||
canvas {
|
||||
border:1px solid #d3d3d3;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="startGame()" class="center">
|
||||
<br>
|
||||
</body>
|
||||
<html>
|
||||
162
main.js
Normal file
162
main.js
Normal file
@@ -0,0 +1,162 @@
|
||||
|
||||
// Canvas config
|
||||
const framerate = 120;
|
||||
const canvas_width = 800;
|
||||
const canvas_height = 600;
|
||||
|
||||
// Physics config
|
||||
const gravity = 250;
|
||||
const floorpos = (canvas_height * 0.8)
|
||||
|
||||
// Entities
|
||||
let points = [];
|
||||
let lines = [];
|
||||
|
||||
const myGameArea = {
|
||||
canvas: document.createElement("canvas"),
|
||||
|
||||
start: function () {
|
||||
this.canvas.width = canvas_width;
|
||||
this.canvas.height = canvas_height;
|
||||
this.context = this.canvas.getContext("2d");
|
||||
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
|
||||
this.frameNo = 0;
|
||||
this.interval = setInterval(updateGameArea, 1000 / framerate);
|
||||
},
|
||||
|
||||
clear: function () {
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
}
|
||||
|
||||
class line {
|
||||
constructor(a, b) {
|
||||
|
||||
this.a = a;
|
||||
this.b = b;
|
||||
|
||||
this.curLength = function () {
|
||||
let dx = this.a.x - this.b.x;
|
||||
let dy = this.a.y - this.b.y;
|
||||
return Math.sqrt(dx * dx + dy * dy);
|
||||
};
|
||||
|
||||
this.distance = this.curLength();
|
||||
|
||||
this.update = function () {
|
||||
const delta = this.distance - this.curLength();
|
||||
const nx = (this.a.x - this.b.x) / this.curLength();
|
||||
const ny = (this.a.y - this.b.y) / this.curLength();
|
||||
|
||||
this.a.x += nx * delta / 2;
|
||||
this.a.y += ny * delta / 2;
|
||||
this.b.x -= nx * delta / 2;
|
||||
this.b.y -= ny * delta / 2;
|
||||
};
|
||||
|
||||
this.draw = function () {
|
||||
const ctx = myGameArea.context
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(this.a.x, this.a.y);
|
||||
ctx.lineTo(this.b.x, this.b.y);
|
||||
ctx.stroke();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
const a = new point(-50 + canvas_width / 2, 50 + canvas_height / 3, (Math.random() - 0.5) * 10, -2, 0, gravity);
|
||||
const b = new point(50 + canvas_width / 2, 50 + canvas_height / 3, (Math.random() - 0.5) * 10, -2, 0, gravity);
|
||||
const c = new point(-50 + canvas_width / 2, -50 + canvas_height / 3, (Math.random() - 0.5) * 10, -2, 0, gravity);
|
||||
const d = new point(50 + canvas_width / 2, -50 + canvas_height / 3, (Math.random() - 0.5) * 10, -2, 0, gravity);
|
||||
|
||||
points.push(a);
|
||||
points.push(b);
|
||||
points.push(c);
|
||||
points.push(d);
|
||||
|
||||
lines.push(new line(a, b));
|
||||
lines.push(new line(a, c));
|
||||
lines.push(new line(a, d));
|
||||
lines.push(new line(b, c));
|
||||
lines.push(new line(b, d));
|
||||
lines.push(new line(c, d));
|
||||
|
||||
myGameArea.start();
|
||||
}
|
||||
|
||||
class point {
|
||||
constructor(x, y, xvel, yvel, xacc, yacc) {
|
||||
this.x = x;
|
||||
this.oldx = x - xvel;
|
||||
this.xacc = xacc;
|
||||
|
||||
this.y = y;
|
||||
this.oldy = y - yvel;
|
||||
this.yacc = yacc;
|
||||
|
||||
this.tempx;
|
||||
this.tempy;
|
||||
|
||||
this.update = function () {
|
||||
|
||||
if (this.y > floorpos) {
|
||||
this.oldy = this.y;
|
||||
this.y = canvas_height * 0.8 - 0.01;
|
||||
this.oldx = (this.x + this.oldx) / 2;
|
||||
}
|
||||
|
||||
if (this.x < 0) {
|
||||
this.oldx = this.x;
|
||||
this.x = 0;
|
||||
}
|
||||
|
||||
if (this.x > canvas_width) {
|
||||
this.oldx = this.x;
|
||||
this.x = canvas_width;
|
||||
}
|
||||
|
||||
this.tempx = this.x;
|
||||
this.tempy = this.y;
|
||||
this.x += (this.x - this.oldx) + this.xacc / (framerate * framerate);
|
||||
this.y += (this.y - this.oldy) + this.yacc / (framerate * framerate);
|
||||
this.oldx = this.tempx;
|
||||
this.oldy = this.tempy;
|
||||
|
||||
|
||||
/* // uncomment to draw dots on points
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, 5, 0, 2*Math.PI);
|
||||
ctx.fillStyle = "red"
|
||||
ctx.fill();
|
||||
/* */
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function updateGameArea() {
|
||||
|
||||
myGameArea.clear();
|
||||
myGameArea.frameNo += 1;
|
||||
|
||||
const ctx = myGameArea.context
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, floorpos);
|
||||
ctx.lineTo(canvas_width, floorpos);
|
||||
ctx.stroke();
|
||||
|
||||
for (let n = 0; n < 2; n++) {
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
points[i].update();
|
||||
}
|
||||
|
||||
for (let j = 0; j < 1; j++) {
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
lines[i].update();
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
lines[i].draw();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user