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