Gamesv2

<!DOCTYPE html>
<html>
    <head><title>Cross the Grid!</title>
        <style>
body {
    color : black;
    background-color : rgb(225, 150, 125);
}

#mygrid {
    width : 100%;
    padding : 6px;
    color : white;
    background-color : black;
}

#status {
    padding : 5px;
    display : none;
    border : 3px solid black;
}

#lives, #score {
    width : 45%;
    text-align : center;
    display : inline-block;
}

table, td {
    border : 2px solid black;
}

table {
    width : 100%;
    table-layout : fixed;
    border-collapse : collapse;
}

td {
    height : 30px;
    text-align : center;
    vertical-align : middle;
}

#startGame {
    width : 100%;
    padding : 7px;
    color : white;
    border : none;
    border-radius : 9px;
    background-color : black;
}

#controls {
    padding : 5px;
    display : none;
    text-align : center;
    border : 3px solid black;
}

#up, #down {
    width : 27px;
}

#up, #down, #left, #right {
    margin : 2px;
    padding : 2px;
    color : black;
    font-size : 23px;
    border : 3px solid rgb(220, 140, 130);
    background-color : rgb(225, 150, 125);
}

button:focus, button:active {
    outline : none;
}
</style>
    </head>
    <body>
        <select id="mygrid">
            <option value="5">5x5</option>
            <option value="6">6x6</option>
            <option value="7">7x7</option>
            <option value="8">8x8</option
value="9">9*9</option>        
        </select>
        <div id="status">
            <div id="lives"></div>
            <div id="score"></div>
        </div>
        <br><table id="grid">
           
        </table><br>
        <button id="startGame" onclick="newGame()">CROSS THE GRID!</button>
        <div id="controls">
            <button id="up" onclick="up()"><b>&uarr;</b></button>
            <br>
            <button id="left" onclick="left()"><b>&larr;</b></button>
            <button id="down" onclick="down()"><b>&darr;</b></button>
            <button id="right" onclick="right()"><b>&rarr;</b></button>
        </div>
        <script>
           

var grid, game;
var grid_x, grid_y;

var curr_x, curr_y;
var lives, score;

function newGame() {
    document.getElementById("mygrid").style.display = "none";
    document.getElementById("startGame").style.display = "none";
    var grid_size = document.getElementById("mygrid").value;
    grid = [];
    for (var x = 0; x < grid_size; x++) {
        grid[x] = [];
        for (var y = 0; y < grid_size; y++)
            grid[x][y] = "";
        var b = Math.floor(Math.random() * grid_size), c;
        grid[x][b] = "&#128163;";
        do {
            c = Math.floor(Math.random() * grid_size);
        } while (c === b);
        grid[x][c] = "&#127828;";
    }
    var a = Math.floor(Math.random() * grid_size);
    grid[grid_size] = [];
    for (var z = 0; z < grid_size; z++)
        if (z !== a)
            grid[grid_size][z] = "";
        else
            grid[grid_size][z] = "&#128694;";
    game = grid;
    grid_x = game.length;
    grid_y = game.length - 1;
    curr_x = grid_x - 1;
    curr_y = a;
    startGame(grid_size);
}

function startGame(grid_size) {
    lives = 5;
    score = 0;
    document.getElementById("lives").innerHTML = "&#10084;&#10084;&#10084;&#10084;&#10084;";
    document.getElementById("score").innerHTML = "<i>Score</i>: <b>0</b>";
    document.getElementById("status").style.display = "block";
    drawGrid();
    setTimeout(function() {
        for (var i = 0; i < grid_x - 1; i++)
            for (var j = 0; j < grid_y; j++)
                document.getElementById("cell_" + i + "_" + j).innerHTML = "";
        document.getElementById("controls").style.display = "block";
    }, 500 * grid_size);
}

