Question : How to create Scratchcard with PHP and javascript.
Files : index.php
<?php
$server = $_SERVER['HTTP_HOST'];
$img = 'http://'.$server.'/scratch/img.php' ;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>ScratchPad</title>
<!-- filestart -->
<link rel="icon" type="image/vnd.microsoft.icon" href="./demo/img/favicon.ico" />
<link rel="Stylesheet" type="text/css" href="./demo/demo.css" />
<script type="text/javascript" src="./lib/jquery.1.11.0.min.js"></script>
<!-- fileend -->
<!-- <div id="demo2-percent"> </div>-->
<style>
.scratchpad{
width: 50%;
height: 100px;
border: solid 1px;
}
@media (max-width: 500px) {
.scratchpad {
width: 95%;
}
}
</style>
</head>
<body style="background-color:#24283D">
<!-- headstart -->
<header>
<div id="header-links"> </div>
</header>
<!-- headend -->
<div id="content" style="background-color:#24283D" >
<h1 id="plugin-name" align="center" style="color:#FFFFFF">Scratch</h1>
<div class="content-box" >
<h3> </h3>
<div id="demo2" class="scratchpad"></div>
<br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
<!-- footstart -->
<footer>
<div id="footer-icons"> </div>
</footer>
<!-- footend -->
</body>
</html>
<script type="text/javascript" src="./wScratchPad.min.js"></script>
<script type="text/javascript">
$('#demo2').wScratchPad({
bg: '<?php echo $img;?>',
fg: './images/logo.png',
'cursor': 'url("./cursors/coin.png") 5 5, default',
scratchMove: function (e, percent) {
$('#demo2-percent').html(percent);
if (percent > 30) {
this.clear();
}
}
});
</script>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
img.php
<?php
header('Content-Type: image/png');
// Create the image
$im = imagecreatetruecolor(250,100);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 250, 200, $white);
//$text = $discount;// The text to draw
$text = "YOUR TEXT HERE";
// Replace path by your own font path
$font = 'verdana.ttf';
// Add some shadow to the text
//imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
// Add the text
imagettftext($im, 20, 0, 30, 50, $black, $font, $text);
// Using imagepng() results in clearer txt compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
JAVASCRIPT
jquery.1.11.0.min.js
include the jquery version in script
wScratchPad.min.js
/*! wScratchPad - v2.1.0 - 2014-04-14 */!function(a){"use strict";function b(b,c){this.$el=a(b),this.options=c,this.init=!1,this.enabled=!0,this._generate()}b.prototype={_generate:function(){return a.support.canvas?(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),"static"===this.$el.css("position")&&this.$el.css("position","relative"),this.$img=a('<img src=""/>').attr("crossOrigin","").css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad=a(this.canvas).css({position:"absolute",width:"auto",height:"100%"}),this.$scratchpad.bindMobileEvents(),this.$scratchpad.mousedown(a.proxy(function(b){return this.enabled?(this.canvasOffset=a(this.canvas).offset(),this.scratch=!0,void this._scratchFunc(b,"Down")):!0},this)).mousemove(a.proxy(function(a){this.scratch&&this._scratchFunc(a,"Move")},this)).mouseup(a.proxy(function(a){this.scratch&&(this.scratch=!1,this._scratchFunc(a,"Up"))},this)),this._setOptions(),this.$el.append(this.$img).append(this.$scratchpad),this.init=!0,void this.reset()):(this.$el.append("Canvas is not supported in this browser."),!0)},reset:function(){var b=this,c=Math.ceil(this.$el.innerWidth()),d=Math.ceil(this.$el.innerHeight()),e=window.devicePixelRatio||1;this.pixels=c*d,this.$scratchpad.attr("width",c).attr("height",d),this.canvas.setAttribute("width",c*e),this.canvas.setAttribute("height",d*e),this.ctx.scale(e,e),this.pixels=c*e*d*e,this.$img.hide(),this.options.bg&&("#"===this.options.bg.charAt(0)?this.$el.css("backgroundColor",this.options.bg):(this.$el.css("backgroundColor",""),this.$img.attr("src",this.options.bg))),this.options.fg&&("#"===this.options.fg.charAt(0)?(this.ctx.fillStyle=this.options.fg,this.ctx.beginPath(),this.ctx.rect(0,0,c,d),this.ctx.fill(),this.$img.show()):a(new Image).attr("src",this.options.fg).load(function(){b.ctx.drawImage(this,0,0,c,d),b.$img.show()}))},clear:function(){this.ctx.clearRect(0,0,Math.ceil(this.$el.innerWidth()),Math.ceil(this.$el.innerHeight()))},enable:function(a){this.enabled=a===!0?!0:!1},destroy:function(){this.$el.children().remove(),a.removeData(this.$el,"wScratchPad")},_setOptions:function(){var a,b;for(a in this.options)this.options[a]=this.$el.attr("data-"+a)||this.options[a],b="set"+a.charAt(0).toUpperCase()+a.substring(1),this[b]&&this[b](this.options[a])},setBg:function(){this.init&&this.reset()},setFg:function(){this.setBg()},setCursor:function(a){this.$el.css("cursor",a)},_scratchFunc:function(a,b){a.pageX=Math.floor(a.pageX-this.canvasOffset.left),a.pageY=Math.floor(a.pageY-this.canvasOffset.top),this["_scratch"+b](a),(this.options.realtime||"Up"===b)&&this.options["scratch"+b]&&this.options["scratch"+b].apply(this,[a,this._scratchPercent()])},_scratchPercent:function(){for(var a=0,b=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height),c=0,d=b.data.length;d>c;c+=4)0===b.data[c]&&0===b.data[c+1]&&0===b.data[c+2]&&0===b.data[c+3]&&a++;return a/this.pixels*100},_scratchDown:function(a){this.ctx.globalCompositeOperation="destination-out",this.ctx.lineJoin="round",this.ctx.lineCap="round",this.ctx.strokeStyle=this.options.color,this.ctx.lineWidth=this.options.size,this.ctx.beginPath(),this.ctx.arc(a.pageX,a.pageY,this.options.size/2,0,2*Math.PI,!0),this.ctx.closePath(),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(a.pageX,a.pageY)},_scratchMove:function(a){this.ctx.lineTo(a.pageX,a.pageY),this.ctx.stroke()},_scratchUp:function(){this.ctx.closePath()}},a.support.canvas=document.createElement("canvas").getContext,a.fn.wScratchPad=function(c,d){function e(){var d=a.data(this,"wScratchPad");return d||(d=new b(this,a.extend(!0,{},c)),a.data(this,"wScratchPad",d)),d}if("string"==typeof c){var f,g=[],h=(void 0!==d?"set":"get")+c.charAt(0).toUpperCase()+c.substring(1),i=function(){f.options[c]&&(f.options[c]=d),f[h]&&f[h].apply(f,[d])},j=function(){return f[h]?f[h].apply(f,[d]):f.options[c]?f.options[c]:void 0},k=function(){f=a.data(this,"wScratchPad"),f&&(f[c]?f[c].apply(f,[d]):void 0!==d?i():g.push(j()))};return this.each(k),g.length?1===g.length?g[0]:g:this}return c=a.extend({},a.fn.wScratchPad.defaults,c),this.each(e)},a.fn.wScratchPad.defaults={size:5,bg:"#cacaca",fg:"#6699ff",realtime:!0,scratchDown:null,scratchUp:null,scratchMove:null,cursor:"crosshair"},a.fn.bindMobileEvents=function(){a(this).on("touchstart touchmove touchend touchcancel",function(a){var b=a.changedTouches||a.originalEvent.targetTouches,c=b[0],d="";switch(a.type){case"touchstart":d="mousedown";break;case"touchmove":d="mousemove",a.preventDefault();break;case"touchend":d="mouseup";break;default:return}var e=document.createEvent("MouseEvent");e.initMouseEvent(d,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),c.target.dispatchEvent(e)})}}(jQuery);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CSS
/*** layout ***/
body, html {
font-family: verdana;
font-size: 12px;
line-height:20px;
color: #333;
background-color: #FEFEFE;
margin: 0;
text-rendering: optimizeLegibility;
}
a {
color: #3399FF;
text-decoration: none;
}
code {
padding: 1px 3px;
color: #D14;
background-color: #F7F7F9;
border: 1px solid #E1E1E8;
border-radius: 5px;
}
h2 {
display: inline-block;
}
.no-margin-top {
margin-top: 0px;
}
/*** header ***/
header {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #1B1B1B;
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
border-width: 0 0 1px;
color: #FFF;
font-size: 10px;
text-align: left;
vertical-align: middle;
z-index: 100;
}
#header-logo {
position: absolute;
display: block;
width: 94px;
height: 20px;
left: 10px;
top: 10px;
background-image: url('./img/websanova-logo-small-full-black.png');
}
#header-links {
display: none;
position: absolute;
width: 100%;
left: 0px;
top: 40px;
}
#header-links a {
display: block;
font-size: 9px;
font-weight: bold;
font-family: Verdana;
color: #FAFAFA;
text-transform: uppercase;
margin-left: 0px;
text-align: center;
background-color: #1B1B1B;
border-top: solid 1px #CACACA;
line-height: 14px;
padding: 10px;
}
#header-links a:hover {
color: #636363;
}
/*** menu ***/
#header-menu-button {
position: absolute;
right: 6px;
top: 6px;
display: block;
color: #757575;
background-color: #e1e1e1;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: linear-gradient(top, #ebebeb, #e1e1e1);
box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
padding: 6px 10px;
font-size: 11px;
line-height: 16px;
cursor: pointer;
}
/*** content ***/
#plugin-name {
padding-bottom: 30px;
font-size: 24px;
border-bottom: solid #CACACA 1px;
}
#github-button {
display: block;
float: left;
margin-right: 2px;
width: 16px;
height: 16px;
cursor: pointer;
background-image: url('./img/addthis-github.png');
}
#addthis-toolbox {
position: absolute;
right: 15px;
top: 40px;
}
#content {
position: relative;
background: #FEFEFE;
max-width: 728px;
padding: 20px;
margin: 30px auto;
}
.content-box {
padding-left: 10px;
}
#content ul {
padding-left: 30px;
}
/*** footer ***/
footer {
position: fixed;
left: 0px;
bottom: -1px;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #1B1B1B;
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
box-shadow: 10px 1px 10px rgba(0, 0, 0, 0.5);
border-width: 0 0 1px;
color: #FFF;
font-size: 10px;
text-align: left;
vertical-align: middle;
z-index: 100;
}
#footer-icons {
position: absolute;
right: 10px;
top: 0px;
}
#footer-icons a {
display: inline-block;
*display: inline;
zoom: 1;
width: 17px;
height: 17px;
margin: 12px 0 0 10px;
background-repeat: no-repeat;
background-position: center center;
}
#linkedin-icon { background-image: url('./img/linkedin-icon.png'); width: 18px; }
#stumbleupon-icon { background-image: url('./img/stumbleupon-icon.png'); }
#googleplus-icon { background-image: url('./img/googleplus-icon.png'); }
#youtube-icon { background-image: url('./img/youtube-icon.png'); width: 17px; height: 18px; }
#facebook-icon { background-image: url('./img/facebook-icon.png'); width: 8px; }
#twitter-icon { background-image: url('./img/twitter-icon.png'); width: 20px; }
#github-icon { background-image: url('./img/github-icon.png'); width: 20px; }
#rss-icon { background-image: url('./img/rss-icon.png'); }
/*** media ***/
@media screen and (min-width: 600px) {
#header-logo {
left: 50px;
}
#footer-icons {
left: auto;
right: 50px;
}
#header-links {
display: block !important;
width: auto;
top: 0px;
left: auto;
right: 50px;
}
#header-links a {
display: inline;
font-size: 10px;
margin-left: 20px;
text-align: left;
background-color: none;
border-top: 0px;
margin-left: 10px;
line-height: inherit;
padding: 0px;
}
#header-menu-button {
display: none;
}
#plugin-name {
font-size: 30px;
}
#addthis-toolbox {
top: 44px;
}
}
/*** ads ***/
.websanova-plugins-page-horizontal-responsive { display:block; margin:0 auto; width: 320px; height: 50px; }
@media(min-width: 520px) { .websanova-plugins-page-horizontal-responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .websanova-plugins-page-horizontal-responsive { width: 728px; height: 90px; } }
.adsblock {
position: relative;
margin: 0 auto;
}
.ads2block {
margin-top: 20px;
}
.adsblock-mobile-banner {
width: 320px;
height: 50px;
}
.adsblock-banner {
display: none;
width: 468px;
height: 60px;
}
.adsblock-leaderboard {
display: none;
width: 728px;
height: 90px;
}
@media (min-width:520px) {
.adsblock-mobile-banner { display: none; }
.adsblock-banner { display: block; }
}
@media (min-width:800px) {
.adsblock-mobile-banner { display: none; }
.adsblock-banner { display: none; }
.adsblock-leaderboard { display: block; }
}
IMAGES
All Done
Enjoy the code
No comments:
Post a Comment