1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212
|
/******************************************** VARIABLE ************************************************/
var elem,ctx = false; // le canvas
var windowHeight = window.innerHeight; // hauteur fenetre
var windowWidth = window.innerWidth; // largeur fenetre
var asteroide = new Array(); // tableau des objets astéroides
var posMouseX,posMouseY,cursor=false; // position et état souris
var clickObject; // Click astéroide, station etc...
/******************************************** FONCTION ************************************************/
function loop(){
// efface le canvas
ctx.clearRect(0,0,windowWidth,windowHeight);
// affichage des astéroides
for ( key in asteroide ){
asteroide[key].move();
asteroide[key].draw();
}
// affiche la sation
station.draw();
// interaction souris
interactCursor();
// relance la boucle
window.requestAnimFrame(loop);
}
function traiteRetour(retour){
// fin de session
if(retour.security!==undefined){window.location='http://expansion.damocorp.com';}
}
function genereAsteroide(){
var rand = Math.random();
if ( rand < 0.3 ){
var tmp = new affImg('img/sprite_game.png',150,50,50,50,-50,-50);
} else if ( rand > 0.3 && rand < 0.6 ){
var tmp = new affImg('img/sprite_game.png',200,50,50,50,-50,-50);
} else {
var tmp = new affImg('img/sprite_game.png',250,50,50,50,-50,-50);
}
asteroide.push(tmp);
tmp.resetPosition();
}
function interactCursor(){
cursor = false;
// La station
if ( posMouseX > windowWidth/2-50 && posMouseX < windowWidth/2+50 && posMouseY > windowHeight/2-50 && posMouseY < windowHeight/2+50 ){
cursor = true;
clickObject='station';
}
// Les astéroides
for ( key in asteroide ){
if ( posMouseX > asteroide[key].posx && posMouseX < asteroide[key].posx+asteroide[key].affWidth && posMouseY > asteroide[key].posy && posMouseY < asteroide[key].posy+asteroide[key].affHeight ){
cursor = true;
clickObject = key;
break;
}
}
if ( cursor ){
$('#canvas').css({'cursor':'pointer'});
} else {
$('#canvas').css({'cursor':'auto'});
}
}
function interactClick(){
if ( cursor ){
console.log(asteroide[clickObject]);
}
}
/******************************************** OBJET ************************************************/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000/30);
};
})();
var affImg = function(s,sX,sY,w,h,x,y){
this.img = new Image();
this.img.src = s;
this.srcX = sX;
this.srcY = sY;
this.width = w;
this.height = h;
this.posx = x-this.width/2;
this.posy = y-this.height/2;
this.affWidth=w;
this.affHeight=h;
}
affImg.prototype.draw = function(){
ctx.drawImage(this.img,this.srcX,this.srcY,this.width,this.height,this.posx,this.posy,this.affWidth,this.affHeight);
}
affImg.prototype.move = function(){
if ( this.sensX === undefined ){
this.sensX=3;
this.sensY=3;
}
this.posx+=this.sensX;
this.posy+=this.sensY;
// relance l'astéroide s'il sort de la zone
if ( this.posx > windowWidth+250 || this.posy > windowHeight+250 || this.posx < -250 || this.posy < -250 ){
this.resetPosition();
}
}
affImg.prototype.resetPosition = function(){
// vitesse de déplacement
this.sensX=Math.random();
if ( this.sensX < 0.1 ){ this.sensX = 0.1; }
this.sensY=Math.random();
if ( this.sensY < 0.1 ){ this.sensY = 0.1; }
var rand = Math.random();
// l'astéroide viens du haut
if ( rand <= 0.25 ){
this.posx= Math.floor(Math.random()*windowWidth);
this.posy=-50;
// l'astéroide part vers la gauche
if ( this.posx > windowWidth/2){
this.sensX--;
}
// l'astéroide viens de la droite
} else if ( rand > 0.25 && rand <= 0.50 ){
this.posx= windowWidth+50;
this.posy= Math.floor(Math.random()*windowHeight);
// l'astéroide part vers le haut et va vers la gauche
this.sensX--;
if ( this.posy > windowHeight/2){
this.sensY--;
}
// l'astéroide viens du bas
} else if ( rand > 0.25 && rand <= 0.50 ){
this.posx= Math.floor(Math.random()*windowWidth);
this.posy=windowHeight+50;
// l'astéroide part vers le haut et va vers la gauche
this.sensY--;
if ( this.posx > windowWidth/2){
this.sensX--;
}
// l'astéroide viens de la gauche
} else {
this.posx= -50;
this.posy=Math.floor(Math.random()*windowHeight);
// l'astéroide part vers le haut et va vers la gauche
if ( this.posy > windowHeight/2){
this.sensX--;
}
}
// modifie la taille des astéroide
rand = Math.random();
var scale = (rand*5+5)/10;
this.affWidth = this.width*scale;
this.affHeight = this.height*scale;
// modifie le type de l'astéroide
if ( rand < 0.3 ){
this.sX=150;
} else if ( rand > 0.3 && rand < 0.6 ){
this.sX=200;
} else {
this.sX=250;
}
}
/******************************************** JQUERY ************************************************/
$(document).ready(function(){
// Ajout du canvas
$('body').prepend('<canvas id="canvas" width="'+windowWidth+'" height="'+windowHeight+'"></canvas>');
// Elem + ctx
elem = document.getElementById('canvas');
ctx = elem.getContext('2d');
// affichage de la station
var station = new affImg('img/sprite_game.png',0,50,100,100,(windowWidth/2),(windowHeight/2));
// ajout de X astéroide
for (var i=0; i<10; i++) {
genereAsteroide();
};
//lancement de la boucle
loop();
/***************************** EVENEMENT *********************************/
document.getElementById('canvas').addEventListener('mousemove',function(e){posMouseX=e.pageX;posMouseY=e.pageY;},false);
document.getElementById('canvas').addEventListener('click',interactClick,false);
}); |
Partager