function drawGrid() {
    var table = document.getElementById("grid");
    table.innerHTML = "";
    table.createCaption().innerHTML = "<b>------ EXIT ------</b>";
    var i, j, rows = [], cols = [];
    for (i = 0; i < grid_x; i++) {
        rows[i] = table.insertRow(i);
        for (j = 0; j < grid_y; j++) {
            cols[j] = rows[i].insertCell(j);
            cols[j].id = "cell_" + i + "_" + j;
            cols[j].innerHTML = game[i][j];
            if (i === grid_x - 1)
                cols[j].style.backgroundColor = "purple";
        }
    }
}

function up() {
    if (curr_x === 0) {
        alert("You succesfully crossed the grid!\nArea Covered + Food: " + score + "\nLives Remaining: " + lives + " (x" + (grid.length * 5 + 5) + ")\nTotal Score: " + (score + lives * (grid.length * 5 + 5)) + "\nCongrats!");
        document.getElementById("mygrid").style.display = "inline";
        document.getElementById("startGame").style.display = "block";
        document.getElementById("grid").innerHTML = "";
        document.getElementById("status").style.display = "none";
        document.getElementById("controls").style.display = "none";
    } else {
        document.getElementById("cell_" + curr_x + "_" + curr_y).innerHTML = "";
        curr_x--;
        changeGrid();
    }
}

function left() {
    if (curr_y !== 0) {
        document.getElementById("cell_" + curr_x + "_" + curr_y).innerHTML = "";
        curr_y--;
        changeGrid();
    }
}

function down() {
    if (curr_x < grid_x - 1) {
        document.getElementById("cell_" + curr_x + "_" + curr_y).innerHTML = "";
        curr_x++;
        changeGrid();
    }
}

function right() {
    if (curr_y < grid_y - 1) {
        document.getElementById("cell_" + curr_x + "_" + curr_y).innerHTML = "";
        curr_y++;
        changeGrid();
    }
}

function changeGrid() {
    var curr = document.getElementById("cell_" + curr_x + "_" + curr_y);
    if (game[curr_x][curr_y] === "&#128163;" && curr.style.backgroundColor !== "red") {
        var left = --lives, remaining = "";
        while (left > 0) {
            remaining += "&#10084;";
            left--;
        }
        document.getElementById("lives").innerHTML = remaining;
        if (lives === 0) {
            alert("You lost all your lives! Game Over!");
            document.getElementById("mygrid").style.display = "inline";
            document.getElementById("startGame").style.display = "block";
            document.getElementById("grid").innerHTML = "";
            document.getElementById("status").style.display = "none";
            document.getElementById("controls").style.display = "none";
        } else {
            alert("Ouch! You stepped on a BOMB!!");
            curr.style.backgroundColor = "red";
        }
    } else if (game[curr_x][curr_y] === "&#127828;" && curr.style.backgroundColor !== "green") {
        score += grid.length < 8 ? 25 : 35;
        document.getElementById("score").innerHTML = "<i>Score</i>: <b>" + score + "</b>";
        alert("Hurray! You found some FOOD!!");
        curr.style.backgroundColor = "green";
    } else {
        if (curr_x !== grid_x - 1 && curr.style.backgroundColor !== "red" && curr.style.backgroundColor !== "green" && curr.style.backgroundColor !== "purple") {
            score += grid.length < 8 ? 10 : 15;
            document.getElementById("score").innerHTML = "<i>Score</i>: <b>" + score + "</b>";
            curr.style.backgroundColor = "purple";
        }
    }
    curr.innerHTML = "&#128694;";
}
        </script>
    </body>
</html>


Siddikur Rahman Rayhan (Tamim )

Siddikur Rahman Rayhan from Bangladesh is a versatile individual with a keen interest in technology, cricket, politics, and Islamic studies. With a strong academic background and proficiency in multiple languages, he excels in blogging, YouTube, web development, Graphix Design and content creation. Skilled in video editing, meme generation, and photography, Rayhan is dedicated to personal and professional growth, seeking connections with like-minded individuals to support his endeavors.

إرسال تعليق (0)
أحدث أقدم