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);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||