html5的刮刮卡

爱有范 H5前端工程师  2015-07-21 10:58:28
<!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
...全文
138 点赞 收藏 回复
写回复
回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2015-07-21 10:58
社区公告
暂无公告