Jump to content

HTML5 Maze Game


Jiwon Choi
 Share

Recommended Posts

I am a grade 10 student.

I had to create a HTML5 maze game for my design project.

However, my product didn't work.

I want to know what the problem is.

This is the code I wrote:

<html>

<head>

<h1>Level 1</h1>

</head>

<body>

<img src="file:///Users/JiWon/Desktop/10/Design/Unit%201.%20Systems%20Design/C/1.png" </img>

<p><a href="file:///Users/JiWon/Desktop/10/Design/Unit%201.%20Systems%20Design/C3/main%20page">Main Page</a></p>

 <canvas width="616" height="556" id="mazecanvas">Can't load the maze game, because your browser doesn't support HTML5.</canvas>
    <noscript>JavaScript is not enabled. To play the game, you should enable it.</noscript>
    <script>
        var canvas = document.getElementById("mazecanvas");
        var context = canvas.getContext("2d");
        var currRectX = 425;
        var currRectY = 3;
        var mazeWidth = 556;
        var mazeHeight = 556;
        var intervalVar;
        function drawMazeAndRectangle(rectX, rectY) {
            makeWhite(0, 0, canvas.width, canvas.height);
            var mazeImg = new Image();
            mazeImg.onload = function () {
                context.drawImage(mazeImg, 0, 0);
                drawRectangle(rectX, rectY, "#0000FF");
                context.beginPath();
                context.arc(542, 122, 7, 0, 2 * Math.PI, false);
                context.closePath();
                context.fillStyle = '#00FF00';
                context.fill();
            };
            mazeImg.src = "maze.gif";
        }
        function drawRectangle(x, y, style) {
            makeWhite(currRectX, currRectY, 15, 15);
            currRectX = x;
            currRectY = y;
            context.beginPath();
            context.rect(x, y, 15, 15);
            context.closePath();
            context.fillStyle = style;
            context.fill();
        }
        function moveRect(e) {
            var newX;
            var newY;
            var movingAllowed;
            e = e || window.event;
            switch (e.keyCode) {
                case 38:   // arrow up key
                case 87: // W key
                    newX = currRectX;
                    newY = currRectY - 3;
                    break;
                case 37: // arrow left key
                case 65: // A key
                    newX = currRectX - 3;
                    newY = currRectY;
                    break;
                case 40: // arrow down key
                case 83: // S key
                    newX = currRectX;
                    newY = currRectY + 3;
                    break;
                case 39: // arrow right key
                case 68: // D key
                    newX = currRectX + 3;
                    newY = currRectY;
                    break;
                default: return;
            }
            movingAllowed = canMoveTo(newX, newY);
            if (movingAllowed === 1) {
                drawRectangle(newX, newY, "#0000FF");
                currRectX = newX;
                currRectY = newY;
            }
            else if (movingAllowed === 2) {
                clearInterval(intervalVar);
                makeWhite(0, 0, canvas.width, canvas.height);
                context.font = "40px Arial";
                context.fillStyle = "blue";
                context.textAlign = "center";
                context.textBaseline = "middle";
                context.fillText("Congratulations!", canvas.width / 2, canvas.height / 2);
                window.removeEventListener("keydown", moveRect, true);
            }
        }
        function canMoveTo(destX, destY) {
            var imgData = context.getImageData(destX, destY, 15, 15);
            var data = imgData.data;
            var canMove = 1;
            if (destX >= 0 && destX <= mazeWidth - 15 && destY >= 0 && destY <= mazeHeight - 15) {
                for (var i = 0; i < 4 * 15 * 15; i += 4) {
                    if (data === 0 && data[i + 1] === 0 && data[i + 2] === 0) {
                        canMove = 0;
                        break;
                    }
                    else if (data === 0 && data[i + 1] === 255 && data[i + 2] === 0) {
                        canMove = 2;
                        break;
                    }
                }
            }
            else {
                canMove = 0;
            }
            return canMove;
        }
        function createTimer(seconds) {
            intervalVar = setInterval(function () {
                makeWhite(mazeWidth, 0, canvas.width - mazeWidth, canvas.height);
                if (seconds === 0) {
                    clearInterval(intervalVar);
                    window.removeEventListener("keydown", moveRect, true);
                    makeWhite(0, 0, canvas.width, canvas.height);
                    context.font = "40px Arial";
                    context.fillStyle = "red";
                    context.textAlign = "center";
                    context.textBaseline = "middle";
                    context.fillText("Time's up!", canvas.width / 2, canvas.height / 2);
                    return;
                }
                context.font = "20px Arial";
                if (seconds <= 10 && seconds > 5) {
                    context.fillStyle = "orangered";
                }
                else if (seconds <= 5) {
                    context.fillStyle = "red";
                }
                else {
                    context.fillStyle = "green";
                }
                context.textAlign = "center";
                context.textBaseline = "middle";
                var minutes = Math.floor(seconds / 60);
                var secondsToShow = (seconds - minutes * 60).toString();
                if (secondsToShow.length === 1) {
                    secondsToShow = "0" + secondsToShow;
                }
                context.fillText(minutes.toString() + ":" + secondsToShow, mazeWidth + 30, canvas.height / 2);
                seconds--;
            }, 1000);
        }
        function makeWhite(x, y, w, h) {
            context.beginPath();
            context.rect(x, y, w, h);
            context.closePath();
            context.fillStyle = "white";
            context.fill();
        }
        drawMazeAndRectangle(425, 3);
        window.addEventListener("keydown", moveRect, true);
        createTimer(30);
    </script>
    </body>

</html>

스크린샷 2017-11-15 오후 3.04.40.png

스크린샷 2017-11-15 오후 3.02.46.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...