Solve the Puzzle and Learn Coding

Solve the Puzzle and Learn Coding

/ Free Downloads, Web, Web Design, Web Development / By /

Number Puzzle Game

The ability to comprehend and manipulate the fundamental elements of web technology is not just a skill, but also a gateway to endless imaginative possibilities. With the “1-2-8 Number Puzzle Game”, we aim to turn that key for aspiring coders. Developed as a playful yet educational project, this game serves as a testament to how learning the basics of HTML, CSS, and JavaScript can transform a simple idea into an interactive digital experience. It’s not just a game; it’s a starting point for people just starting out in the exciting world of web development. Through this project, we hope to demystify the process of coding and show how accessible and rewarding creating your own digital content can be.

Introducing the Number Puzzle Game

Introduction

  • Title: “1-2-8 Number Puzzle Game”
  • Purpose: Engaging, fun, and mind-stimulating puzzle game

Game Overview

  • Concept: Rearrange a series of numbers into a specific sequence
  • Design: Sleek and modern with a high-tech theme
  • Target Audience: Puzzle enthusiasts of all ages

How to Play

  1. Objective: Arrange numbers in order from 1 to 8.
  2. Gameplay:
    • Click any number next to ‘0’ to switch positions.
    • The ‘0’ acts as an empty space for movement.
  3. Winning: Align all numbers in sequence (1 to 8) with ‘0’ at the end.
  4. Restart: Click “New Game” to shuffle numbers and start anew.
  5. Audio: Click “Play Audio” for sound effects; “Stop Audio” to pause.

Technical Overview

  • Built With:
    • HTML for structure
    • CSS for styling (including Google Fonts)
    • JavaScript for game logic and interactivity
  • Responsive Design: Adjusts to various screen sizes
  • Audio Integration: Sound effects to enhance user experience

Code Highlights

  • Initialization: initArray function to set up the game board.
  • Game Logic: move function for swapping numbers.
  • Win Condition: win function to check for victory state.
  • Audio Control: JavaScript functions playAudio and stopAudio for sound management.

Closing Remarks

  • Invitation to Play: Encourage everyone to try the game.
  • Feedback Welcome: Open to suggestions for improvements.
  • Acknowledgments: Thank the team or individuals involved in development.

Here is Your Code

<!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.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=VT323&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Number Puzzle Game</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            overflow: hidden;
            text-align: center;
            padding: 20px;
            font-family: 'Orbitron', sans-serif;
            font-family: 'VT323', monospace;
        }

        p {
              font-size: 22px;
        }

        h1 {
              font-size: 40px;
              color: blueviolet;
        }

        .parent-container {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            height: 100vh; /* Full height of the viewport */
        }

        .game-container {
            max-width: 350px;
            margin: auto;
        }
        .game-button {
            width: 60px;
            height: 60px;
            margin: 5px;
            font-size: 1.5em;
        }
        @media (max-width: 600px) {
            .game-button {
                width: 20vw;
                height: 20vw;
            }
        }
        
        .game-button {
            background-color: #c024ee; /* Purple background */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: bold;
            display: inline-block;
            font-size: 26px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 8px; /* Rounded corners */
            box-shadow: 0 4px #999; /* Shadow for depth */
            transition: all 0.3s; /* Smooth transition for hover effect */
        }

        .game-button:hover {
            background-color: #ea9ae2; /* Darker shade on hover */
        }

        .game-button:active {
            background-color: #3f1a5e;
            box-shadow: 0 2px #666; /* Shadow adjustment for pressed effect */
            transform: translateY(2px); /* Slight move down */
        }

    </style>
</head>
<body onLoad="window.newgame()">
    <img src="background.jpg" alt="Background Image" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; opacity: 0.9;">
    <div class="parent-container">
    <div class="game-container">
        <h1><span style="background-color: #000; color: #8a2be2">1-<sub>2</sub>-8</span></h1>
        <form>
            <div id="game-board">
                <input class="game-button" type="button" value=" 1 " onClick="window.move(0)">
                <input class="game-button" type="button" value=" 2 " onClick="window.move(1)">
                <input class="game-button" type="button" value=" 3 " onClick="window.move(2)"><br>
                <input class="game-button" type="button" value=" 4 " onClick="window.move(3)">
                <input class="game-button" type="button" value=" 5 " onClick="window.move(4)">
                <input class="game-button" type="button" value=" 6 " onClick="window.move(5)"><br>
                <input class="game-button" type="button" value=" 7 " onClick="window.move(6)">
                <input class="game-button" type="button" value=" 8 " onClick="window.move(7)">
                <input class="game-button" type="button" value=" 0 " onClick="window.move(8)"><p>
            </div>
            <p><span style="background-color: #000; color: #8a2be2">Put the numbers in order from 1 to 8.<br>
                Click any numbers next to the zero to switch position.
            </p></span>
            <p><span style="background-color: #000; color: #8a2be2">You did it in # of moves: <input name="moves" size="7" value="0"></p></span>
            <button type="button" onClick="window.newgame()"><i class="fa fa-cog fa-spin"></i> New Game</button>
        </form>
        <audio id="myAudio">
          <source src="2018-08-02-17971.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
        <button onclick="playAudio()" id="playButton"><i class="fa fa-play"></i> Play Audio</button><br>
        <button onclick="stopAudio()" id="stopButton"><i class="fa fa-stop"></i> Stop Audio</button><br>
        <p><span style="background-color: #000; color: #8a2be2">Sound Effect from <a target="_blank" href="https://pixabay.com/sound-effects/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=17971">Pixabay</p></span></a>
    </div>
    </div>
    <script>
        function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i] }
