d
This commit is contained in:
alexandre-pereira 2015-03-22 14:05:40 +01:00
parent 4b18ef7214
commit 018acc66f9
21 changed files with 330 additions and 20 deletions

View File

@ -172,7 +172,22 @@ button.level:active {
cursor:pointer;
background-position: center center;
background-size:cover;
line-height:100px;
font-weight:bold;
font-size:40px;
}
#imgRef:active {
cursor:wait;
}
}
.trophy-text {
font-weight: bold;
line-height: 40px;
font-size: 25px;
color: gold;
display: inline-block;
padding: 0 15px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7)
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 429 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 548 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 418 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 288 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 489 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 519 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 509 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 606 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 566 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 617 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

254
SRC/public/js/fire-work.js Normal file
View File

@ -0,0 +1,254 @@
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
mousePos = {
x: 400,
y: 300
},
// create canvas
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
particles = [],
rockets = [],
MAX_PARTICLES = 400,
colorCode = 0;
// update mouse position
window.addEventListener('mousemove', function(e) {
e.preventDefault();
mousePos = {
x: e.clientX,
y: e.clientY
};
});
// launch more rockets!!!
window.addEventListener('mousedown', function(e) {
for (var i = 0; i < 5; i++) {
launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
}
});
function launch() {
launchFrom(mousePos.x);
}
function launchFrom(x) {
if (rockets.length < 10) {
var rocket = new Rocket(x);
rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
rocket.vel.y = Math.random() * -3 - 4;
rocket.vel.x = Math.random() * 6 - 3;
rocket.size = 8;
rocket.shrink = 0.999;
rocket.gravity = 0.01;
rockets.push(rocket);
}
}
function loop() {
// update screen size
if (SCREEN_WIDTH != window.innerWidth) {
canvas.width = SCREEN_WIDTH = window.innerWidth;
}
if (SCREEN_HEIGHT != window.innerHeight) {
canvas.height = SCREEN_HEIGHT = window.innerHeight;
}
// clear canvas
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
var existingRockets = [];
for (var i = 0; i < rockets.length; i++) {
// update and render
rockets[i].update();
rockets[i].render(context);
// calculate distance with Pythagoras
var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
// random chance of 1% if rockets is above the middle
var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;
/* Explosion rules
- 80% of screen
- going down
- close to the mouse
- 1% chance of random explosion
*/
if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
rockets[i].explode();
} else {
existingRockets.push(rockets[i]);
}
}
rockets = existingRockets;
var existingParticles = [];
for (var i = 0; i < particles.length; i++) {
particles[i].update();
// render and save particles that can be rendered
if (particles[i].exists()) {
particles[i].render(context);
existingParticles.push(particles[i]);
}
}
// update array with existing particles - old particles should be garbage collected
particles = existingParticles;
while (particles.length > MAX_PARTICLES) {
particles.shift();
}
}
function Particle(pos) {
this.pos = {
x: pos ? pos.x : 0,
y: pos ? pos.y : 0
};
this.vel = {
x: 0,
y: 0
};
this.shrink = .97;
this.size = 2;
this.resistance = 1;
this.gravity = 0;
this.flick = false;
this.alpha = 1;
this.fade = 0;
this.color = 0;
}
Particle.prototype.update = function() {
// apply resistance
this.vel.x *= this.resistance;
this.vel.y *= this.resistance;
// gravity down
this.vel.y += this.gravity;
// update position based on speed
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;
// shrink
this.size *= this.shrink;
// fade out
this.alpha -= this.fade;
};
Particle.prototype.render = function(c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
};
Particle.prototype.exists = function() {
return this.alpha >= 0.1 && this.size >= 1;
};
function Rocket(x) {
Particle.apply(this, [{
x: x,
y: SCREEN_HEIGHT}]);
this.explosionColor = 0;
}
Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;
Rocket.prototype.explode = function() {
var count = Math.random() * 10 + 80;
for (var i = 0; i < count; i++) {
var particle = new Particle(this.pos);
var angle = Math.random() * Math.PI * 2;
// emulate 3D effect by using cosine and put more particles in the middle
var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
particle.vel.x = Math.cos(angle) * speed;
particle.vel.y = Math.sin(angle) * speed;
particle.size = 10;
particle.gravity = 0.2;
particle.resistance = 0.92;
particle.shrink = Math.random() * 0.05 + 0.93;
particle.flick = true;
particle.color = this.explosionColor;
particles.push(particle);
}
};
Rocket.prototype.render = function(c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
};
document.body.appendChild(canvas);
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
setInterval(launch, 800);
setInterval(loop, 1000 / 50);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 KiB

View File

@ -4,7 +4,7 @@
@section('content')
<div style="text-align:center">
<div id="imgRef" style="background-image:url('{{ $ref -> image }}'); line-height:100px;font-weight:bold;">
<div id="imgRef" style="background-image:url('{{ $ref -> image }}');">
</div>
<br>
@ -15,15 +15,18 @@
<br>
<div style="display:inline-block;">
<img style="height:100px; vertical-align:middle;width:100px" src="{{ URL::to('imgs/trophees/bronze.png') }}"><br>
{{$nbBronze}}
<div class="trophy-text" style="color:chocolate;">{{$nbBronze}}</div>
</div>
<div style="display:inline-block;">
<img style="height:100px; vertical-align:middle;width:100px" src="{{ URL::to('imgs/trophees/argent.png') }}"><br>
{{$nbArgent}}
<div class="trophy-text" style="color:#c0c0c0;">{{$nbArgent}}</div>
</div>
<div style="display:inline-block;">
<img style="height:100px; vertical-align:middle;width:100px" src="{{ URL::to('imgs/trophees/or.png') }}"><br>
{{$nbOr}}
<div class="trophy-text" style="color:gold;">{{$nbOr}}</div>
</div>
</div>
@endsection

View File

@ -6,15 +6,49 @@
<script type="text/javascript">
function getPieceWidth(w,h) {
//cas où l'image rentre dans l'écran, on ne fais rien
if(h<y && w<x) {
return w * ratioImage;
}
//cas où l'image est plus large et haute, on prend le meilleur ratio pour pas redimensionner 2 fois
if(h/y > w/x) { //il faut redimensionner en hauteur
console.log("il faut redimensionner en hauteur")
return w * y/h * ratioImage;
} else { //on redimensionne en largeur
return x * ratioImage;
}
}
function getPieceHeight(w,h) {
if(h<y && w<x) {
return h * ratioImage;
}
if(h/y > w/x) { //il faut redimensionner en hauteur
return y * ratioImage;
} else {
return h * x/w * ratioImage;
}
}
/*function getPieceWidthOld(w,h) {
//if(h>w) {
return w * (y * ratioImage)/h;
//} else return x * ratioImage;
}
function getPieceHeight(w,h) {
function getPieceHeightOld(w,h) {
//if(h>w) {
return y * ratioImage;
//} else return h * (x * ratioImage)/w;
}
}*/
function preload () {
game.load.spritesheet('balls', '{{ URL::to('imgs/puzzle/balls.png') }}', 17, 17);
game.load.image('trophy3', '{{ URL::to('imgs/trophees/or.png') }}');
@ -61,19 +95,20 @@
}
}
dateDebut = new Date();
}
function drawGrid() {
pieces.forEach(function(item){
function drawGrid(idTab) {
var graphics = game.add.graphics();
graphics.lineStyle(2, 0xff0000, 1);
graphics.moveTo(10, 10);
graphics.lineTo(Math.floor(getPieceWidth(selection[idTab-1].width, selection[idTab-1].height)) + 10,
10);
graphics.lineTo(Math.floor(getPieceWidth(selection[idTab-1].width, selection[idTab-1].height)) + 10,
Math.floor(getPieceHeight(selection[idTab-1].width, selection[idTab-1].height)) + 10);
});
var graphics = game.add.graphics(0, 0);
graphics.lineStyle(1, 0xff0000, 1);
graphics.moveTo(800, 0);
graphics.lineTo(100, 0);
graphics.lineTo(10,10);
}
function create () {
this.button3 = this.add.button(0, 0, 'previous', changePage);
@ -82,6 +117,8 @@
this.physics.startSystem(Phaser.Physics.ARCADE);
createPiecesFor(1);
drawGrid(1);
dateDebut = new Date();
}
function changePage() {
if (confirm('Quitter le jeu ?')) {
@ -170,13 +207,13 @@
if(piece.placed == true) cpt++
});
if(cpt==pieces.length) {
var temps = Math.ceil(((new Date()) - dateDebut)/60000);
var texteADire = (temps <= 1) ? "Bravo, tu as mis moins d'une minute." :
"Bravo, tu as mis "+temps+" minutes. ";;
responsiveVoice.speak(texteADire, "French Female");
pieces.forEach(function(item){item.input.draggable = false;});
if(nbToPlay == currentPlayed)
{
var temps = Math.ceil(((new Date()) - dateDebut)/60000);
var texteADire = (temps <= 1) ? "Bravo, tu as mis moins d'une minute." :
"Bravo, tu as mis "+temps+" minutes. ";;
responsiveVoice.speak(texteADire, "French Female");
leftEmitter = game.add.emitter(50, 50);
leftEmitter.bounce.setTo(0.8, 0.8);
leftEmitter.setXSpeed(100, 200);
@ -236,7 +273,8 @@
}
var leftEmitter, rightEmitter;
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
var x = window.innerWidth;
var y = window.innerHeight;
var pieces = null;
var dateDebut = null;