8.0w+
社区成员
html5的刮刮卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=yes;" />
<title>刮刮卡</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">document.write('<script type="text/javascript" src="../../../klwSDK/klwSDK.js?ver='+Math.random()+'"><\/script>')</script>
<script type="text/javascript" src="./js/lufylegend-1.9.3.simple.min.js"></script>
<script type="text/javascript" src="./js/lufylegend.Loading4-0.1.0.min.js"></script>
<script type="text/javascript" src="../../../klwSDK/klwMoreGame.js"></script>
<script type="text/javascript" src="../../../klwSDK/submitScore.js"></script>
<script type="text/javascript" src="../dp/Change.js"></script>
</head>
<body style="margin:0px 0px 0px 0px; background-color: #ffffff; height: 100%">
<div id="legend"></div>
<img id="share" src="../dp/share_bg.png"style="position:fixed;width:100%;height: 100%;top:0px;left:0px;visibility: hidden;z-index: 9999" onclick="document.getElementById('share').style.visibility='hidden'"/>
</body>
</html>
<script>
var josnArr=[];
var resourceData=[];
klw.config("../../../klwSDK/",[KlwSDK.WXSDK,KlwSDK.SUBMIT_SCORE,KlwSDK.GET_RESOURCE_JSON,KlwSDK.FLAYER],function(){
$.getJSON("ggk.json",function(data){
klw_getResourceJson.klw_getJsonType("_jsonArrandJson",data,callBack);
});
});
function callBack(resourceList,dataLocal){
console.log(resourceList);
resourceData=resourceList;
for(var j= 0;j<dataLocal.length;j++){
josnArr.push(dataLocal[j]);
}
document.title=resourceList["webTitle"];
KlwSDK.shareData.title=resourceList["wxShareTitle"];
KlwSDK.shareData.desc=resourceList["wxShareDesc"];
}
function main() {
//手机适配
if(LGlobal.canTouch){
LGlobal.stageScale = LStageScaleMode.EXACT_FIT;
LSystem.screen(LStage.FULL_SCREEN);
}
loadingLayer = new LoadingSample4();
addChild(loadingLayer);
LLoadManage.load(josnArr,
function (progress) {
loadingLayer.setProgress(progress);
}, gameInit);
}
var imgData=[
{name:"A2",path:resourceData["A2"]},
{name:"B2",path:resourceData["B2"]},
{name:"restart",path:resourceData["restart"]},
{name:"share",path:resourceData["share"]},
{name:"zhongjiang",path:resourceData["zhongjiang"]},
{name:"zhongjiang",path:resourceData["zhongjiang"]}
];
var imglist;
var loadingLayer,backSprite,middleLayer;
var paintbrushSprite;
var outBitmapData;
var paintbrushBitmapData;
var cancelBtnBitmapData;
var shareBtnBitmapData;
var paintbrush;
var paintbrushSize=40;
var pointList=[];
var lx= 0,ly=0;
var isStart=false;
init(20,"legend",320,416,main);
function gameInit(result){
imglist=result;
removeChild(loadingLayer);
loadingLayer=null;
var bitmapData;
var bitmap;
var shape;
var backBitmapData=new LBitmapData(imglist["A2"]);
paintbrushSprite=new LSprite();
//那次填充像素块儿做成，一个类似刷子的东西
shape=new LShape();
shape.graphics.drawRect(0,"#CCCCCC",[0,0,paintbrushSize,paintbrushSize],true,"#CCCCCC");
bitmapData=new LBitmapData(null,0,0,paintbrushSize,paintbrushSize,LBitmapData.DATA_CANVAS);
bitmapData.draw(shape);
paintbrush=bitmapData.getPixels(new LRectangle(0,0,paintbrushSize,paintbrushSize));
//这个用来做颜色合成
paintbrushBitmapData=new LBitmapData(null,0,0,backBitmapData.width,backBitmapData.height,LBitmapData.DATA_CANVAS);
//这个用来拷贝像素
outBitmapData=new LBitmapData(null,0,0,backBitmapData.width,backBitmapData.height,LBitmapData.DATA_CANVAS);
var paintbrushBitmap=new LBitmap(paintbrushBitmapData);
paintbrushSprite.addChild(paintbrushBitmap);
//我用了同一张图片，为了看出效果，我显示了不同的区域，以达到错位
bitmapData=new LBitmapData(imglist["B2"]);
bitmap=new LBitmap(bitmapData);
paintbrushSprite.addChild(bitmap);
bitmap.blendMode=LBlendMode.SOURCE_IN;
middleLayer=new LSprite();
backSprite=new LSprite();
addChild(backSprite);
backSprite.addChild(middleLayer);
//底图
var backBitmap=new LBitmap(backBitmapData);
backBitmap.x=78;
backBitmap.y=98;
backBitmap.scaleX=.5;
backBitmap.scaleY=.5;
backSprite.addChild(backBitmap);
//刮图
backSprite.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);
backSprite.addEventListener(LMouseEvent.MOUSE_MOVE,onmove);
backSprite.addEventListener(LMouseEvent.MOUSE_UP,onup);
//实时拷贝像素
backSprite.addEventListener(LEvent.ENTER_FRAME,onframe);
var outBitmap=new LBitmap(outBitmapData);
outBitmap.x=78;
outBitmap.y=98;
outBitmap.scaleX=.5;
outBitmap.scaleY=.5;
backSprite.addChild(outBitmap);
}
function ondown(event){
isStart=true;
paintbrushBitmapData.putPixels(new LRectangle(event.selfX-paintbrushSize*0.5,event.selfY-paintbrushSize*0.5,paintbrushSize,paintbrushSize),paintbrush);
}
function onmove(event) {
if (isStart) {
if (pointList.indexOf(Math.round(event.offsetX + "_" + Math.round(event.offsetY))) < 0) {
pointList.push(Math.round(event.offsetX) + "_" + Math.round(event.offsetY));
}
//之前的bitmap和paintbrushBitmapData重叠的部分会有效
if (lx == 0 && ly == 0) {
lx = event.offsetX;
ly = event.offsetY;
paintbrushBitmapData.putPixels(new LRectangle(event.selfX - paintbrushSize , event.selfY - paintbrushSize, paintbrushSize, paintbrushSize), paintbrush);
}
else {
//补充画笔
paintbrushBitmapData.putPixels(new LRectangle(lx + (event.selfX - lx) / 5 - paintbrushSize * 0.5, ly + (event.selfY - ly) / 5 - paintbrushSize * 0.5, paintbrushSize, paintbrushSize), paintbrush);
paintbrushBitmapData.putPixels(new LRectangle(lx + (event.selfX - lx) * 2 / 5 - paintbrushSize * 0.5, ly + (event.selfY - ly) * 2 / 5 - paintbrushSize * 0.5, paintbrushSize, paintbrushSize), paintbrush);
paintbrushBitmapData.putPixels(new LRectangle(lx + (event.selfX - lx) * 3 / 5 - paintbrushSize * 0.5, ly + (event.selfY - ly) * 3 / 5 - paintbrushSize * 0.5, paintbrushSize, paintbrushSize), paintbrush);
paintbrushBitmapData.putPixels(new LRectangle(event.selfX - paintbrushSize * 0.5, event.selfY - paintbrushSize * 0.5, paintbrushSize, paintbrushSize), paintbrush);
lx = event.offsetX * .5;
ly = event.offsetY * .5;
}
}
}
function onup(event){
isStart=false;
lx=0;ly=0;
//刮到一定坐标数可调整
if(pointList.length>=150)
{
var newBitmap=new LBitmap(new LBitmapData(imglist["B2"]));
newBitmap.x=78;
newBitmap.y=98;
newBitmap.scaleX=.5;
newBitmap.scaleY=.5;
newBitmap.alpha=0;//表示指定对象的 Alpha 透明度值。有效值为 0（完全透明）到 1（完全不透明）。默认值为 1。alpha 设置为 0 的显示对象是活动的，即使它们不可见。
backSprite.addChild(newBitmap);
LTweenLite.to(newBitmap,1,{alpha:1,ease:LEasing.Strong.easeInOut});
var restartLayer=new LSprite();
var shareLayer = new LSprite();
middleLayer.addChild(shareLayer);
var shareBtnBitmapData=new LBitmapData(imglist["share"]);
var shareBtn=new LBitmap(shareBtnBitmapData);
shareLayer.addChild(shareBtn);
shareBtn.x=160;
shareBtn.y=288;
shareBtn.scaleX=.5;
shareBtn.scaleY=.5;
shareLayer.addEventListener(LMouseEvent.MOUSE_DOWN,shareX);
var cancelBtnBitmapData=new LBitmapData(imglist["restart"]);
var cancelBtn=new LBitmap(cancelBtnBitmapData);
middleLayer.addChild(restartLayer);
restartLayer.addChild(cancelBtn);
cancelBtn.x=60;
cancelBtn.y=288;
cancelBtn.scaleX=.5;
cancelBtn.scaleY=.5;
restartLayer.addEventListener(LMouseEvent.MOUSE_DOWN,reStart);
}
}
function onframe(event){
outBitmapData.draw(paintbrushSprite);
}
function shareX(){
console.log("分享给微信好友!!!!!!!!");
document.getElementById("share").style.visibility="visible";
}
function reStart(){
console.log("重新抽奖!!!!!!!!!");
gameInit();
}
</script>
想点击“再来一次”重新抽奖时，结果总有如下错误：
lufylegend-1.9.3.simple.min.js:2174 Uncaught TypeError: Cannot read property 'objectIndex' of null
Index.html:174 Uncaught TypeError: Cannot read property 'B2' of undefined
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=yes;" />
<title>刮刮卡</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">document.write('<script type="text/javascript" src="../../../klwSDK/klwSDK.js?ver='+Math.random()+'"><\/script>')</script>
<script type="text/javascript" src="./js/lufylegend-1.9.3.simple.min.js"></script>
<script type="text/javascript" src="./js/lufylegend.Loading4-0.1.0.min.js"></script>
<script type="text/javascript" src="../../../klwSDK/klwMoreGame.js"></script>
<script type="text/javascript" src="../../../klwSDK/submitScore.js"></script>
<script type="text/javascript" src="../dp/Change.js"></script>
</head>
<body style="margin:0px 0px 0px 0px; background-color: #ffffff; height: 100%">
<div id="legend"></div>
<img id="share" src="../dp/share_bg.png"style="position:fixed;width:100%;height: 100%;top:0px;left:0px;visibility: hidden;z-index: 9999" onclick="document.getElementById('share').style.visibility='hidden'"/>
</body>
</html>
<script>
var josnArr=[];
var resourceData=[];
klw.config("../../../klwSDK/",[KlwSDK.WXSDK,KlwSDK.SUBMIT_SCORE,KlwSDK.GET_RESOURCE_JSON,KlwSDK.FLAYER],function(){
$.getJSON("ggk.json",function(data){
klw_getResourceJson.klw_getJsonType("_jsonArrandJson",data,callBack);
});
});
function callBack(resourceList,dataLocal){
console.log(resourceList);
resourceData=resourceList;
for(var j= 0;j<dataLocal.length;j++){
josnArr.push(dataLocal[j]);
}
document.title=resourceList["webTitle"];
KlwSDK.shareData.title=resourceList["wxShareTitle"];
KlwSDK.shareData.desc=resourceList["wxShareDesc"];
}
function main() {
//手机适配
if(LGlobal.canTouch){
LGlobal.stageScale = LStageScaleMode.EXACT_FIT;
LSystem.screen(LStage.FULL_SCREEN);
}
loadingLayer = new LoadingSample4();
addChild(loadingLayer);
LLoadManage.load(josnArr,
function (progress) {
loadingLayer.setProgress(progress);
}, gameInit);
}
var imgData=[
{name:"A2",path:resourceData["A2"]},
{name:"B2",path:resourceData["B2"]},
{name:"restart",path:resourceData["restart"]},
{name:"share",path:resourceData["share"]},
{name:"zhongjiang",path:resourceData["zhongjiang"]},
{name:"zhongjiang",path:resourceData["zhongjiang"]}
];
var imglist;
var loadingLayer,backSprite,middleLayer;
var paintbrushSprite;
var outBitmapData;
var paintbrushBitmapData;
var cancelBtnBitmapData;
var shareBtnBitmapData;
var paintbrush;
var paintbrushSize=40;
var pointList=[];
var lx= 0,ly=0;
var isStart=false;
init(20,"legend",320,416,main);
function gameInit(result){
imglist=result;
removeChild(loadingLayer);
loadingLayer=null;
var bitmapData;
var bitmap;
var shape;
var backBitmapData=new LBitmapData(imglist["A2"]);
paintbrushSprite=new LSprite();
//那次填充像素块儿做成，一个类似刷子的东西
shape=new LShape();
shape.graphics.drawRect(0,"#CCCCCC",[0,0,paintbrushSize,paintbrushSize],true,"#CCCCCC");
bitmapData=new LBitmapData(null,0,0,paintbrushSize,paintbrushSize,LBitmapData.DATA_CANVAS);
bitmapData.draw(shape);
paintbrush=bitmapData.getPixels(new LRectangle(0,0,paintbrushSize,paintbrushSize));
//这个用来做颜色合成
paintbrushBitmapData=new LBitmapData(null,0,0,backBitmapData.width,backBitmapData.height,LBitmapData.DATA_CANVAS);
//这个用来拷贝像素
outBitmapData=new LBitmapData(null,0,0,backBitmapData.width,backBitmapData.height,LBitmapData.DATA_CANVAS);
var paintbrushBitmap=new LBitmap(paintbrushBitmapData);
paintbrushSprite.addChild(paintbrushBitmap);
//我用了同一张图片，为了看出效果，我显示了不同的区域，以达到错位
bitmapData=new LBitmapData(imglist["B2"]);
bitmap=new LBitmap(bitmapData);
paintbrushSprite.addChild(bitmap);
bitmap.blendMode=LBlendMode.SOURCE_IN;
middleLayer=new LSprite();
backSprite=new LSprite();
addChild(backSprite);
backSprite.addChild(middleLayer);
//底图
var backBitmap=new LBitmap(backBitmapData);
backBitmap.x=78;
backBitmap.y=98;
backBitmap.scaleX=.5;
backBitmap.scaleY=.5;
backSprite.addChild(backBitmap);
//刮图
backSprite.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);
backSprite.addEventListener(LMouseEvent.MOUSE_MOVE,onmove);
backSprite.addEventListener(LMouseEvent.MOUSE_UP,onup);
//实时拷贝像素
backSprite.addEventListener(LEvent.ENTER_FRAME,onframe);
var outBitmap=new LBitmap(outBitmapData);
outBitmap.x=78;
outBitmap.y=98;
outBitmap.scaleX=.5;
outBitmap.scaleY=.5;
backSprite.addChild(outBitmap);
}
function ondown(event){
isStart=true;
paintbrushBitmapData.putPixels(new LRectangle(event.selfX-paintbrushSize*0.5,event.selfY-paintbrushSize*0.5,paintbrushSize,paintbrushSize),paintbrush);
}
function onmove(event) {
if (isStart) {
if (pointList.indexOf(Math.round(event.offsetX + "_" + Math.round(event.offsetY))) < 0) {
pointList.push(Math.round(event.offsetX) + "_" + Math.round(event.offsetY));
}
//之前的bitmap和paintbrushBitmapData重叠的部分会有效
if (lx == 0 && ly == 0) {
lx = event.offsetX;
ly = event.offsetY;
paintbrushBitmapData.putPixels(new LRectangle(event.selfX - paintbrushSize , event.selfY - paintbrushSize, paintbrushSize, paintbrushSize), paintbrush);
}
else {
//补充画笔
paintbrushBitmapData.putPixels(new LRectangle(lx + (event.selfX - lx) / 5 - paintbrushSize * 0.5, ly + (event.selfY - ly) / 5 - paintbrushSize * 0.5, paintbrushSize, paintbrushSize), paintbrush);
paintbrushBitmapData.putPixels(new LRectangle(lx + (event.selfX - lx) * 2 / 5 - paintbrushSize * 0.5, ly + (event.selfY - ly) * 2 / 5 - paintbrushSize * 0.5, paintbrushSize, paintbrushSize), paintbrush);
paintbrushBitmapData.putPixels(new LRectangle(lx + (event.selfX - lx) * 3 / 5 - paintbrushSize * 0.5, ly + (event.selfY - ly) * 3 / 5 - paintbrushSize * 0.5, paintbrushSize, paintbrushSize), paintbrush);
paintbrushBitmapData.putPixels(new LRectangle(event.selfX - paintbrushSize * 0.5, event.selfY - paintbrushSize * 0.5, paintbrushSize, paintbrushSize), paintbrush);
lx = event.offsetX * .5;
ly = event.offsetY * .5;
}
}
}
function onup(event){
isStart=false;
lx=0;ly=0;
//刮到一定坐标数可调整
if(pointList.length>=150)
{
var newBitmap=new LBitmap(new LBitmapData(imglist["B2"]));
newBitmap.x=78;
newBitmap.y=98;
newBitmap.scaleX=.5;
newBitmap.scaleY=.5;
newBitmap.alpha=0;//表示指定对象的 Alpha 透明度值。有效值为 0（完全透明）到 1（完全不透明）。默认值为 1。alpha 设置为 0 的显示对象是活动的，即使它们不可见。
backSprite.addChild(newBitmap);
LTweenLite.to(newBitmap,1,{alpha:1,ease:LEasing.Strong.easeInOut});
var restartLayer=new LSprite();
var shareLayer = new LSprite();
middleLayer.addChild(shareLayer);
var shareBtnBitmapData=new LBitmapData(imglist["share"]);
var shareBtn=new LBitmap(shareBtnBitmapData);
shareLayer.addChild(shareBtn);
shareBtn.x=160;
shareBtn.y=288;
shareBtn.scaleX=.5;
shareBtn.scaleY=.5;
shareLayer.addEventListener(LMouseEvent.MOUSE_DOWN,shareX);
var cancelBtnBitmapData=new LBitmapData(imglist["restart"]);
var cancelBtn=new LBitmap(cancelBtnBitmapData);
middleLayer.addChild(restartLayer);
restartLayer.addChild(cancelBtn);
cancelBtn.x=60;
cancelBtn.y=288;
cancelBtn.scaleX=.5;
cancelBtn.scaleY=.5;
restartLayer.addEventListener(LMouseEvent.MOUSE_DOWN,reStart);
}
}
function onframe(event){
outBitmapData.draw(paintbrushSprite);
}
function shareX(){
console.log("分享给微信好友!!!!!!!!");
document.getElementById("share").style.visibility="visible";
}
function reStart(){
console.log("重新抽奖!!!!!!!!!");
gameInit();
}
</script>
想点击“再来一次”重新抽奖时，结果总有如下错误：
lufylegend-1.9.3.simple.min.js:2174 Uncaught TypeError: Cannot read property 'objectIndex' of null
Index.html:174 Uncaught TypeError: Cannot read property 'B2' of undefined
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
手机端js和html5刮刮卡效果 H5的Canvas实现刮刮卡效果。 刮开之后是随机生成的8位码。 IE8不行… <!DOCTYPE html> ...html>...meta name=viewport content=...HTML5 刮刮卡</title> <link rel=stylesheet type=text/css href= />
微信刮刮乐；刮刮卡（含微信接口处理和html5刮刮卡效果,完整版可用于商业，方便再开发） 刮刮卡（含微信接口处理和html5刮刮卡效果,完整版可用于商业，方便再开发）经测试可用。 weixin.php 微信接口处理文件（包含了概率和跳转页面，返回值等操作） ggk文件夹 存放了一个html5的刮刮卡前端效果（经测试...
HTML5 canvas标签实现刮刮卡效果 今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。 源码下载：点击下载 我们利用HTML5的画布Canvas，结合其提供的API，在...
利用HTML5的画布Canvas实现刮刮卡效果 今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。 我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个...
HTML5+JS实现刮刮乐刮刮卡抽奖特效代码 非常不错的HTML5+JS实现刮刮乐刮刮卡抽奖特效代码，基于jQuery实现，支持响应式手机页面使用， 支持手机涂抹，如今在微营销中经常使用这种方式，用户体验非常的不错。
微信接口，刮刮卡（含微信接口处理和html5刮刮卡效果） 微信接口，刮刮卡（含微信接口处理和html5刮刮卡效果）经测试可用。 weixin.php 微信接口处理文件（包含了概率和跳转页面，返回值等操作） ggk文件夹 存放了一个html5的刮刮卡前端效果（经测试Android 和IOS均可用...