var pos = new initArray(9,9,9,9,9,9,9,9,9);
var nummoves= 0;
function random() {
today = new Date();
num = today.getTime();
num = Math.round(Math.abs(Math.sin (num)*1000000)) % 9;
return num;
}
function display(pos) {
for (var i=0; i<9; i++)  {
document.forms[0].elements[i].value = pos[i];
}
document.forms[0].moves.value= nummoves;
win();
}
function move(num) {
if (num < 8 && pos[num+1]==0) {
pos[num+1]= pos[num];
pos[num]= 0;
nummoves++;
}
else if (num > 0 && pos[num-1]==0) {
pos[num-1]= pos[num];
pos[num]= 0;
nummoves++;
} 
else if (num > 2 && pos[num-3]==0) {
pos[num-3]= pos[num];
pos[num]= 0;
nummoves++;
}
else if (num < 6 && pos[num+3]==0 ) {
pos[num+3]= pos[num];
pos[num]= 0;
nummoves++;
}
display(pos);
}
function win() {     
if (pos[0]== 1 & pos[1]== 2 & pos[2]== 3 & pos[3]== 4 & 
pos[4]== 5 & pos[5]== 6 & pos[6]== 7 & pos[7]== 8 & pos[8]== 0) {
if (confirm('You did it! Do you want to restart?')) newgame();
   }
}
function newgame() {
var x=1;
for (var i=0; i<9; i++) {
pos[i]=9;
}
for (var i=0; i<9;i++) {
randomnum=random();
if (randomnum==9) randomnum=8;
x=1;
for (var j=0; j<9; j++)  {
if (j==i)
continue;
if (randomnum==pos[j]) {
x=0;
break;
   }
}
if (x==0) {
i--;
continue;
}
pos[i]=randomnum;
}
nummoves=0;
display(pos);   
}   
</script>

<script type="text/javascript">
    function playAudio() {
  var audio = document.getElementById("myAudio");
  audio.play();
}

function stopAudio() {
    var audio = document.getElementById("myAudio");
    audio.pause();  // Pause the audio
    audio.currentTime = 0;  // Reset the audio to the beginning
}

</script>
</body>
</html>

Read also: Your First HTML Website (full guide)
GET YOUR FREE COPY: HTML Number Puzzle Game FREE
VIEW IT IN ACTION: HTML Number Puzzle Game FREE Live Demo

Special Note: Inspiration for Aspiring Coders

As we introduce the “1-2-8 Number Puzzle Game,” we want to highlight a key aspect of its creation: this game is not just a tool for entertainment but also an embodiment of educational values. We built this game with the intention of stimulating interest in coding, particularly among beginners.

Why This Game is a Great Starting Point for Learning Coding:

  • Simplicity and Accessibility: The game’s structure is straightforward, making it easy to understand the basics of HTML, CSS, and JavaScript.

  • Interactive Learning: By engaging with the game’s code, beginners can see immediate results of their coding efforts, providing an exciting and rewarding learning experience.

  • Fundamentals of Web Development: The game incorporates essential elements of web development, offering a practical introduction to HTML for structure, CSS for styling, and JavaScript for functionality.

  • Creativity and Problem-Solving: It encourages creative problem-solving, a vital skill in coding. Beginners can experiment with the code, modify game features, and see how their changes impact the game.

  • Community and Collaboration: We invite beginners to dive into the code, play around with it, and even share their own versions. It’s a great opportunity for learning, collaboration, and becoming a part of the coding community.

Our hope is that this game sparks curiosity and inspires beginners to embark on their own coding journey, exploring the limitless possibilities of HTML, CSS, and JavaScript. Remember, every expert coder once started as a beginner, and games like this can be a fun and engaging way to take those first steps into the world of coding.

Happy coding and gaming!

Share

Related Posts

Share
Website maintenance by: dp