Bah ça reste quand même un atelier de programmation, donc perso je ne vois pas trop l'intérêt de faire un gif sans code (sinon y'a pas spécialement de raisons que le gif soit lourd vu la nature des images générées. Ça représente en moyenne moins d'un Ko par frame pourvu que le gif ne soit pas formé à la bourrin avec de l'espace vide partout ...)
Bah dans l'absolus c'est aussi aux graphistes de proposer des ateliers ! Tout ne peut pas venir a chaque fois de SimpleIT. Mais là n'est pas le sujet ! Là c'est un atelier de code...
Bon J'ai repris le code de Thunderseb, histoire de montrer ce que l'on peut faire facilement avec SignalR.
En gros SignalR c'est du temps réel. Une personne se connecte voir son space invader, une autre se connecte elle vois le sien et la premiére personne vois les deux, etc...
C'est trés simple de faire un chat avec SignalR et toastr.
Donc voila en ASP.NET MVC C#
<!DOCTYPE html>
<html>
<head>
<title>Space</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
canvas
{
position: absolute;
}
body, canvas
{
background: #fff;
}
</style>
<link rel="stylesheet" href="/Scripts/toastr-1.0.2/toastr.css"/>
<link rel="stylesheet" href="/Scripts/toastr-1.0.2/toastr-responsive.css"/>
</head>
<body>
<input type="hidden" id="displayname" />
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<script src="/signalr/hubs"></script>
<script src="/Scripts/toastr-1.0.2/toastr.js"></script>
<script type="text/javascript">
$(function () {
var space = $.connection.space;
space.client.broadcastMessage = function (name) {
toastr.info(name, "Bonjour");
toastr.options = {
debug: false,
positionClass: 'toast-top-right',
onclick: null,
fadeIn: 300,
fadeOut: 1000,
timeOut: 5000,
extendedTimeOut: 1000
};
try {
var oCanvas = document.createElement('canvas');
oCanvas.width = 187;
oCanvas.height = 160;
var oContext = oCanvas.getContext("2d");
buildCanvas(oContext, oCanvas);
} catch (e) {
alert("Votre navigateur ne supporte pas canvas");
}
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Pseudo:', ''));
$.connection.hub.start().done(function () {
space.server.send($('#displayname').val());
});
function getRandom(nFrom, nTo) {
return Math.floor(Math.random() * (nTo - nFrom + 1) + nFrom);
}
function buildCanvas(oContext, oCanvas) {
var nClientHeight = window.innerHeight,
nClientWidth = window.innerWidth,
nX = 0, nY = 0,
sColor = "#" + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
aInvader = [
[0, 0, 1, 0, 1, 0, 0],
[0, 1, 1, 1, 1, 1, 0],
[0, 1, 2, 1, 2, 1, 0],
[0, 1, 0, 1, 0, 1, 0],
[1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 0, 1, 0, 1]
], i, j;
// Position des yeux, aléatoire
if (getRandom(0, 1) === 0) { // Oeil gauche
aInvader[2][2] = 0;
aInvader[3][2] = 2;
}
if (getRandom(0, 1) === 0) { // Oeil droit
aInvader[2][4] = 0;
aInvader[3][4] = 2;
}
// On efface le dessin précédent
oContext.clearRect(0, 0, oCanvas.width, oCanvas.height);
// Dessin de l'Invader
for (i = 0; i < 6; i++) {
for (j = 0; j < 7; j++) {
if (aInvader[i][j] === 1) {
oContext.fillStyle = sColor;
oContext.fillRect(nX, nY, 25, 25);
} else if (aInvader[i][j] === 2) {
oContext.fillStyle = "black";
oContext.fillRect(nX, nY, 25, 25);
}
nX += (4 + 25);
}
nX = 0;
nY += (4 + 25);
}
// Positionnement du canvas
oCanvas.style.top = getRandom(25, nClientHeight - oCanvas.height - 25) + "px";
oCanvas.style.left = getRandom(25, nClientWidth - oCanvas.width - 25) + "px";
document.body.appendChild(oCanvas);
window.setTimeout(function () {
buildCanvas(oContext, oCanvas)
document.body.appendChild(oCanvas);
}, 3000);
}
});
</script>
</body>
</html>
public class Space : Hub
{
public void Send(string name)
{
Clients.All.broadcastMessage(name);
}
}
Et puis c'est tout Bien sur on pourrais amélioré avec gestion des collisions et d'autres trucs comme.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
🍊 - Étudiant - Codeur en C | Zeste de Savoir apprenez avec une communauté | Articles - ♡ Copying is an act of love.
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero
If you'd like to join us, read "How do we work at OpenClassrooms"! :)
🍊 - Étudiant - Codeur en C | Zeste de Savoir apprenez avec une communauté | Articles - ♡ Copying is an act of love.
🍊 - Étudiant - Codeur en C | Zeste de Savoir apprenez avec une communauté | Articles - ♡ Copying is an act of love.
Je ne visite plus ce site, si ça vous intéresse (ce qui serait très curieux), lisez ma bio.