Scribd Logo
Upload

Welcome to Scribd!

  • Textdfg

    Uploaded by

    azetrap4
    10 views4 pages
    This document describes an online collaborative pixel art game called Conflictium. Players can choose a color and click on grid cells to place that color, with the leaderboard updating based on the most used colors. The game also includes a chat and allows bots to randomly place pixels.

    Original Description:

    h

    Original Title

    textdfg

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes an online collaborative pixel art game called Conflictium. Players can choose a color and click on grid cells to place that color, with the leaderboard updating based on the most used colors. The game also includes a chat and allows bots to randomly place pixels.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    10 views4 pages

    Textdfg

    Uploaded by

    azetrap4
    This document describes an online collaborative pixel art game called Conflictium. Players can choose a color and click on grid cells to place that color, with the leaderboard updating based on the most used colors. The game also includes a chat and allows bots to randomly place pixels.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 4

    <!

    DOCTYPE html>
    <html lang="tr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conflictium</title>
    <style>
    body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Arial', sans-serif;
    }

    #game-container {
    margin-top: 30px;
    text-align: center;
    }

    #game-map {
    display: grid;
    grid-template-columns: repeat(30, 20px);
    gap: 1px;
    margin: 20px auto;
    }

    .cell {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    cursor: pointer;
    }

    button {
    margin: 5px;
    padding: 10px;
    font-size: 14px;
    }

    #chat-container {
    margin-top: 20px;
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    max-height: 200px;
    }

    #leaderboard {
    margin-top: 20px;
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    max-height: 200px;
    }

    </style>
    </head>
    <body>

    <div id="game-container">
    <h1>Welcome to Conflictium!</h1>
    <p>Collaborate in real-time to create a unique masterpiece.</p>

    <label for="color-input">Choose Color:</label>


    <input type="color" id="color-input" class="color-input">
    <button onclick="startGame()">Start Game</button>

    <div id="game-map"></div>

    <div id="chat-container">
    <h2>Chat</h2>
    <div id="chat-messages"></div>
    <input type="text" id="message-input" placeholder="Type your message">
    <button onclick="sendMessage()">Send Message</button>
    </div>

    <div id="leaderboard">
    <h2>Leaderboard</h2>
    <ul id="leaderboard-list"></ul>
    </div>
    </div>

    <script>
    let gameStarted = false;
    const boardSize = 30;
    const gameMap = document.getElementById("game-map");
    let currentColor = "";
    const chatMessages = document.getElementById("chat-messages");
    const messageInput = document.getElementById("message-input");
    const leaderboardList = document.getElementById("leaderboard-list");

    function startGame() {
    if (!gameStarted) {
    gameStarted = true;
    initializeGameMap();
    updateLeaderboard();
    setInterval(placeBotPixel, 3000);
    }
    }

    function initializeGameMap() {
    for (let i = 0; i < boardSize * boardSize; i++) {
    const cell = document.createElement("div");
    cell.className = "cell";
    cell.id = `cell-${i}`;
    cell.addEventListener("click", () => changeColor(cell));
    gameMap.appendChild(cell);
    }
    }
    function changeColor(cell) {
    if (gameStarted) {
    const colorInput = document.getElementById("color-input");
    currentColor = colorInput.value;
    cell.style.backgroundColor = currentColor;
    updateLeaderboard();
    }
    }

    function sendMessage() {
    if (gameStarted) {
    const message = messageInput.value.trim();
    if (message !== "") {
    const messageElement = document.createElement("div");
    messageElement.textContent = message;
    chatMessages.appendChild(messageElement);
    messageInput.value = "";
    }
    }
    }

    function updateLeaderboard() {
    if (gameStarted) {
    const leaderboardData = getLeaderboardData();
    renderLeaderboard(leaderboardData);
    }
    }

    function getLeaderboardData() {
    const cells = document.querySelectorAll(".cell");
    const leaderboardData = {};

    cells.forEach(cell => {
    const color = cell.style.backgroundColor;
    if (color) {
    leaderboardData[color] = (leaderboardData[color] || 0) + 1;
    }
    });

    return leaderboardData;
    }

    function renderLeaderboard(data) {
    const sortedData = Object.entries(data).sort((a, b) => b[1] - a[1]);

    leaderboardList.innerHTML = "";
    sortedData.forEach(entry => {
    const listItem = document.createElement("li");
    listItem.textContent = `${entry[0]}: ${entry[1]}`;
    leaderboardList.appendChild(listItem);
    });
    }

    function placeBotPixel() {
    if (gameStarted) {
    const cells = document.querySelectorAll(".cell");
    const randomCell = cells[Math.floor(Math.random() * cells.length)];
    if (randomCell.style.backgroundColor === "") {
    randomCell.style.backgroundColor = getRandomColor();
    updateLeaderboard();
    }
    }
    }

    function getRandomColor() {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
    }
    </script>
    </body>
    </html>

    You might also like