html5的刮刮卡

爱有范 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
...全文
191 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