S3CR3T — BLEDWARD

creative / design / illustration

×

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ouija Board</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="board">
        <img id="planchette" src="planchette.png" alt="Planchette">
    </div>
    <input type="text" id="question" placeholder="Ask a question...">
    <button id="askButton">Ask</button>
    <div id="output"></div>
    <script src="script.js"></script>
</body>
</html>

const planchette = document.getElementById('planchette');
const board = document.getElementById('board');
const output = document.getElementById('output');
const askButton = document.getElementById('askButton');
const questionInput = document.getElementById('question');

function movePlanchette() {
    const x = Math.random() * (board.clientWidth - planchette.clientWidth);
    const y = Math.random() * (board.clientHeight - planchette.clientHeight);
    planchette.style.transform = `translate(${x}px, ${y}px)`;
}

function getRandomResponse() {
    const responses = [
        "Yes", "No", "Maybe", "Ask again later", "Definitely", "Not a chance", "Stupid Fuckin Question...","Don't ever ask that shit again.","What do you think?"
    ];
    return responses[Math.floor(Math.random() * responses.length)];
}

askButton.addEventListener('click', () => {
    const question = questionInput.value.trim();
    if (question) {
        movePlanchette();
        const response = getRandomResponse();
        output.innerText = response;
        questionInput.value = ''; // Clear the input after asking
    } else {
        alert("Please ask a question.");
    }
});

// Start moving the planchette every 3.7 seconds
setInterval(movePlanchette, 3000);

const planchette = document.getElementById('planchette');
const board = document.getElementById('board');
const output = document.getElementById('output');
const askButton = document.getElementById('askButton');
const questionInput = document.getElementById('question');

function movePlanchette() {
    const x = Math.random() * (board.clientWidth - planchette.clientWidth);
    const y = Math.random() * (board.clientHeight - planchette.clientHeight);
    planchette.style.transform = `translate(${x}px, ${y}px)`;
}

function getRandomResponse() {
    const responses = [
        "Yes", "No", "Maybe", "Ask again later", "Definitely", "Not a chance", "Stupid Fuckin Question...","Don't ever ask that shit again.","What do you think?"
    ];
    return responses[Math.floor(Math.random() * responses.length)];
}

askButton.addEventListener('click', () => {
    const question = questionInput.value.trim();
    if (question) {
        movePlanchette();
        const response = getRandomResponse();
        output.innerText = response;
        questionInput.value = ''; // Clear the input after asking
    } else {
        alert("Please ask a question.");
    }
});

// Start moving the planchette every 3.7 seconds
setInterval(movePlanchette, 3000);

Hello, World!

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
}

#board {
    position: relative;
    width: 600px;
    height: 400px;
    border: 0px solid white;
    background: url('BORED.png') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

#planchette {
    position: absolute;
    width: 150px; /* Adjust based on your planchette image size */
    height: auto;
    transition: transform 3.14s;
}

input {
    margin-top: 20px;
    padding: 10px;
    font-size: 16px;
}

button {
    margin-left: 10px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

#output {
    margin-top: 20px;
    font-size: 24px;
}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Ouija Board</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div id="board">

<img id="planchette" src="planchette.png" alt="Planchette">

</div>

<input type="text" id="question" placeholder="Ask a question...">

<button id="askButton">Ask</button>

<div id="output"></div>

<script src="script.js"></script>

</body>

</html>

Hello, World!