DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Apache Kafka vs. Message Queue: Trade-Offs, Integration, Migration
  • Build a Simple Chat Server With gRPC in .Net Core
  • Building A Log Analytics Solution 10 Times More Cost-Effective Than Elasticsearch
  • Playwright JavaScript Tutorial: A Complete Guide
  1. DZone
  2. Coding
  3. Languages
  4. HTML5 Canvas Sample – Building a maze

HTML5 Canvas Sample – Building a maze

Alosh Bennett user avatar by
Alosh Bennett
·
Feb. 15, 11 · News
Like (0)
Save
Tweet
Share
15.28K Views

Join the DZone community and get the full member experience.

Join For Free

There are a lot of features that HTML5 bring. What makes canvas popular?

Canvas provides a screen area onto which you could draw 2D shapes and images. The set of APIs are simple. But the strength of the canvas comes from how you could manipulate it using javascript.

(Please view the canvas in action here )

We start by defining a canvas. Note that the canvas element would be rendered only if your browser supports it.

<canvas id="canvas" width="100" height="100">Your browser does not support canvas.</canvas>


Next, we define an array in javascript to hold the maze data, initialize it and start building our maze by venturing out into the first cell.

 var board = new Array();

function maze() {
init(); //initialize the maze
explorePath(1,1); //start exploring
}

function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
context = canvas.getContext("2d");
//paint the maze black
}
for(i=0; i< SIZE; i++) {
board[i] = new Array();
for(j=0; j<SIZE; j++) {
board[i][j] = 0; //fill the board array with zeroes
}
}
}

For the explorePath method, we use a recursive algorithm:

Paint the cell white
Initialize options list {UP, DOWN, FORWARD, BACKWARD}
While options:
Select option randomly
If valid option - Cell is unoccupied, we don't create tunnels etc.
explorePath(option)
remove explore option from list
end loop.

In short, we are doing a back-tracking traversal (DFS) of the option tree.

The algorithm works fine until we try to put a delay between each explorePath call to get that nice effect.
You see, it is not really easy to sleep() in javascript. There is no equivalent of Java sleep.

What we could do is this:

  setTimeOut('explorePath()', 100);


This would call the explorePath after a delay of 100 milliseconds. But, the call to setTimeOut() is non-blocking and it would continue execution while scheduling explorePath() to be executed after 100 milliseconds.

We could maintain our own call stack and choose not to call the explorePath() recursively. But it is easier to just push the maze positions to be painted white into a stack and continue execution. Once the display stack is ready we could pop from it and render onto canvas in a delayed manner using setTimeOut().

Finally, we could add a nice touch to the maze by not changing its directions too often, but in a timely manner based on a seeded probability.

Here’s the complete source (right click and view source). And don’t forget to save your maze as a PNG (again, right click and save).

HTML

Published at DZone with permission of Alosh Bennett, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Apache Kafka vs. Message Queue: Trade-Offs, Integration, Migration
  • Build a Simple Chat Server With gRPC in .Net Core
  • Building A Log Analytics Solution 10 Times More Cost-Effective Than Elasticsearch
  • Playwright JavaScript Tutorial: A Complete Guide

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: