🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../../../567358.klas4s23.mid-ica.nl/public_html/l2-pro-3-gamecraft-webdevelopers/gamecraft.js

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function (event) {
    if (!event.target.matches('.buttontxt')) {
        let dropdowns = document.getElementsByClassName("revealcontent");
        let i;
        for (i = 0; i < dropdowns.length; i++) {
            let openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}
//Nancy's Spel Code begin
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

//"animating"
let yCor = 0;
let yMove = 0;
let yArrow = -60;
let xArrow = -65;
let moveArrow;
let bowVisible = false;
let fadeIn = 20;
//images
let bullsEye = new Image();
let SkyBackground = new Image();
let bullseyeImage = new Image();
let forestBackground = new Image();
let bow = new Image();
let bowInAction = new Image();
let arrow = new Image();
let scoreBackground = new Image();
scoreBackground.src = "scoreBackground.jpg";
arrow.src = "arrow.png";
bow.src = "bow.png";
bowInAction.src = "bow2.png";
bullseyeImage.src = "bullseyetitle.png";
SkyBackground.src = "skyy.png";
forestBackground.src = "Forestbackground.jpg";
bullsEye.src = "bullseye.png";
canvas.width = 700;
canvas.height = 600;
//var
let mousePosOnCanvas = { x: 0, y: 0 };
let isInAction;
let arrowExists = false;
let angleArrow = 0;
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let fiveArrows = 5;
let score = 0;
let bullsEye1 = new bord(20, 80, 50, 50);
let bullsEye2 = new bord(410, 200, 80, 80);
let bullsEye3 = new bord(260, 180, 50, 50);
let bullsEye4 = new bord(510, 100, 50, 50);
let bullsEye5 = new bord(600, 160, 80, 80);
let arrow1 = new arrowPoint(xArrow, yArrow, 10, 10);

let rectRoundOne;
let rectRoundTwo;
let rectRoundThree;
/*let bullsEye1;
let bullsEye2;
let bullsEye3;
let bullsEye4;
let bullsEye5;
*/
function loadingGame() {
    buttonArea = new obj({ x: 0, y: 0 }, { x: 100, y: 100 });
    rectRoundOne = new roundRect({ x: 280, y: 320 }, { x: 130, y: 52.5 }, "red");
    rectRoundTwo = new roundRect({ x: 260, y: 310 }, { x: 170, y: 70 }, "red");
    rectRoundThree = new roundRect({ x: 250, y: 300 }, { x: 190, y: 90 }, "red");
    // bullsEye1 = new picture({x: 20, y: 80, width: 50, height: 50 });
    // bullsEyesArray[1] = new picture({ bullsEye, x: 410, y: 200, width: 80, height: 80 });
    // bullsEyesArray[2] = new picture({ bullsEye, x: 260, y: 180 }, { width: 50, height: 50 });
    // bullsEyesArray[3] = new picture({ bullsEye, x: 510, y: 100 }, { width: 50, height: 50 });
    // bullsEyesArray[4] = new picture({ bullsEye, x: 600, y: 160 }, { width: 80, height: 80 });
    //  bullsEyesArray = new picture[bullsEye1, bullsEye2];
    animate();
}
/*   ctx.drawImage(bullsEye, 20, 80, 50, 50);
ctx.drawImage(bullsEye, 410, 200, 80, 80);
ctx.drawImage(bullsEye, 260, 180, 50, 50);
ctx.drawImage(bullsEye, 510, 100, 50, 50);
ctx.drawImage(bullsEye, 600, 160, 80, 80);*/

function rotateTheRect(x, y, degrees) {
    ctx.save();
    ctx.translate(350, 480);
    ctx.rotate(degrees * Math.PI / 180);
    if (bowVisible) {
        fadeIn--;
        if (fadeIn < 0) {
            ctx.drawImage(isInAction ? bowInAction : bow, -bow.width / 2, -bow.height / 2);
        }
    }
    ctx.restore();
}

function animate() {
    window.requestAnimationFrame(animate);
    //uncomment when needed  console.log("tick");
    //background 
    ctx.drawImage(forestBackground, 0, 0, 700, 600);
    //bullseyes
    // bullsEyesArray.forEach(element => {
    //     element.draw();
    // });
    ctx.font = "20px Tillana"
    ctx.fillStyle = "white"
    ctx.fillText(`Arrows left = ${fiveArrows}`, 75, 30);
    ctx.drawImage(SkyBackground, 0, yCor, 700, 600);
    //rotate "bow"
    rotateTheRect(centerX, centerY, angle);
    //arrow appears
    createArrow();
    collission();
    if (collission(arrowPoint, bord)) {
        console.log("Pijl heeft het bord geraakt!");
    }
    //points
    //bullseyeTitel
    ctx.drawImage(bullseyeImage, 530, yCor + 120, 100, 100);
    //titel styling
    ctx.font = "600 90px Tillana";
    ctx.fillStyle = "#7a340c";
    ctx.textAlign = "center";
    ctx.fillText("Archery", 350, yCor + 200);
    ctx.font = "600 90px Tillana";
    ctx.strokeStyle = "#481e06";
    ctx.textAlign = "center";
    ctx.strokeText("Archery", 350, yCor + 200);
    ctx.fillStyle = "white";
    ctx.roundRect(250, yCor + 300, 190, 90);
    ctx.fill();
    //button styling
    ctx.font = "600 40px Tillana";
    ctx.fillStyle = "#7a340c";
    ctx.fillText("Play", 343, yCor + 358);

    rectRoundOne.setYCor(yCor);
    rectRoundTwo.setYCor(yCor);
    rectRoundThree.setYCor(yCor);

    rectRoundOne.draw();
    rectRoundTwo.draw();
    rectRoundThree.draw();
    //animation
    yCor -= yMove;
    if (yCor == -600) {
        yMove = 0;
    }

    if (arrowExists) {
        yArrow -= 2;
    }

    if (fiveArrows == 0) {
        ctx.drawImage(scoreBackground, 0, 0, 700, 600);
        ctx.font = "500 30px Tillana";
        ctx.fillStyle = "red";
        ctx.fillText(`Your Score: ${score}`, 250, 300);
        ctx.font = "500 30px Tillana";
        ctx.fillStyle = "red";
        ctx.fillText(`Highscore: ${score}`, 240, 350);
        ctx.drawImage(bullseyeImage, 460, 115, 90, 90);
        ctx.font = "600 60px Tillana";
        ctx.fillStyle = "#7a340c";
        ctx.textAlign = "center";
        ctx.fillText("Archery", 340, 180);
        ctx.font = "600 60px Tillana";
        ctx.strokeStyle = "#481e06";
        ctx.textAlign = "center";
        ctx.strokeText("Archery", 340, 180);
        ctx.fillStyle = "red";
        ctx.roundRect(250, 400, 170, 70, 5);
        ctx.fill();
        ctx.strokeStyle = "white";
        ctx.roundRect(250, 400, 170, 70, 5);
        ctx.stroke();
        ctx.strokeStyle = "white";
        ctx.roundRect(260, 410, 150, 50, 5);
        ctx.stroke();
        ctx.strokeStyle = "white";
        ctx.roundRect(260, 410, 150, 50, 5);
        ctx.stroke();
        ctx.strokeStyle = "white";
        ctx.roundRect(270, 415, 135, 35, 5);
        ctx.stroke();
        ctx.font = "600 20px Tillana";
        ctx.fillStyle = "white";
        ctx.fillText("Play Again?", 335, 440);
    }
}


function mouseObj(obj) {
    console.log(mousePosOnCanvas.x, mousePosOnCanvas.y, ' ', obj.position.x, obj.position.y)
    if (mousePosOnCanvas.x > obj.position.x &&
        mousePosOnCanvas.x < obj.position.x + obj.size.x &&
        mousePosOnCanvas.y > obj.position.y &&
        mousePosOnCanvas.y < obj.position.y + obj.size.y) {
        return true;
    }
}

function mousePressed() {
    console.log(mouseObj(rectRoundOne));

    if (mouseObj(rectRoundThree)) {
        console.log("clicked!");
        yMove = 10;
        bowVisible = true;
    }
}

canvas.addEventListener("mousedown", mousePressed);
//coor van muis
function onMouseMove(event) {
    mousePosOnCanvas = getTransformPoint(event.offsetX, event.offsetY);
    console.log(mousePosOnCanvas.x + "_" + mousePosOnCanvas.y);
}

function getTransformPoint(x, y) {
    const mPoint = new DOMPoint(x, y);
    return ctx.getTransform().transformPoint(mPoint);
}
canvas.addEventListener("mousemove", onMouseMove);

class obj {
    constructor(position, size, color) {
        this.position = position;
        this.size = size;
        this.color = color;
    }
}
/*class picture {
    constructor(x, y, width, height) {

        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
    setPos(x, y) {
        this.x = x;
        this.y = y;
    }
    draw(image) {
        ctx.drawImage(image, this.x, this.y, this.width, this.height);
        //ctx.drawImage(this.bullsEye, this.x, this.y, this.width, this.height);

    }
}*/
//button
class roundRect {
    constructor(position, size, borderColor) {
        this.position = position;
        this.size = size;
        this.borderColor = borderColor;
        this._yCor = 0;
    }

    setYCor(yCor) {
        this._yCor = yCor;
    }

    draw() {
        ctx.beginPath();
        ctx.strokeStyle = this.borderColor;
        ctx.roundRect(this.position.x, this.position.y + this._yCor, this.size.x, this.size.y, 5);
        ctx.stroke();
        ctx.roundRect(this.position.x + 0.5, this.position.y + 0.5 + this._yCor, this.size.x + 1, this.size.y + 1, 5);
        ctx.stroke();
        ctx.roundRect(this.position.x + 1, this.position.y + 1 + this._yCor, this.size.x + 2, this.size.y + 2, 5);
        ctx.stroke();
        ctx.roundRect(this.position.x - 1, this.position.y - 1 + this._yCor, this.size.x + 5, this.size.y + 5, 5);
        ctx.stroke();
    }

}
//bow angle
let angle = 0;
//bow control
document.addEventListener("keydown", keyDown);

function keyDown(event) {
    isInAction = true;
    console.log(event.key);
    if (event.key == "ArrowLeft") {
        angle -= 5;
    } else if (event.key == "ArrowRight") {
        angle += 5;
    }
}
//shoot arrow
document.addEventListener("keyup", shoot);

function shoot(event) {
    if (event.key == " ") {
        console.log("space");
        isInAction = false;
        arrowExists = true;
        angleArrow = angle;
        angle = 0;
        createArrow();
        fiveArrows -= 1;
    }
}

function createArrow() {
    if (bowVisible && arrowExists) {
        ctx.save();
        ctx.translate(350, 480);
        ctx.rotate(angleArrow * Math.PI / 180);
        ctx.drawImage(arrow, xArrow, yArrow, 130, 130);
        ctx.restore();
    }
}
function collission(a, b) {

    return a.x < b.x + b.width &&

        a.x + a.width > b.x &&

        a.y < b.y + b.height &&

        a.y + a.height > b.y;

}

function bord(x, y, width, height) {

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

}



function arrowPoint(xArrow, yArrow, width, height) {

    this.xArrow = xArrow;

    this.yArrow = yArrow;

    this.width = width;

    this.height = height;

}
//Nancy's Spel Code einde

🎯 Available Actions