BEST JAVASCRIPT GAMES AND PROGRAMS FOR BEGINNERS WITH SOURCE CODE

June 07, 2021

In this article, we are talking about javascript GAMES and Programs for Beginners and experience both. This program is very helpful for interviews and self practices.

Javascript-

Scripting language (object-oriented)

A lightweight programming language developed by Netscape

Interpreted, not compiled

Designed to be embedded in browsers

Ideal for adding interactivity to HTML pages

Detect browser versions

Work with info from the user via HTML forms

Create cookies

Validate form data

Read and write HTML elements

Supported by all major browsers

Internet Explorer has JScript (started in IE3)

The syntax is similar to Java, but it‟s not Java per se
Usually, JavaScript code is embedded within HTML code using the script tag:
Can have more than one pair of script tags on a page
Semicolons: C++ and JAVA require them but in JavaScript it‟s optional

Syntax of javascript

We are creating a First Program is Calculator based on the javascript programming language.

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>

Let's see another validation javascript program

Tic-Tac-Toe

We are creating another Tic-Tac-Toe Javascript, HTML, CSS Based programming Game.

<!DOCTYPE html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    
    <link rel="stylesheet" 
        type="text/css" href="tic.css">
  
    
    <script src="tic.js"></script>
<style>
    /* CSS Code */
    /* Heading */
    h1 {
        color: orangered;
        font-size: 45px;
    }
  
    /* 3*3 Grid */
    #b1, #b2, #b3, #b4, #b5, 
    #b6, #b7, #b8, #b9 {
        width: 80px;
        height: 52px;
        margin: auto;
        border: 1px solid gray;
        border-radius: 6px;
        font-size: 30px;
        text-align: center;
    }
  
    /* Reset Button */
    #but {
        box-sizing: border-box;
        width: 95px;
        height: 40px;
        border: 1px solid dodgerblue;
        margin: auto;
        border-radius: 4px;
        font-family: Verdana, 
            Geneva, Tahoma, sans-serif;
  
        background-color: dodgerblue;
        color: white;
        font-size: 20px;
        cursor: pointer;
    }
  
    /* Player turn space */
    #print {
        font-family: Verdana, 
            Geneva, Tahoma, sans-serif;
  
        color: dodgerblue;
        font-size: 20px;
    }
  
    /* Main Contianer */
    #main {
        text-align: center;
    }
  
    /* Game Instruction Text */
    #ins {
        font-family: Verdana, 
            Geneva, Tahoma, sans-serif;
              
        color: dodgerblue;
        font-size: 17px;
    }
</style>
</head>
  
<body>
    <div id="main">
        <h1>TIC TAC TOE</h1>
  
        
        <p id="ins">Game starts by just Tap on 
            box<br><br>First Player starts as 
            <b>Player X</b><br>And<br>Second 
            Player as <b>Player 0</b>
        </p>
  
        <br><br>
        
        <input type="text" id="b1" onclick=
            "myfunc_3(); myfunc();" readonly>
  
        <input type="text" id="b2" onclick=
            "myfunc_4(); myfunc();" readonly>
  
        <input type="text" id="b3" onclick=
            "myfunc_5(); myfunc();" readonly>
        <br><br>
  
        <input type="text" id="b4" onclick=
            "myfunc_6(); myfunc();" readonly>
              
        <input type="text" id="b5" onclick=
            "myfunc_7(); myfunc();" readonly>
  
        <input type="text" id="b6" onclick=
            "myfunc_8(); myfunc();" readonly>
        <br><br>
  
        <input type="text" id="b7" onclick=
            "myfunc_9(); myfunc();" readonly>
  
        <input type="text" id="b8" onclick=
            "myfunc_10();myfunc();" readonly>
  
        <input type="text" id="b9" onclick=
            "myfunc_11();myfunc();" readonly>
  
        
        <br><br><br>
        
        <button id="but" onclick="myfunc_2()">
            RESET
        </button>
  
        <br><br>
        
        <p id="print"></p>
  
    </div>
</body>
  
</html>

