Initial commit. Basic tileset, html5 canvas used to draw tiles, simplistic level description.
Georges Dupéron
BIN
img/end.png
Normal file
|
After Width: | Height: | Size: 438 B |
BIN
img/floor.png
Normal file
|
After Width: | Height: | Size: 681 B |
BIN
img/grass.png
Normal file
|
After Width: | Height: | Size: 588 B |
BIN
img/hole.png
Normal file
|
After Width: | Height: | Size: 426 B |
BIN
img/player.png
Normal file
|
After Width: | Height: | Size: 382 B |
BIN
img/sand.png
Normal file
|
After Width: | Height: | Size: 654 B |
BIN
img/wall.png
Normal file
|
After Width: | Height: | Size: 680 B |
22
index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" ?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Laura Palisse</title>
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="style.css" media="all" />-->
|
||||||
|
|
||||||
|
<script src="modernizr.custom.js"></script>
|
||||||
|
<script src="jquery-1.10.2.min.js"></script>
|
||||||
|
<script src="jeu.js"></script>
|
||||||
|
|
||||||
|
<meta name="description" content="Jeu vidéo réalisé par Laura Palisse et Georges Dupéron." />
|
||||||
|
</head>
|
||||||
|
<body id="index" style="text-align:center;">
|
||||||
|
<h1>Caverne</h1>
|
||||||
|
|
||||||
|
<canvas id="canvas" width="600" height="400" style="border: thin solid black">
|
||||||
|
Votre navigateur ne supporte pas l'élément Canvas. Utilisez un navigateur web plus récent pour jouer à ce jeu.
|
||||||
|
</canvas>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
71
jeu.js
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
function loadSprites(fileNames, callback) {
|
||||||
|
var sprites = {};
|
||||||
|
var loaders = [];
|
||||||
|
|
||||||
|
$.each(fileNames, function(name, src) {
|
||||||
|
var deferred = $.Deferred();
|
||||||
|
var img = new Image();
|
||||||
|
img.onload = function() { deferred.resolve(); };
|
||||||
|
img.src = src;
|
||||||
|
sprites[name] = img;
|
||||||
|
loaders.push(deferred.promise());
|
||||||
|
});
|
||||||
|
|
||||||
|
$.when.apply($, loaders).done(function() { callback(sprites); });
|
||||||
|
}
|
||||||
|
|
||||||
|
// $(function() {
|
||||||
|
// var canvas = document.getElementById('canvas');
|
||||||
|
// var c = canvas.getContext('2d');
|
||||||
|
// c.fillStyle = 'black';
|
||||||
|
// c.fillRect(0,0,16,16);
|
||||||
|
|
||||||
|
// loadSprites({
|
||||||
|
// f: "img/floor.png",
|
||||||
|
// g: "img/grass.png",
|
||||||
|
// h: "img/hole.png",
|
||||||
|
// s: "img/sand.png",
|
||||||
|
// w: "img/wall.png",
|
||||||
|
// }, function(sprites) {
|
||||||
|
// x = 0;
|
||||||
|
// y = 0;
|
||||||
|
// $.each(sprites, function(name, sprite) {
|
||||||
|
// c.drawImage(sprite,x,y);
|
||||||
|
// x += 16;
|
||||||
|
// });
|
||||||
|
// //
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var c = canvas.getContext('2d');
|
||||||
|
c.fillStyle = 'black';
|
||||||
|
c.fillRect(0,0,16,16);
|
||||||
|
|
||||||
|
level = [
|
||||||
|
"hhhhhhhhhhwwwww",
|
||||||
|
"wwwwwwwwwwwfffw",
|
||||||
|
"wpfffhffffffefw",
|
||||||
|
"wwwwwwwwwwwfffw",
|
||||||
|
"hhhhhhhhhhwwwww",
|
||||||
|
"pfghswe"
|
||||||
|
];
|
||||||
|
|
||||||
|
loadSprites({
|
||||||
|
p: "img/player.png",
|
||||||
|
f: "img/floor.png",
|
||||||
|
g: "img/grass.png",
|
||||||
|
h: "img/hole.png",
|
||||||
|
s: "img/sand.png",
|
||||||
|
w: "img/wall.png",
|
||||||
|
e: "img/end.png",
|
||||||
|
}, function(sprites) {
|
||||||
|
|
||||||
|
for (var y = 0; y < level.length; y++) {
|
||||||
|
for (var x = 0; x < level[y].length; x++) {
|
||||||
|
c.drawImage(sprites[level[y][x]], x*16, y*16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||