inventory demo + movement of items

This commit is contained in:
cvoges12 2022-01-18 20:30:37 -06:00
parent cdf41544ab
commit a21f81037c

View file

@ -1,12 +1,21 @@
var canvas = document.querySelector('canvas'); var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d'); var c = canvas.getContext('2d');
window.addEventListener('load', () => {
resize();
})
window.addEventListener('resize', () => {
resize();
});
function resize(){
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
}
// Rect // Rect
//c.fillStyle = 'rgba(255,0,255,0.5)'; //c.fillStyle = 'rgba(255,0,255,0.5)';
//c.fillRect(100,200,100,100,0.5); //c.fillRect(100,200,100,100,0.5);
@ -68,41 +77,96 @@ function coil(x,y, width,od){
c.stroke(); c.stroke();
} }
for (var i=40; i < (12*40); i=i+40) { const coils = {
for (var j=50; j < (12*50); j=j+50) { xs: [],
coil(j,i, 20 + (5 * Math.random()),30 + (5 * Math.random())); ys: [],
widths: [],
ods: []
};
const field = {
xi: 0,
xf: 12,
yi: 0,
yf: 12,
}
const initCoil = {
x: 40,
y: 50,
width: 20,
od: 30,
}
function initCoils(obj, f, r){
for (var y=f.yi; y<f.yf; y++) {
for (var x=f.xi; x<f.yf; x++) {
var index = (y*f.xf) + x;
coils.xs[index] = (x + 1) * obj.x;
coils.ys[index] = (y + 1) * obj.y;
coils.widths[index] = obj.width + (r * Math.random());
coils.ods[index] = obj.od + (r * Math.random());
}
} }
} }
const coils = { initCoils(initCoil,field,5);
xs: [50,50,50,5],
ys: [50,150,250,35],
widths: [68,75,68,75],
ods: [80,80,100,100]
};
function drawCoils(){
for (var i=0; i < coils.xs.length; i++) {
coil(
coils.xs[i],
coils.ys[i],
coils.widths[i],
coils.ods[i]
);
}
}
//window.addEventListener('load', () => { function drawZone(x, y, row, length){
// const canvas = document.querySelector('#canvas'); c.strokeRect(
// const ctx = canvas.getContext("2d"); initCoil.x*(x+1) - 5,
// initCoil.y*(y+1) - 5,
// reloadEvent(canvas, ctx); initCoil.x*row - 5,
//}); initCoil.y*length - 5);
// }
//function reloadEvent(x, y){
// window.addEventListener('resize', () => { function drawZones(){
// resize(x, y); drawZone(0,0,6,6);
// }); drawZone(6,0,6,6);
//} drawZone(0,6,6,6);
// drawZone(6,6,6,6);
//function draw(x) { }
// x.strokeStyle = 'blue';
// x.lineWidth = '5'; function move(i, xf, yf){
// x.strokeRect(0, 0, window.innerWidth, window.innerHeight); if (coils.xs[i] > initCoil.x*(xf+1)) coils.xs[i]--;
//} if (coils.xs[i] < initCoil.x*(xf+1)) coils.xs[i]++;
// if (coils.ys[i] > initCoil.y*(yf+1)) coils.ys[i]--;
//function resize(x, y){ if (coils.ys[i] < initCoil.y*(yf+1)) coils.ys[i]++;
// x.height = window.innerHeight; }
// x.width = window.innerWidth;
// draw(y); function movements(){
//} move(0,2,13);
if ((coils.xs[0] == initCoil.x*(2+1))
&& (coils.ys[0] == initCoil.y*(13+1))) {
move(2,0,0);
if ((coils.xs[2] == initCoil.x*(0+1))
&& (coils.ys[2] == initCoil.y*(0+1))) {
move(0,2,0);
}
}
}
function animate(){
requestAnimationFrame(animate);
c.clearRect(0,0,innerWidth,innerHeight);
drawCoils();
drawZones();
movements();
//move(0,2,0);
}
animate();