// Function called whenever user tab on any box
function myfunc() {
  
    // Setting DOM to all boxes or input field
    var b1, b1, b3, b4, b5, b6, b7, b8, b9;
    b1 = document.getElementById("b1").value;
    b2 = document.getElementById("b2").value;
    b3 = document.getElementById("b3").value;
    b4 = document.getElementById("b4").value;
    b5 = document.getElementById("b5").value;
    b6 = document.getElementById("b6").value;
    b7 = document.getElementById("b7").value;
    b8 = document.getElementById("b8").value;
    b9 = document.getElementById("b9").value;
  
    // Checking if Player X won or not and after 
    // that disabled all the other fields
    if ((b1 == 'x' || b1 == 'X') && (b2 == 'x' ||
        b2 == 'X') && (b3 == 'x' || b3 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player X won');
    }
    else if ((b1 == 'x' || b1 == 'X') && (b4 == 'x' ||
        b4 == 'X') && (b7 == 'x' || b7 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
  
        window.alert('Player X won');
    }
    else if ((b7 == 'x' || b7 == 'X') && (b8 == 'x' || 
        b8 == 'X') && (b9 == 'x' || b9 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        window.alert('Player X won');
    }
    else if ((b3 == 'x' || b3 == 'X') && (b6 == 'x' || 
        b6 == 'X') && (b9 == 'x' || b9 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        window.alert('Player X won');
    }
    else if ((b1 == 'x' || b1 == 'X') && (b5 == 'x' || 
        b5 == 'X') && (b9 == 'x' || b9 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        window.alert('Player X won');
    }
    else if ((b3 == 'x' || b3 == 'X') && (b5 == 'x' || 
        b5 == 'X') && (b7 == 'x' || b7 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player X won');
    }
    else if ((b2 == 'x' || b2 == 'X') && (b5 == 'x' || 
        b5 == 'X') && (b8 == 'x' || b8 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player X won');
    }
    else if ((b4 == 'x' || b4 == 'X') && (b5 == 'x' || 
        b5 == 'X') && (b6 == 'x' || b6 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player X won');
    }
  
    // Checking of Player X finsh
    // Checking for Player 0 starts, Is player 0 won or
    // not and after that disabled all the other fields
    else if ((b1 == '0' || b1 == '0') && (b2 == '0' || 
        b2 == '0') && (b3 == '0' || b3 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b1 == '0' || b1 == '0') && (b4 == '0' || 
        b4 == '0') && (b7 == '0' || b7 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b7 == '0' || b7 == '0') && (b8 == '0' || 
        b8 == '0') && (b9 == '0' || b9 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b3 == '0' || b3 == '0') && (b6 == '0' || 
        b6 == '0') && (b9 == '0' || b9 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b1 == '0' || b1 == '0') && (b5 == '0' || 
        b5 == '0') && (b9 == '0' || b9 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b3 == '0' || b3 == '0') && (b5 == '0' || 
        b5 == '0') && (b7 == '0' || b7 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b2 == '0' || b2 == '0') && (b5 == '0' || 
        b5 == '0') && (b8 == '0' || b8 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b4 == '0' || b4 == '0') && (b5 == '0' || 
        b5 == '0') && (b6 == '0' || b6 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
  
    // Checking of Player 0 finsh
    // Here, Checking about Tie
    else if ((b1 == 'X' || b1 == '0') && (b2 == 'X' 
        || b2 == '0') && (b3 == 'X' || b3 == '0') && 
        (b4 == 'X' || b4 == '0') && (b5 == 'X' || 
        b5 == '0') && (b6 == 'X' || b6 == '0') && 
        (b7 == 'X' || b7 == '0') && (b8 == 'X' || 
        b8 == '0') && (b9 == 'X' || b9 == '0')) {
            document.getElementById('print')
                .innerHTML = "Match Tie";
            window.alert('Match Tie');
    }
    else {
  
        // Here, Printing Result
        if (flag == 1) {
            document.getElementById('print')
                .innerHTML = "Player X Turn";
        }
        else {
            document.getElementById('print')
                .innerHTML = "Player 0 Turn";
        }
    }
}
  
// Function to reset game
function myfunc_2() {
    location.reload();
    document.getElementById('b1').value = '';
    document.getElementById("b2").value = '';
    document.getElementById("b3").value = '';
    document.getElementById("b4").value = '';
    document.getElementById("b5").value = '';
    document.getElementById("b6").value = '';
    document.getElementById("b7").value = '';
    document.getElementById("b8").value = '';
    document.getElementById("b9").value = '';
  
}
  
// Here onwards, functions check turn of the player 
// and put accordingly value X or 0
flag = 1;
function myfunc_3() {
    if (flag == 1) {
        document.getElementById("b1").value = "X";
        document.getElementById("b1").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b1").value = "0";
        document.getElementById("b1").disabled = true;
        flag = 1;
    }
}
  
function myfunc_4() {
    if (flag == 1) {
        document.getElementById("b2").value = "X";
        document.getElementById("b2").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b2").value = "0";
        document.getElementById("b2").disabled = true;
        flag = 1;
    }
}
  
function myfunc_5() {
    if (flag == 1) {
        document.getElementById("b3").value = "X";
        document.getElementById("b3").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b3").value = "0";
        document.getElementById("b3").disabled = true;
        flag = 1;
    }
}
  
function myfunc_6() {
    if (flag == 1) {
        document.getElementById("b4").value = "X";
        document.getElementById("b4").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b4").value = "0";
        document.getElementById("b4").disabled = true;
        flag = 1;
    }
}
  
function myfunc_7() {
    if (flag == 1) {
        document.getElementById("b5").value = "X";
        document.getElementById("b5").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b5").value = "0";
        document.getElementById("b5").disabled = true;
        flag = 1;
    }
}
  
function myfunc_8() {
    if (flag == 1) {
        document.getElementById("b6").value = "X";
        document.getElementById("b6").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b6").value = "0";
        document.getElementById("b6").disabled = true;
        flag = 1;
    }
}
  
function myfunc_9() {
    if (flag == 1) {
        document.getElementById("b7").value = "X";
        document.getElementById("b7").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b7").value = "0";
        document.getElementById("b7").disabled = true;
        flag = 1;
    }
}
  
function myfunc_10() {
    if (flag == 1) {
        document.getElementById("b8").value = "X";
        document.getElementById("b8").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b8").value = "0";
        document.getElementById("b8").disabled = true;
        flag = 1;
    }
}
  
function myfunc_11() {
    if (flag == 1) {
        document.getElementById("b9").value = "X";
        document.getElementById("b9").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b9").value = "0";
        document.getElementById("b9").disabled = true;
        flag = 1;
    }
}

Minesweeper Game :

Implementation of minesweeper game with full source code.

<!doctype> <html> <head> <title>Minesweeper- softwarequery.com</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> body { font-family: AppleColorEmoji; font-size: 15px; text-align: center; padding: 20px 0; background-color: #CD5C5C; } span, input, a, div, button { box-sizing: border-box; } .btn, .input { padding: 12px 15px; font-size: 0.65em; border-radius: 3px; font-family: 'Exo 2', sans-serif; color: #666; font-weight: bold; display: inline-block; } .btn { background: #f7f7f7; text-decoration: none; text-transform: uppercase; border: 0; cursor: pointer; margin-bottom: 10px; letter-spacing: 1px; } .flex { display: flex; } .flex-cell { flex: 1 1 auto; } .action-btn { margin-bottom: 10px; background-color: transparent; width: 100%; display: block; font-size: 1.2em; padding: 10px; border: 1px solid #eee; text-decoration: none; border-radius: 5px; } .action-btn:hover { background-color: #f4f4f4; } .action-btn .emoji { width: 20px; height: 20px; } input[type=radio] { margin: 0 5px 0 0; } input[type=number] { padding-right: 5px; } .input { border: 1px solid #e0e0e0; } .input-select { width: 100%; height: 40px; padding: 12px; font-size: 1em; margin-bottom: 10px; background: transparent; } .divider { align-self: center; flex: 0; padding: 0 10px; color: #999; font-size: 0.65em; } .prepend-input { padding: 7px 8px 6px 10px; margin: 5px 0; border-right: 1px solid #e0e0e0; line-height: 1; position: absolute; } .prepend-input + input { width: 100%; padding-left: 45px; margin-bottom: 10px; } code { display: none; margin-top: 10px; text-transform: none; background-color: #fff; padding: 2px 4px; max-width: 400px; text-align: left; } .cell .emoji { width: 100%; } .cell { /* disable hold to save image in iOS / -webkit-touch-callout: none; width: 25px; height: 25px; font-size: 20px; background-color: transparent; border: 0; display: inline-block; position: relative; padding: 2px 3px; vertical-align: middle; cursor: pointer; } .unmasked { cursor: default; } #map { white-space: nowrap; } .wrapper { padding: 10px; position: relative; -webkit-user-select: none; user-select: none; border-radius: 10px; margin-top: 10px; border: 5px solid #f4f4f4; display: inline-block; min-width: 250px; } .won .default-emoji, .lost .default-emoji { display: none; } .won #map, .lost #map { pointer-events: none; } .lost { box-shadow: 0 0 1px #f00; } .won { box-shadow: 0 0 1px #1a1; } .bar { margin: 10px -10px -10px; background-color: #f4f4f4; } .stat { width: 33.3%; font-size: 0.85em; padding: 8px 10px 5px; text-align: center; } .small-text { display: block; color: #999; margin-top: 5px; font-size: 0.7em; letter-spacing: 1px; } .settings { position: absolute; width: 40px; height: 40px; top: -20px; right: -20px; background-color: #f4f4f4; text-align: center; border-radius: 25px; padding: 2px 8px; border: 5px solid #fff; cursor: pointer; z-index: 1; } .settings .emoji { width: 15px; margin: 6px 0; } .settings-popup { margin-right: 10px; display: none; position: absolute; } .settings-popup button { width: 100%; margin: 0; } .settings-popup .flex { margin-bottom: 10px; } .show { display: block; } .settings-popup.show ~ { visibility: hidden; } .stat, .link-to-github { font-family: "Exo 2", sans-serif; } .link-to-codeproject{ margin: 40px auto; display: block; font-size: 12px; color: #08c; text-decoration: none; } .feedback { font-size: 1px; width: 1px; height: 1; overflow: hidden; position: absolute; left: -1px; top: -1px; } </style> </head> !---- start bodypart- softwarequery.com -----> <body> <div class="wrapper"> <button type="button" class="settings js-settings" aria-haspopup="true" aria-expanded="false" aria-label="Settings"></button> <div class="js-settings-popup settings-popup"> <div class="flex"> <label class="btn flex-cell" aria-label="Use Twitter Emoji"><input type="radio" name="emoji" id="twemoji" checked> Twemoji</label> <label class="btn flex-cell" aria-label="Use Native Emoji"><input type="radio" name="emoji" id="emoji"> Native emoji</label> </div> <div class="flex"> <input id="cols" class="input flex-cell" type="number" value="10" min="1" max="500" aria-label="Columns"> <div class="flex-cell divider">×</div> <input id="rows" class="input flex-cell" type="number" value="10" min="1" max="500" aria-label="Rows"><br> </div> <div class="prepend-input">💣</div> <input id="bombs" class="input" type="number" value="10" min="1" max="2500" aria-label="Number of bombs"> <select id="emojiset" class="input input-select" aria-label="Change emoji set"> <option value="🐣 💣 🚧 ◻️">🐣 💣 🚧</option> <option value="🍰 👾 📌 ◻️">🍰 👾 📌</option> <option value="🌷 ⚡️ 🐞 ◻️">🌷 ⚡️ 🐞</option> <option value="⭕️ ❌ ❗️ ✖️️">⭕️ ❌ ❗️ ✖️</option> <option value="☀ ⚡ ☔ ☁️">☀ ⚡ ☔ ☁️</option> </select> <button class="js-popup-new-game btn" type="button">Save and restart game</button> </div> <button type="button" class="action-btn js-new-game" aria-label="New game"> <span class="default-emoji"></span> <span id="result" class="result-emoji"></span> </button> <div id="map" role="grid" aria-label="Mine field"> </div> <div class="bar flex"> <div class="stat flex-cell"><div id="bombs-left">0</div><span class="small-text">BOMBS</span></div> <div class="stat flex-cell"><div id="moves"></div><span class="small-text">MOVES</span></div> <div class="stat flex-cell"><div id="timer"></div><span class="small-text">TIME</span></div> </div> </div> <a href="softwarequery.com/" class="link-to-projectnotes">[softwarequery.com]</a> <div aria-live="assertive" class="feedback"></div>  <script src="twemoji.js"></script> <script src="game.js"></script> <script> var emojiset = document.getElementById('emojiset').value.split(' ') var cols = document.getElementById('cols') var rows = document.getElementById('rows') var bombs = document.getElementById('bombs') game = new Game(cols.value, rows.value, bombs.value, emojiset, document.getElementById('twemoji').checked) document.querySelector('.js-new-game').addEventListener('click', restart) document.querySelector('.js-popup-new-game').addEventListener('click', restart) document.querySelector('.js-settings').addEventListener('click', function() { var list = document.querySelector('.js-settings-popup').classList list.contains('show') ? list.remove('show') : list.add('show') this.setAttribute('aria-expanded', list.contains('show')) }) function restart () { clearInterval(game.timer) emojiset = document.getElementById('emojiset').value.split(' ') game = new Game(cols.value, rows.value, bombs.value, emojiset, document.getElementById('twemoji').checked) document.querySelector('.js-settings-popup').classList.remove('show') return false } </script> </body> </html>

Flappy Bird Javascript Game

We are creating another javascript program is the flappy bird. The game may be a side-scroller wherever the player controls a bird, trying to fly between columns of inexperienced pipes while not touch them.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Flappy Bird| softwarequery.com</title> </head> <body> <canvas id="canvas" width="288" height="512"></canvas> <script src="js/game.js"></script> <script> let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); const bird = new Image(); const bg = new Image(); const foreGround = new Image(); const pipeUp = new Image(); const pipeBottom = new Image(); bird.src = 'img/flappy_bird_bird.png'; bg.src = 'img/flappy_bird_bg.png'; foreGround.src = 'img/flappy_bird_fg.png'; pipeUp.src = 'img/flappy_bird_pipeUp.png'; pipeBottom.src = 'img/flappy_bird_pipeBottom.png'; let fly = new Audio(); let score_audio = new Audio(); fly.src = 'audio/fly.mp3'; score_audio.src = 'audio/score.mp3'; let gap = 90; document.addEventListener('keydown', moveUp); function moveUp() { yPosition -= 20; fly.play(); } let pipe = []; pipe[0] = { x: canvas.width, y: 0 } let score = 0; let xPosition = 10; let yPosition = 150; let gravity = 1; function draw() { context.drawImage(bg, 0, 0); for(let i = 0; i < pipe.length; i++) { context.drawImage(pipeUp, pipe[i].x, pipe[i].y); context.drawImage(pipeBottom, pipe[i].x, pipe[i].y+ pipeUp.height + gap); pipe[i].x--; я if (pipe[i].x === 125) { pipe.push({ x: canvas.width, y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height }) } if( xPosition + bird.width >= pipe[i].x && xPosition <= pipe[i].x + pipeUp.width && (yPosition <= pipe[i].y + pipeUp.height || yPosition + bird.height >= pipe[i].y + pipeUp.height + gap) || yPosition + bird.height >= canvas.height - foreGround.height) { location.reload(); // reload the page } т if (pipe[i].x == 5) { score++; score_audio.play(); } } context.drawImage(foreGround, 0, canvas.height - foreGround.height); context.drawImage(bird, xPosition, yPosition); yPosition += gravity; context.fillStyle = "#000"; context.font = "24px Verdana"; context.fillText("Счет: " + score, 10, canvas.height - 20); requestAnimationFrame(draw); } pipeBottom.onload = draw; </script> </body> </html>

HangMan Javascript Game

We make another program is hangman game.it is a very popular javascript game. every age of person plays a hangman game. Hangman could be a paper and pencil game for 2 or a lot of players. One player thinks of a word, phrase, or sentence, and also the different tries to guess it by suggesting letters at intervals an exact variety of guesses.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="assets/styles/style.css" /> <title>Hangman Game| softwarequery.com</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { font-family: 'Rubik', sans-serif; color: #fff; background-color: #233d4d; } .container { max-width: 70rem; width: 100%; padding: 2rem; margin: auto; } .container h1 { font-family: 'Roboto Slab', sans-serif; font-size: 3.4rem; text-align: center; margin: 2rem 0; color: #31cf1d; } .container p { font-size: 1.8rem; text-align: center; margin: 2rem 0; } .game-box { padding: 1rem; margin: 6rem 0 2rem; display: flex; justify-content: space-evenly; } .figure { display: block; height: 24rem; width: 20rem; fill: transparent; stroke: #fff; stroke-width: 4px; stroke-linecap: round; flex-shrink: 0; } .body-part { display: none; } .content { height: 24rem; max-width: 50rem; width: 100%; flex-shrink: 1; display: flex; flex-direction: column; overflow: hidden; } .word { font-size: 3rem; height: 70%; list-style-type: none; display: flex; justify-content: center; align-items: center; } .letter { text-align: center; display: block; height: 4rem; width: 3rem; margin-right: 0.8rem; border-bottom: 4px #46a9fc solid; } .incorrect { height: 30%; padding: 1rem; display: flex; display: none; } .incorrect.visible { display: flex; } .incorrect h2 { display: inline-block; padding: 0 0 0 4rem; font-size: 2rem; font-weight: 500; } .incorrect p { font-size: 2rem; display: inline-block; margin: 0; padding: 0 1rem; } .backdrop { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 10; display: none; } .backdrop.visible { display: block; } .no-work { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 100; max-width: 40rem; width: 75%; height: 15rem; padding: 2rem; line-height: 1.6; margin: auto; background-color: #c532e2; box-shadow: 0 0 8px rgba(0, 0, 0, 0.75); border-radius: 8px; display: flex; justify-content: center; align-items: center; display: none; } .no-work p { font-size: 2rem; } .final-msg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 100; max-width: 40rem; width: 75%; height: 20rem; padding: 2rem; line-height: 1.6; margin: auto; background-color: #233d4d; box-shadow: 0 0 8px rgba(0, 0, 0, 0.75); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; display: none; } .final-msg.visible { display: flex; } .final-msg p { font-size: 2rem; margin: 0; } .final-msg .play { font: inherit; font-size: 1.6rem; padding: 1.2rem; cursor: pointer; margin-top: 3rem; background-color: #008080; border-radius: 4px; color: #fff; border: none; outline: none; transition: opacity 200ms ease-in; } @media (hover: hover) { .final-msg .play:hover { opacity: 0.75; } } .indication { border: 2px #fff solid; border-radius: 8px; background-color: #e34754; position: fixed; left: 0; right: 0; bottom: 0; max-width: 40rem; width: 75%; margin: auto; transform: translateY(100%); transition: transform 200ms ease-in; } .indication.visible { transform: translateY(-20%); } .indication p { margin: 2rem; font-size: 1.8rem; } @media (max-width: 600px) { .game-box { flex-direction: column; align-items: center; justify-content: center; } .content { height: 20rem; } } @media (hover: none) { .backdrop { display: block; } .no-work { display: flex; } } </style> </head> <body> <div class="container"> <h1>Hangman Game</h1> <p> </p> <div class="game-box"> <svg class="figure">  <line x1="25%" y1="5%" x2="65%" y2="5%" /> <line x1="65%" y1="5%" x2="65%" y2="20%" /> <line x1="25%" y1="5%" x2="25%" y2="95%" /> <line x1="5%" y1="95%" x2="45%" y2="95%" />  <circle r="10%" cx="65%" cy="30%" class="body-part" />  <line x1="65%" y1="40%" x2="65%" y2="60%" class="body-part" />  <line x1="50%" y1="40%" x2="65%" y2="50%" class="body-part" /> <line x1="80%" y1="40%" x2="65%" y2="50%" class="body-part" />  <line x1="65%" y1="60%" x2="80%" y2="70%" class="body-part" /> <line x1="65%" y1="60%" x2="50%" y2="70%" class="body-part" /> </svg> <div class="content"> <ul id="word" class="word"></ul> <div id="incorrect" class="incorrect"> <h2>Incorrect :</h2> <p></p> </div> </div> <div id="backdrop" class="backdrop"></div> <div id="no-work" class="no-work"> <p></p> </div> <div id="final-msg" class="final-msg"> <p id="msg-info" class="msg-info"></p> <button id="play" class="play">Play Again</button> </div> <div id="indication" class="indication"> <p></p> </div> </div> </div> <script> const word = document.getElementById('word'); const incorrect = document.getElementById('incorrect'); const incorrectLettersEl = document.querySelector('#incorrect p'); const backdrop = document.getElementById('backdrop'); const finalMsg = document.getElementById('final-msg'); const msgInfo = document.getElementById('msg-info'); const playBtn = document.getElementById('play'); const indication = document.getElementById('indication'); const bodyParts = document.getElementsByClassName('body-part'); const wordList = [ 'market', 'knock', 'smite', 'windy', 'coin', 'throw', 'silence', 'bluff', 'downfall', 'climb', 'lying', 'weaver', 'snob', 'kickoff', 'match', 'coat', 'emerald', 'coherent', 'multiple', 'square', ]; let selectedWord = null; let incorrectCount = 0; const correctLetters = []; const incorrectLetters = []; function initializeWord() { selectedWord = wordList[Math.floor(Math.random() * wordList.length)]; const noOfLetters = selectedWord.length; for (let i = 0; i < noOfLetters; i++) { const listItem = document.createElement('li'); listItem.classList.add('letter'); word.append(listItem); } } function displayIndication() { indication.classList.add('visible'); setTimeout(() => { indication.classList.remove('visible'); }, 2400); } // Update the figure when incorrect letters typed function updateFigure() { try { bodyParts[incorrectCount].style.display = 'block'; incorrectCount++; } catch (error) {} } // When player wins function successState() { setTimeout(() => { backdrop.classList.add('visible'); finalMsg.classList.add('visible'); msgInfo.textContent = 'Hurrah! You won.'; }, 400); } // When player looses function failureState() { setTimeout(() => { backdrop.classList.add('visible'); finalMsg.classList.add('visible'); msgInfo.textContent = `Oops! You lost. The right word is "${selectedWord}"`; }, 400); } function check(ev) { const letterElements = document.querySelectorAll('.word .letter'); const character = ev.key; // Handle keyboard events if ( !backdrop.classList.contains('visible') && !indication.classList.contains('visible') && ev.keyCode >= 65 && ev.keyCode <= 90 ) { if (selectedWord.includes(character)) { if (correctLetters.includes(character)) { displayIndication(); } else { correctLetters.push(character); const indexes = []; [...selectedWord].forEach((value, index) => { if (value === character) { indexes.push(index); } }); indexes.forEach((value) => { letterElements[value].textContent = character; }); } } else { if (incorrectLetters.includes(character)) { displayIndication(); } else { incorrectLetters.push(character); if (!incorrect.classList.contains('visible')) { incorrect.classList.add('visible'); } incorrectLettersEl.textContent = `${incorrectLetters.join(', ')}`; updateFigure(); } } } let formedWord = ''; letterElements.forEach((value) => { formedWord += value.textContent; }); if (formedWord === selectedWord) { successState(); } if (incorrectCount >= 6) { failureState(); } } function startNewGame() { selectedWord = null; incorrectCount = 0; correctLetters.splice(0); incorrectLetters.splice(0); word.innerHTML = ''; Array.from(bodyParts).forEach((value) => { value.style.display = 'none'; }); incorrect.classList.remove('visible'); backdrop.classList.remove('visible'); finalMsg.classList.remove('visible'); initializeWord(); } // Start the game initializeWord(); // Event Listeners window.addEventListener('keyup', check); playBtn.addEventListener('click', startNewGame); </script> </body> </html>

The fifth game is the Tetris javascript game. it is a famous javascript game. Tetris, gamers entire traces via way of means of shifting in any other case fashioned items, that descend onto the taking component withinside the discipline. the completed traces disappear and furnish the participant points, and additionally, the participant will continue to fill the vacated spaces. the game ends as soon as the gambling discipline is filled. The longer the participant can put off this inevitable outcome, the top their rating can be. In multiplayer games, the gamers need to closing longer than their combatants, and in certain versions, gamers can impose consequences on combatants via way of means of completing a primary type of traces. Some permutations have furnished versions to the game's theme, equivalent to 3-dimensional presentations or a machine for booking pieces.

<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <style> canvas { position: absolute; top: 45%; left: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px; } </style> </head> <body> <canvas></canvas> <script> 'use strict'; var canvas = document.querySelector('canvas'); canvas.width = 640; canvas.height = 640; var g = canvas.getContext('2d'); var right = { x: 1, y: 0 }; var down = { x: 0, y: 1 }; var left = { x: -1, y: 0 }; var EMPTY = -1; var BORDER = -2; var fallingShape; var nextShape; var dim = 640; var nRows = 18; var nCols = 12; var blockSize = 30; var topMargin = 50; var leftMargin = 20; var scoreX = 400; var scoreY = 330; var titleX = 130; var titleY = 160; var clickX = 120; var clickY = 400; var previewCenterX = 467; var previewCenterY = 97; var mainFont = 'bold 48px monospace'; var smallFont = 'bold 18px monospace'; var colors = ['green', 'red', 'blue', 'purple', 'orange', 'blueviolet', 'magenta']; var gridRect = { x: 46, y: 47, w: 308, h: 517 }; var previewRect = { x: 387, y: 47, w: 200, h: 200 }; var titleRect = { x: 100, y: 95, w: 252, h: 100 }; var clickRect = { x: 50, y: 375, w: 252, h: 40 }; var outerRect = { x: 5, y: 5, w: 630, h: 630 }; var squareBorder = 'white'; var titlebgColor = 'white'; var textColor = 'black'; var bgColor = '#DDEEFF'; var gridColor = '#BECFEA'; var gridBorderColor = '#7788AA'; var largeStroke = 5; var smallStroke = 2; // softwarequery.com var fallingShapeRow; var fallingShapeCol; var keyDown = false; var fastDown = false; var grid = []; var scoreboard = new Scoreboard(); addEventListener('keydown', function (event) { if (!keyDown) { keyDown = true; if (scoreboard.isGameOver()) return; switch (event.key) { case 'w': case 'ArrowUp': if (canRotate(fallingShape)) rotate(fallingShape); break; case 'a': case 'ArrowLeft': if (canMove(fallingShape, left)) move(left); break; case 'd': case 'ArrowRight': if (canMove(fallingShape, right)) move(right); break; case 's': case 'ArrowDown': if (!fastDown) { fastDown = true; while (canMove(fallingShape, down)) { move(down); draw(); } shapeHasLanded(); } } draw(); } }); addEventListener('click', function () { startNewGame(); }); addEventListener('keyup', function () { keyDown = false; fastDown = false; }); function canRotate(s) { if (s === Shapes.Square) return false; var pos = new Array(4); for (var i = 0; i < pos.length; i++) { pos[i] = s.pos[i].slice(); } pos.forEach(function (row) { var tmp = row[0]; row[0] = row[1]; row[1] = -tmp; }); return pos.every(function (p) { var newCol = fallingShapeCol + p[0]; var newRow = fallingShapeRow + p[1]; return grid[newRow][newCol] === EMPTY; }); } function rotate(s) { if (s === Shapes.Square) return; s.pos.forEach(function (row) { var tmp = row[0]; row[0] = row[1]; row[1] = -tmp; }); } function move(dir) { fallingShapeRow += dir.y; fallingShapeCol += dir.x; } function canMove(s, dir) { return s.pos.every(function (p) { var newCol = fallingShapeCol + dir.x + p[0]; var newRow = fallingShapeRow + dir.y + p[1]; return grid[newRow][newCol] === EMPTY; }); } function shapeHasLanded() { addShape(fallingShape); if (fallingShapeRow < 2) { scoreboard.setGameOver(); scoreboard.setTopscore(); } else { scoreboard.addLines(removeLines()); } selectShape(); } function removeLines() { var count = 0; for (var r = 0; r < nRows - 1; r++) { for (var c = 1; c < nCols - 1; c++) { if (grid[r][c] === EMPTY) break; if (c === nCols - 2) { count++; removeLine(r); } } } return count; } function removeLine(line) { for (var c = 0; c < nCols; c++) grid[line][c] = EMPTY; for (var c = 0; c < nCols; c++) { for (var r = line; r > 0; r--) grid[r][c] = grid[r - 1][c]; } } function addShape(s) { s.pos.forEach(function (p) { grid[fallingShapeRow + p[1]][fallingShapeCol + p[0]] = s.ordinal; }); } function Shape(shape, o) { this.shape = shape; this.pos = this.reset(); this.ordinal = o; } var Shapes = { ZShape: [[0, -1], [0, 0], [-1, 0], [-1, 1]], SShape: [[0, -1], [0, 0], [1, 0], [1, 1]], IShape: [[0, -1], [0, 0], [0, 1], [0, 2]], TShape: [[-1, 0], [0, 0], [1, 0], [0, 1]], Square: [[0, 0], [1, 0], [0, 1], [1, 1]], LShape: [[-1, -1], [0, -1], [0, 0], [0, 1]], JShape: [[1, -1], [0, -1], [0, 0], [0, 1]] }; function getRandomShape() { var keys = Object.keys(Shapes); var ord = Math.floor(Math.random() * keys.length); var shape = Shapes[keys[ord]]; return new Shape(shape, ord); } Shape.prototype.reset = function () { this.pos = new Array(4); for (var i = 0; i < this.pos.length; i++) { this.pos[i] = this.shape[i].slice(); } return this.pos; } function selectShape() { fallingShapeRow = 1; fallingShapeCol = 5; fallingShape = nextShape; nextShape = getRandomShape(); if (fallingShape != null) { fallingShape.reset(); } } function Scoreboard() { this.MAXLEVEL = 9; var level = 0; var lines = 0; var score = 0; var topscore = 0; var gameOver = true; this.reset = function () { this.setTopscore(); level = lines = score = 0; gameOver = false; } this.setGameOver = function () { gameOver = true; } this.isGameOver = function () { return gameOver; } this.setTopscore = function () { if (score > topscore) { topscore = score; } } this.getTopscore = function () { return topscore; } this.getSpeed = function () { switch (level) { case 0: return 700; case 1: return 600; case 2: return 500; case 3: return 400; case 4: return 350; case 5: return 300; case 6: return 250; case 7: return 200; case 8: return 150; case 9: return 100; default: return 100; } } this.addScore = function (sc) { score += sc; } this.addLines = function (line) { switch (line) { case 1: this.addScore(10); break; case 2: this.addScore(20); break; case 3: this.addScore(30); break; case 4: this.addScore(40); break; default: return; } lines += line; if (lines > 10) { this.addLevel(); } } this.addLevel = function () { lines %= 10; if (level < this.MAXLEVEL) { level++; } } this.getLevel = function () { return level; } this.getLines = function () { return lines; } this.getScore = function () { return score; } } function draw() { g.clearRect(0, 0, canvas.width, canvas.height); drawUI(); if (scoreboard.isGameOver()) { drawStartScreen(); } else { drawFallingShape(); } } function drawStartScreen() { g.font = mainFont; fillRect(titleRect, titlebgColor); fillRect(clickRect, titlebgColor); g.fillStyle = textColor; g.fillText('Tetris', titleX, titleY); g.font = smallFont; g.fillText('click to start', clickX, clickY); } function fillRect(r, color) { g.fillStyle = color; g.fillRect(r.x, r.y, r.w, r.h); } function drawRect(r, color) { g.strokeStyle = color; g.strokeRect(r.x, r.y, r.w, r.h); } function drawSquare(colorIndex, r, c) { var bs = blockSize; g.fillStyle = colors[colorIndex]; g.fillRect(leftMargin + c * bs, topMargin + r * bs, bs, bs); g.lineWidth = smallStroke; g.strokeStyle = squareBorder; g.strokeRect(leftMargin + c * bs, topMargin + r * bs, bs, bs); } function drawUI() { // background fillRect(outerRect, bgColor); fillRect(gridRect, gridColor); // the blocks dropped in the grid for (var r = 0; r < nRows; r++) { for (var c = 0; c < nCols; c++) { var idx = grid[r][c]; if (idx > EMPTY) drawSquare(idx, r, c); } } // the borders of grid and preview panel g.lineWidth = largeStroke; drawRect(gridRect, gridBorderColor); drawRect(previewRect, gridBorderColor); drawRect(outerRect, gridBorderColor); // scoreboard g.fillStyle = textColor; g.font = smallFont; g.fillText('hiscore ' + scoreboard.getTopscore(), scoreX, scoreY); g.fillText('level ' + scoreboard.getLevel(), scoreX, scoreY + 30); g.fillText('lines ' + scoreboard.getLines(), scoreX, scoreY + 60); g.fillText('score ' + scoreboard.getScore(), scoreX, scoreY + 90); // preview var minX = 5, minY = 5, maxX = 0, maxY = 0; nextShape.pos.forEach(function (p) { minX = Math.min(minX, p[0]); minY = Math.min(minY, p[1]); maxX = Math.max(maxX, p[0]); maxY = Math.max(maxY, p[1]); }); var cx = previewCenterX - ((minX + maxX + 1) / 2.0 * blockSize); var cy = previewCenterY - ((minY + maxY + 1) / 2.0 * blockSize); g.translate(cx, cy); nextShape.shape.forEach(function (p) { drawSquare(nextShape.ordinal, p[1], p[0]); }); g.translate(-cx, -cy); } function drawFallingShape() { var idx = fallingShape.ordinal; fallingShape.pos.forEach(function (p) { drawSquare(idx, fallingShapeRow + p[1], fallingShapeCol + p[0]); }); } function animate(lastFrameTime) { var requestId = requestAnimationFrame(function () { animate(lastFrameTime); }); var time = new Date().getTime(); var delay = scoreboard.getSpeed(); if (lastFrameTime + delay < time) { if (!scoreboard.isGameOver()) { if (canMove(fallingShape, down)) { move(down); } else { shapeHasLanded(); } draw(); lastFrameTime = time; } else { cancelAnimationFrame(requestId); } } } function startNewGame() { initGrid(); selectShape(); scoreboard.reset(); animate(-1); } function initGrid() { function fill(arr, value) { for (var i = 0; i < arr.length; i++) { arr[i] = value; } } for (var r = 0; r < nRows; r++) { grid[r] = new Array(nCols); fill(grid[r], EMPTY); for (var c = 0; c < nCols; c++) { if (c === 0 || c === nCols - 1 || r === nRows - 1) grid[r][c] = BORDER; } } } function init() { initGrid(); selectShape(); draw(); } init(); </script> </body> </html>

Sixth javascript games are fogger .it is based on JAVASCRIPT,HTML, CSS and JQUERY.Move the arrow keys on the keyboard to Frog or Victimize by pressing the top center, bottom center, left center, and right center of the game screen on the touch screen device. Avoid cars on the road. Sit on the tortoise and the log to cross the river.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Frogger| softwarequery.com</title> <style> #game_div{ text-align: center; } canvas { background-color: #cb630a; padding: 5px; margin: 10px; border-width: 60px; border-color: #010101; border-style: solid; } body { background-color: #128138; } <style> </head> <body> <div id="game_div"> <canvas id="game" height="565" width="399"></canvas> </div> <script> function() { var models = [ {width: 30, height: 22, dir: 1}, {width: 29, height: 24, dir: -1}, {width:24, height: 26, dir: 1}, {width: 24, height: 21, dir: -1}, {width: 46, height: 19, dir: 1} ]; var lengths = [{width: 179, height: 21}, {width: 118, height: 21}, {width: 85, height: 22}]; var rows = [473, 443, 413, 383, 353, 323, 288, 261, 233, 203, 173, 143, 113]; var context = null; var start_game = function() { game = new Game(); $(document).keydown(function(e) { var arrow_key = get_arrow_key(e); if (arrow_key) { e.preventDefault(); } if (game.dead === -1 && game.lives > 0) { if (arrow_key === 'u'){ up(); } else if (arrow_key === 'd'){ down(); } else if (arrow_key === 'l'){ left(); } else if (arrow_key === 'r'){ right(); } } }); board = document.getElementById('game'); context = board.getContext('2d'); theme = document.createElement('audio'); theme.setAttribute('src', 'assets/frogger.mp3'); theme.setAttribute('loop', 'true'); theme.play(); sprites = new Image(); deadsprite = new Image(); sprites.src = 'assets/frogger_sprites.png'; deadsprite.src = 'assets/dead_frog.png'; sprites.onload = function() { draw_bg(); draw_info(); make_cars(); make_logs(); draw_frog(); setInterval(game_loop, 50); }; }; var game_loop = function() { draw_bg(); draw_info(); draw_cars(); draw_logs(); draw_wins(); if (game.lives > 0) { draw_frog(); } else { game_over(); } }; var get_arrow_key = function(e) { switch(e.keyCode) { case 37: return 'l'; case 38: return 'u'; case 39: return 'r'; case 40: return 'd'; } return null; }; var draw_bg = function() { context.fillStyle='#191970'; context.fillRect(0,0,399,284); context.fillStyle='#000000'; context.fillRect(0,284,399,283); context.drawImage(sprites, 0, 0, 399, 113, 0, 0, 399, 113); context.drawImage(sprites, 0, 119, 399, 34, 0, 283, 399, 34); context.drawImage(sprites, 0, 119, 399, 34, 0, 495, 399, 34); }; var draw_info = function() { draw_lives(); context.font = 'bold 14pt arial'; context.fillStyle = '#00EE00'; context.fillText('Level ', 74, 545); draw_level(); context.font = 'bold 10pt arial'; context.fillText('Score: ', 4, 560); context.fillText('Highscore: ', 200, 560); draw_score(); }; var draw_lives = function() { var x = 4; var y = 532; if ((game.score - (game.extra * 10000)) >= 10000 && game.lives < 4) { game.extra++; } for (var i = 0; i<(game.lives + game.extra); i++){ context.drawImage(sprites, 13, 334, 17, 23, x, y, 11, 15); x += 14; } }; var draw_level = function() { context.font = 'bold 15pt arial'; context.fillStyle = '#00EE00'; context.fillText(game.level, 131, 545); }; var draw_score = function() { context.font = 'bold 10pt arial'; context.fillStyle = '#00EE00'; context.fillText(game.score, 49, 560); if (window.localStorage['highscore']) { highscore = localStorage['highscore']; } else highscore = 0; context.fillText(highscore, 272, 560); }; var draw_frog = function() { game.log = log_collision(); if (game.dead > 0) { // @4,2 ; 19x24 context.drawImage(deadsprite, 4, 2, 19, 24, game.posX, game.posY, 19, 24); game.dead--; } else if (game.dead === 0) { game.reset(); } else if (game.win > 0) { game.win--; } else if (game.win === 0) { game.reset(); } else if (car_collision()) { sploosh(); } else if (water_collision() && game.log === -1) { sploosh(); } else if (check_win()){ win(); } else { if (game.log >= 0) { var tempX = game.posX - (logs[game.log].dir * logs[game.log].speed); if (bounds_check(tempX, game.posY)) { game.posX = tempX; } } if (game.facing === 'u') { context.drawImage(sprites, 12, 369, 23, 17, game.posX, game.posY, 23, 17); game.width = 23, game.height = 17; } else if (game.facing === 'd') { context.drawImage(sprites, 80, 369, 23, 17, game.posX, game.posY, 23, 17); game.width = 23, game.height = 17; } else if (game.facing === 'l') { context.drawImage(sprites, 80, 335, 19, 23, game.posX, game.posY, 19, 23); game.width = 19, game.height = 23; } else if (game.facing === 'r') { context.drawImage(sprites, 12, 335, 19, 23, game.posX, game.posY, 19, 23); game.width = 19, game.height = 23; } } }; var draw_wins = function() { for (var i=0; i<game.won.length; i++) { if(game.won[i]) { switch (i) { case 0: context.drawImage(sprites, 80, 369, 23, 17, 15, 80, 23, 17); break; case 1: context.drawImage(sprites, 80, 369, 23, 17, 101, 80, 23, 17); break; case 2: context.drawImage(sprites, 80, 369, 23, 17, 187, 80, 23, 17); break; case 3: context.drawImage(sprites, 80, 369, 23, 17, 270, 80, 23, 17); break; case 4: context.drawImage(sprites, 80, 369, 23, 17, 354, 80, 23, 17); break; } } } }; var draw_cars = function() { for (var i=0; i<cars.length; i++) { cars[i].move(); if (cars[i].out_of_bounds()) { cars[i] = make_car(cars[i].lane, null, cars[i].model); } cars[i].draw(); } }; var draw_logs = function() { for (var i=0; i< logs.length; i++) { logs[i].move(); if (logs[i].out_of_bounds()) { logs[i] = make_log(logs[i].row) } logs[i].draw(); } }; var game_over = function() { context.font = 'bold 72pt arial'; context.fillStyle = '#FFFFFF'; context.fillText('GAME', 60, 150); context.fillText('OVER', 60, 300); if (game.score >= highscore) { localStorage['highscore'] = game.score; context.font = 'bold 48pt arial'; context.fillStyle = '#00EE00'; context.fillText('YOU GOT A', 20, 380); context.fillText('HIGHSCORE', 6, 460); } }; //move var up = function() { if (bounds_check(game.posX, game.posY-30)) { game.posY -= 30; game.current++; } if (game.current > game.highest) { game.score += 10; game.highest++; } game.facing = 'u'; }; var down = function() { if (bounds_check(game.posX, game.posY+30)) { game.posY += 30; game.current--; } game.facing = 'd'; }; var left = function() { if (bounds_check(game.posX-30, game.posY)) game.posX -= 30; game.facing = 'l'; }; var right = function() { if (bounds_check(game.posX+30, game.posY)) game.posX += 30; game.facing = 'r'; }; var bounds_check = function(x, y) { if (y > 90 && y < 510 && x > 0 && x < 369) { return true; } else if (y > 60 && y < 100 && ((x > 5 && x < 40 && !game.won[0]) || (x > 92 && x < 128 && !game.won[1]) || (x > 178 && x < 214 && !game.won[2]) || (x > 263 && x < 299 && !game.won[3]) || (x > 347 && x < 383 && !game.won[4]))) { return true; } return false; }; var check_win = function() { if(game.posY > 60 && game.posY < 100){ if(game.posX > 5 && game.posX < 40 && !game.won[0]){ game.won[0] = true; return true; } else if (game.posX > 92 && game.posX < 128 && !game.won[1]){ game.won[1] = true; return true; } else if (game.posX > 178 && game.posX < 214 && !game.won[2]){ game.won[2] = true; return true; } else if (game.posX > 263 && game.posX < 299 && !game.won[3]){ game.won[3] = true; return true; } else if (game.posX > 347 && game.posX < 383 && !game.won[4]){ game.won[4] = true; return true; } } return false; }; var win = function() { game.score += 50; game.win = 15; if(game.won[0] && game.won[1] && game.won[2] && game.won[3] && game.won[4]){ level(); } }; var level = function() { for (var i=0; i<game.won.length; i++) { game.won[i] = false; } game.score += 1000; game.level++; }; var collides = function(x1, y1, w1, h1, x2, y2, w2, h2) { return (((x1 <= x2+w2 && x1 >=x2) && (y1 <= y2+h2 && y1 >= y2)) || ((x1+w1 <= x2+w2 && x1+w1 >= x2) && (y1 <= y2+h2 && y1 >= y2)) || ((x1 <= x2+w2 && x1 >=x2) && (y1+h1 <= y2+h2 && y1+h1 >= y2)) || ((x1+w1 <= x2+w2 && x1+w1 >= x2) && (y1+h1 <= y2+h2 && y1+h1 >= y2))); } var car_collision = function() { if (game.posY < 505 && game.posY > 270) { for (var i=0; i<cars.length; i++) { if (collides( game.posX, game.posY, game.width, game.height, cars[i].posX, cars[i].posY, cars[i].width, cars[i].height)) { return true; } } } return false; }; var log_collision = function() { if (game.posY < 270) { for (var i=0; i<logs.length; i++) { if (collides(game.posX, game.posY, game.width, game.height, logs[i].posX, logs[i].posY, logs[i].width, logs[i].height)) return i; } } return -1; }; var water_collision = function() { return (game.posY > 105 && game.posY < 270); }; var sploosh = function() { game.lives--; game.dead = 20; }; // object initializers - cars, logs var make_cars = function() { cars = [ make_car(0), make_car(0, 130, 3), make_car(0, 260, 3), make_car(1), make_car(2), make_car(2, 150, 0), make_car(3, 200), make_car(4), make_car(5), make_car(5, 80), make_car(5, 240) ]; }; var make_car = function(row, x, model) { switch(row) { case 0: return new Car(x==null?-25:x, rows[row], row, 3, model==null?1:model); case 1: return new Car(x==null?399:x, rows[row], row, 2, model==null?0:model); case 2: return new Car(x==null?399:x, rows[row], row, 4, model==null?2:model); case 3: return new Car(x==null?-25:x, rows[row], row, 3, model==null?3:model); case 4: return new Car(x==null?399:x, rows[row], row, 3, model==null?0:model); case 5: return new Car(x==null?399:x, rows[row], row, 4, model==null?4:model); } }; var make_logs = function() { logs = [ make_log(7), make_log(7, 170), make_log(8), make_log(8, 200), make_log(9), make_log(10), make_log(11), make_log(11, 100, 0), make_log(12) ]; }; var make_log = function(row, x, len) { switch(row) { case 7: return new Log(x==null?399:x, rows[row], row, 1, 1, len==null?1:len); case 8: return new Log(x==null?-85:x, rows[row], row, 4, -1, len==null?2:len); case 9: return new Log(x==null?399:x, rows[row], row, 2, 1, len==null?0:len); case 10: return new Log(x==null?-85:x, rows[row], row, 2, -1, len==null?1:len); case 11: return new Log(x==null?399:x, rows[row], row, 3, 1, len==null?1:len); case 12: return new Log(x==null?-85:x, rows[row], row, 3, -1, len==null?2:len); } }; /* game "classes" - game, car, log * Car models: * 0: pink sedan * 1: white sedan * 2: yellow sedan * 3: white bulldozer * 4: white truck / var Car = function(x, y, lane, speed, model) { this.posX = x; this.posY = y; this.lane = lane; this.speed = speed; this.model = model; this.width = models[model].width; this.height = models[model].height; this.move = function() { this.posX = this.posX - (models[model].dir this.speed * game.level); }; this.draw = function() { switch(this.model) { case 0: context.drawImage(sprites, 8, 265, 30, 22, this.posX, this.posY, 30, 22); break; case 1: context.drawImage(sprites, 45, 264, 29, 24, this.posX, this.posY, 29, 24); break; case 2: context.drawImage(sprites, 81, 263, 24, 26, this.posX, this.posY, 24, 26); break; case 3: context.drawImage(sprites, 9, 300, 24, 21, this.posX, this.posY, 24, 21); break; case 4: context.drawImage(sprites, 105, 301, 46, 19, this.posX, this.posY, 46, 19); break; } }; this.out_of_bounds = function() { return ((this.posX + this.width) < 0 || this.posX > 399); }; }; /* Log lengths: * 0: long * 1: medium * 2: small / var Log = function(x, y, row, speed, dir, length) { this.posX = x; this.posY = y; this.row = row; this.speed = speed; this.dir = dir; this.length = length; this.width = lengths[length].width; this.height = lengths[length].height; this.move = function() { this.posX = this.posX - (this.dir this.speed); } this.draw = function () { switch(this.length) { case 0: context.drawImage(sprites, 6, 165, 179, 21, this.posX, this.posY, 179, 21); break; case 1: context.drawImage(sprites, 5, 197, 118, 21, this.posX, this.posY, 118, 21); break; case 2: context.drawImage(sprites, 6, 229, 85, 22, this.posX, this.posY, 85, 22); break; } } this.out_of_bounds = function() { return ((this.posX + this.width) < 0 || this.posX > 399); } }; var Game = function() { this.lives = 5; this.extra = 0; this.level = 1; this.score = 0; this.posX = 187; this.posY = 503; this.facing = 'u'; this.log = -1; this.current = -1; this.highest = -1; this.dead = -1; this.win = -1; this.won = [false, false, false, false, false]; this.reset = function () { this.posY = 503; this.posX = 187; this.facing = 'u'; this.log = -1; this.current = -1; this.highest = -1; this.dead = -1; this.win = -1; } } start_game(); })(); </script> </body> </html>