init
commit
e325366861
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<script defer src="playground.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="grid-area: debug">
|
||||||
|
<span id="FPS">FPS: </span>
|
||||||
|
<button onclick="addBug()">Add Bug</button>
|
||||||
|
<button onclick="addBouncer()">Add Bouncer</button>
|
||||||
|
</div>
|
||||||
|
<canvas id="c" style="grid-area: canvas"></canvas>
|
||||||
|
</body>
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
"use strict"
|
||||||
|
let fps = 0;
|
||||||
|
const logicTickRate_ms = 100;
|
||||||
|
|
||||||
|
//Rending the
|
||||||
|
const render = (time) => {
|
||||||
|
fps += 1;
|
||||||
|
ctx.clearRect(0,0, c.width, c.height);
|
||||||
|
drawables.forEach(d => {
|
||||||
|
ctx.save();
|
||||||
|
d.draw(d, ctx);
|
||||||
|
ctx.restore();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderLoop = (time) => {
|
||||||
|
requestAnimationFrame(renderLoop);
|
||||||
|
render(time);
|
||||||
|
}
|
||||||
|
|
||||||
|
const logicLoop = () => {
|
||||||
|
// Update the world state.
|
||||||
|
|
||||||
|
//Iterate over drawables, and do something fun with them
|
||||||
|
drawables = drawables
|
||||||
|
.map((d) => {
|
||||||
|
switch(d.name)
|
||||||
|
{
|
||||||
|
case "bug":
|
||||||
|
//jiggle the bug
|
||||||
|
return {
|
||||||
|
...d,
|
||||||
|
position: {
|
||||||
|
x: clamp(d.position.x + randomIntInclusive(-5, 5), 0, c.width - d.width),
|
||||||
|
y: clamp(d.position.y + randomIntInclusive(-5, 5), 0, c.height - d.height)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
case "bouncer":
|
||||||
|
//Bounces around like the dvd logo.
|
||||||
|
return {
|
||||||
|
...d,
|
||||||
|
position: dvdBounce(d)
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function dvdBounce(drawable){
|
||||||
|
if((drawable.position.x) <= 0){
|
||||||
|
drawable.direction[0] = 1;
|
||||||
|
}
|
||||||
|
if((drawable.position.x + drawable.size) >= c.width){
|
||||||
|
drawable.direction[0] = -1;
|
||||||
|
}
|
||||||
|
if((drawable.position.y) <= 0){
|
||||||
|
drawable.direction[1] = 1;
|
||||||
|
}
|
||||||
|
if((drawable.position.y + drawable.size) >= c.height){
|
||||||
|
drawable.direction[1] = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: drawable.position.x + (drawable.direction[0] * drawable.speed),
|
||||||
|
y: drawable.position.y + (drawable.direction[1] * drawable.speed)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(logicLoop, logicTickRate_ms)
|
||||||
|
}
|
||||||
|
|
||||||
|
//Print debugging info
|
||||||
|
setInterval(()=> {
|
||||||
|
document.getElementById("FPS").textContent = `FPS: ${fps}`;
|
||||||
|
fps = 0;
|
||||||
|
}, 1000, fps)
|
||||||
|
|
||||||
|
// ================== //
|
||||||
|
// Events
|
||||||
|
window.onresize = (event) =>{
|
||||||
|
fixCanvasStyle(c);
|
||||||
|
}
|
||||||
|
const addBug = () => {
|
||||||
|
drawables.push({
|
||||||
|
name: "bug",
|
||||||
|
position: {
|
||||||
|
x: randomIntInclusive(0, c.width),
|
||||||
|
y: randomIntInclusive(0, c.height)
|
||||||
|
},
|
||||||
|
width: 10,
|
||||||
|
height: 15,
|
||||||
|
draw: (self, ctx) => ctx.fillRect(self.position.x, self.position.y, self.width, self.height)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const addBouncer = () => {
|
||||||
|
drawables.push({
|
||||||
|
name: "bouncer",
|
||||||
|
position: {
|
||||||
|
x: randomIntInclusive(0, c.width),
|
||||||
|
y: randomIntInclusive(0, c.height)
|
||||||
|
},
|
||||||
|
size: 30,
|
||||||
|
colour: "#f22",
|
||||||
|
speed: 10,
|
||||||
|
direction: [1,1], //Vector x,y
|
||||||
|
draw: (self, ctx) =>{
|
||||||
|
ctx.fillStyle = self.colour;
|
||||||
|
ctx.fillRect(self.position.x, self.position.y, self.size, self.size)
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ================== //
|
||||||
|
// Utils
|
||||||
|
function randomIntInclusive(min, max) {
|
||||||
|
min = Math.ceil(min);
|
||||||
|
max = Math.floor(max);
|
||||||
|
return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
|
||||||
|
}
|
||||||
|
function fixCanvasStyle(canvas){
|
||||||
|
//Canvas met een hoogte/breedte gezet via css schaalt het canvas naar de juiste groote
|
||||||
|
// met deze functie vergroot je het aantal pixels in het canvas.
|
||||||
|
const cStyle = getComputedStyle(canvas);
|
||||||
|
const stripNonDidgits = /[^\d.-]/g;
|
||||||
|
|
||||||
|
canvas.height = cStyle.height.replace(stripNonDidgits,'')
|
||||||
|
canvas.width = cStyle.width.replace(stripNonDidgits,'')
|
||||||
|
}
|
||||||
|
function clamp(value, min, max){
|
||||||
|
if(value > max) return max;
|
||||||
|
if(value < min) return min;
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ================== //
|
||||||
|
// Setup
|
||||||
|
|
||||||
|
// The array containing all our drawable objects.
|
||||||
|
let drawables = [{
|
||||||
|
name: "wall",
|
||||||
|
position: {
|
||||||
|
x: 100,
|
||||||
|
y: 140
|
||||||
|
},
|
||||||
|
thickness: 10,
|
||||||
|
draw: ()=>{}
|
||||||
|
}]
|
||||||
|
|
||||||
|
const c = document.getElementById("c") // The canvas
|
||||||
|
const ctx = c.getContext('2d'); // The rendering context of the canvas
|
||||||
|
fixCanvasStyle(c);
|
||||||
|
|
||||||
|
// Add a couple moving things for fun
|
||||||
|
addBug();
|
||||||
|
addBug();
|
||||||
|
addBug();
|
||||||
|
addBouncer();
|
||||||
|
addBouncer();
|
||||||
|
|
||||||
|
//start de logic & rendering loops
|
||||||
|
logicLoop();
|
||||||
|
window.requestAnimationFrame(renderLoop);
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: #ddd;
|
||||||
|
display:grid;
|
||||||
|
grid-template-areas: "canvas canvas canvas"
|
||||||
|
"canvas canvas canvas"
|
||||||
|
"debug controls controls";
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
body > {
|
||||||
|
display:grid;
|
||||||
|
}
|
||||||
|
canvas{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue