Forum d'entraide PHPFrance

Bonjour,
En cherchant un pau sur le net j'ai trouvé un script de ticket a gratter.
J'ai essayé de l'adapter à mon site mais j'ai un petit soucis.
Le ticket a gratter fonctionne uniquement si je ne fait pas de scroll sur la page, pourriez-vous m'aider à résoudre ce problème ,
Merci d'avance.

Code : Tout sélectionner

<?php
define('include',NULL);
include('core.php');
if (!isset($_SESSION['membre']) || $_SESSION['connect'] != true) {
header('Location: /compte/login'); 
die();
}

$nompage = 'Ticket a Gratter';
$descpage = 'Ticket a Gratter';
include('header.php');
include('sidebar.php');
$message = '';

?>

<!DOCTYPE html>
<html>
<head>
<style>

.scratchcard {
  position: relative;
  top: 50%;
  left: 27%;
  width: 300px;
  height: 400px;
  background: green;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.20);
  border-radius: 4px;
}

.title {
  color: #FFD700;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 2.4em;
  letter-spacing: 0.1em;
}
.msg {
  position: absolute;
  bottom: 30px;
  margin: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: #FFD700;
}

.scratch {
  width: 180px;
  height: 180px;
  background: #ccc;
  border-radius: 50%;
  border: 10px solid #fff;
}
#scratch_01 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
</style>

</head>
<body>
<?php    
    	
$sqlinfos = $db->prepare('SELECT euros, credits, pseudo, avatar, clicsjour, bonusptc FROM membres WHERE id = :id');
$sqlinfos->execute(array(':id' => $_SESSION['membre']));  
$infos = $sqlinfos->fetch(PDO::FETCH_OBJ);


$avatar = ($infos->avatar == '') ? '/theme/images/noavatar.png' : $infos->avatar;

echo '<div id="content" class="float_r"><h2 class="center">Ticket a Gratter</h2><div class="center"></div><br>
<div class="topart center"><h3>Ticket a Gratter</h3><div class="sidehead2"><div class="sidehead3"></div></div></div>

<div class="padding center">

<span style=color:#FFD700>Venez gratter votre ticket une fois par jour et tentez de gagner jusqu\'a 1000 crédits</span><br><br>

<div id="scratchcard" class="scratchcard">
	<h1 class="title">GRATTEZ!</h1>
	<span id="scratch_01" class="scratch"></span>
	<p id="msg" class="msg">Découvrez votre gain</p>
</div>


      ';
    
?> 
    
    <script>
 /* ============================== */
var requestAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 1000/60); };
/* ============================== */
function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
/* ============================== */
var Scratch = function(w,h) {
  var self = this;  
  
  self.canvas = document.createElement('canvas');
  self.ctx = this.canvas.getContext('2d');
  self.canvas.width = w;
  self.canvas.height = h;
  self.maskItems = [];
  self.displayRate = 0;
  self.isConmplete = false;
  
  self.clear = function(ctx) {
    ctx.clearRect(0,0,this.w,this.y);
  }
  self.drawBase = function(ctx) {
    ctx.save();
    ctx.beginPath();
    ctx.globalCompositeOperation = 'source-in';
    ctx.fillStyle = '#efefef';
    ctx.arc(w/2,h/2,w/2,Math.PI*2,false);
    ctx.fill();

    ctx.globalCompositeOperation = 'source-atop';
    ctx.font = 'bold 30px/1 sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = '#aaaaaa';
    ctx.fillText(result.name, w/2,h/2);
    ctx.restore();
  }
  self.drawMask = function(ctx) {
    for (var i = 0; i < this.maskItems.length; i++) {
      self.maskItems[i].draw(ctx);
    }
  }
  self.draw = function(ctx) {
    self.drawMask(ctx);
    self.drawBase(ctx);
  }
  self.append = function (id) {
    var container = document.getElementById(id);
    container.appendChild(self.canvas);
  };
}
Scratch.prototype.setSize = function (w,h) {
  this.canvas.width = w;
  this.canvas.height = h;
};
Scratch.prototype.addMask = function (obj) {
  this.maskItems.push(obj);
};
Scratch.prototype.getDisplayRate = function () {
  var imgData = this.ctx.getImageData(0,0,this.canvas.width, this.canvas.height);
  var w = imgData.width;
  var h = imgData.height;
  var data = imgData.data;
  var total = w * h;
  var visibles = 0;

  for (var y = 0; y < h; y++) {
    for (var x = 0; x < w; x++) {
      var p = (y * w + x) * 4;
      var alpha = data[p + 3];
      if (alpha < 200) visibles++;
    }
  }
  return 100 - 100 / total * visibles;
};

var Mask = function(x,y,r) {
  this.x = x;
  this.y = y;
  this.r = r;
}
Mask.prototype.draw = function (ctx) {
  ctx.beginPath();
  ctx.fillStyle = '#000000';
  ctx.globalCompositeOperation = 'destination-over';
  ctx.arc(this.x,this.y,this.r,Math.PI*2,false);
  ctx.fill();
};
/* ============================== */
var container = document.getElementById('scratchcard');
var body = document.body;

var scratch = new Scratch(180,180);
var canvas = scratch.canvas;
var ctx = scratch.ctx;

scratch.append("scratch_01");
/* ============================== */

var isTouching = false;
var isOpened   = false;

var w = canvas.width;
var h = canvas.height;

var result;
var results = [
  { name: 'BRAVO', msg: 'Vous avez gagné 1000 crédits', rate: 5},
  { name: 'BRAVO', msg: 'Vous avez gagné 500 crédits', rate: 15},
  { name: 'BRAVO', msg: 'Vous avez gagné 100 crédits', rate: 20},
  { name: 'PERDU', msg: 'Désolé vous avez perdu', rate: 60}
];

(function () {
  var sumRate = 0, hitRand = 0, tmpRate = 0;
  [].forEach.call(results,function(item) { sumRate += item['rate']; });
  hitRand = rand(0,sumRate);
  for (var i = 0; i < results.length; i++) {
    tmpRate += results[i]['rate'];
    result = results[i];
    if (hitRand < tmpRate) { break; }
  }
})();


function init() {
  if ('ontouchstart' in window) {
    container.addEventListener('touchstart', onTouchStart,false);
    document.body.addEventListener('touchend', onTouchEnd,false);
  } else {
    container.addEventListener('mousedown', onTouchStart,false);
    document.body.addEventListener('mouseup', onTouchEnd,false);
  }
  requestAnimFrame(animation);
}
window.addEventListener('load', init, false);

function animation() {
  requestAnimFrame(animation);
  
  scratch.clear(ctx);
  scratch.draw(ctx);
  
  if (scratch.getDisplayRate() > 70 && !isOpened) {
    var msgBox = document.getElementById('msg');
    msgBox.innerHTML = result.msg;
    msgBox.style.fontWeight = 'bold';
    msgBox.style.fontSize = '1.4em';
    isOpened = true;
  }
};
function onTouchStart(e) {
  e.preventDefault();
  isTouching = true;
  var event_trigger = ('ontouchstart' in window) ? 'touchmove' : 'mousemove';
  canvas.addEventListener(event_trigger, onTouchMove, false);
  animation();
}
function onTouchMove(e) {
  e.preventDefault();
  isTouching = true;
  var offsetX = canvas.getBoundingClientRect().left;
  var offsetY = canvas.getBoundingClientRect().top;
  var p = ('ontouchstart'in window) ? e.touches[0] : e;
  var x = p.pageX - offsetX;
  var y = e.pageY - offsetY;
  scratch.addMask(new Mask(x,y,20));
}
function onTouchEnd(e) {
  e.preventDefault();
  isTouching = false;
  var event_trigger = ('ontouchstart' in window) ? 'touchmove' : 'mousemove';
  canvas.removeEventListener(event_trigger, onTouchMove, false);
}
/* ============================== */
   
    
        </script>
</body>
</html>

<?php
echo '
</div><br></div><br /><br />';

include('footer.php');
?>

Forum d'entraide PHPFrance

Ticket a gratter

Ticket a gratter