Skip to content
GitLab
Commit 43775e1a authored by Sander Kvenild's avatar Sander Kvenild
Browse files

Added rectangles

parent 8f18d6c7
Hide whitespace changes
Inline Side-by-side
js-ov13-oop3-sander-kvenild/minebobler.html
View file @ 43775e1a
......@@ -6,7 +6,9 @@
</head>
<body>
<canvas id="canvas" height="400" width="600"></canvas>
<canvas id="canvas" height="400" width="600"></canvas> <br>
Form, trykk 'M' for å endre:
<div id="shape">Sirkel</div>
<script>
......@@ -52,31 +54,83 @@
}
}
}
class Rektangel {
constructor(x,y,w,h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.farge = randomColor();
this.orginalFarge = this.farge;
}
flytt() {
this.x = this.x + Math.floor(Math.random() * 10 -5);
this.y = this.y + Math.floor(Math.random() * 10 -5);
}
// Keep bubbles from going outside of canvas
sjekk() {
this.x = this.x - this.w > 0 ? this.x : this.w
this.y = this.y - this.h > 0 ? this.y : this.h
this.x = this.x + this.w < canvas.width ? this.x : canvas.width - this.w
this.y = this.y + this.h < canvas.height ? this.y : canvas.height -this.h
}
vis() {
ctx.beginPath();
ctx.fillStyle = this.farge;
ctx.fillRect(this.x,this.y,this.w,this.h);
ctx.strokeStyle = "white";
ctx.strokeRect(this.x,this.y,this.w,this.h);
}
inneholder(musx,musy) {
// TODO: remake for rectangle
if (musx > this.x && musx < this.x + this.w &&
musy > this.y && musy < this.y + this.h)
{
return true;
} else {
return false;
}
}
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener("mousedown",musklikk,false);
canvas.addEventListener("mousemove",musbeveg,false);
var shapeText = document.getElementById("shape")
window.addEventListener("keypress",keypress,false);
var bobler = [];
for(let i = 0; i < 10; i++) {
nyBoble();
nyRektangel();
}
setInterval(tegn,100);
setInterval(nyBoble, 1000);
setInterval(nyRektangel, 1000);
function nyBoble() {
let x = Math.floor(Math.random() * canvas.width);
let y = Math.floor(Math.random() * canvas.height);
let r = Math.floor(Math.random() * 40 + 10);
let x = Math.floor(Math.random() * canvas.width - r);
let y = Math.floor(Math.random() * canvas.height - r);
bobler.push(new Boble(x,y,r));
}
function nyRektangel() {
// TODO: add usage
let x = Math.floor(Math.random() * canvas.width);
let y = Math.floor(Math.random() * canvas.height);
let w = Math.floor(Math.random() * 50 + 20);
let h = Math.floor(Math.random() * 50 + 20);
bobler.push(new Rektangel(x,y,w,h)); // TODO: Create new array for rektangler
}
function tegn() {
reset();
for(let i = 0; i < bobler.length; i++) {
......@@ -102,9 +156,16 @@
}
if(fikkvalgtenboble == false) {
let r = Math.floor(Math.random() * 40 + 10);
let b = new Boble(event.x,event.y,r);
bobler.push(b);
if (shapeText.innerText == "Sirkel") {
let r = Math.floor(Math.random() * 40 + 10);
let b = new Boble(event.x,event.y,r);
bobler.push(b);
} else {
let w = Math.floor(Math.random() * 50 + 20);
let h = Math.floor(Math.random() * 50 + 20);
let r = new Rektangel(event.x - w/2,event.y - h/2,w,h);
bobler.push(r);
}
}
}
......@@ -125,6 +186,16 @@
return `#${r}${g}${b}`
}
function keypress(event) {
if (event.code == 'KeyM') {
if (shapeText.innerText == "Sirkel") {
shapeText.innerText = "Rektangel";
} else {
shapeText.innerText = "Sirkel";
}
}
}
</script>
</body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment