Skip to content

Instantly share code, notes, and snippets.

@bazooka07

bazooka07/labyrinthe.html

Last active June 4, 2018 08:57
Show Gist options
  • Save bazooka07/365b87efd5815a8eec9d27bacd63404a to your computer and use it in GitHub Desktop.
Save bazooka07/365b87efd5815a8eec9d27bacd63404a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
labyrinthe.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- https://forum.alsacreations.com/topic-5-83375-1-Probleme-affichage-images-sur-canvas-Json-et-ajout-quadrillagehelp-.html -->
<meta charset="utf-8" />
<title>Labyrinthe</title>
<style>
#canvas { border-collapse: collapse; border: 1px solid #444; }
#canvas tr { height: 2rem; }
#canvas tr:not(last-of-type) { border-bottom: 1px solid #444; }
#canvas td { width: 2rem; }
#canvas td:not(last-of-type) { border-right: 1px solid #444; }
#canvas td { text-align: center; }
#canvas td.grass { background: lime; }
#canvas td.wall { background: firebrick; }
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table id="canvas">
</table>
<script>
'use strict';
function drawMap(containerId, map1) {
const container = document.getElementById(containerId);
map1.forEach(function(row, y) {
const rowEl = document.createElement('TR');
row.forEach(function(cell, x) {
const cellEl = document.createElement('TD');
cellEl.className = (cell == 1) ? 'wall' : 'grass';
cellEl.id = 'cell-' + x + ',' + y;
cellEl.textContent = ' ';
rowEl.appendChild(cellEl);
x++;
});
container.appendChild(rowEl);
y++;
});
}
drawMap(
'canvas',
[
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 1, 0]
]
);
function drawWeapon(x, y, symbol) {
const cellEl = document.getElementById('cell-' + x + ',' + y);
cellEl.textContent = symbol;
}
drawWeapon(5, 3, 'O');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment