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');
?>