当前位置：首页 > news >正文

有一个网站怎么做cpc网站推广平台搭建

news 2025/8/11 12:58:10

有一个网站怎么做cpc,网站推广平台搭建,网站建设公司logo,门户网站怎么创建前言微信推广小游戏是短平快的，那么刮刮乐也是很经常出现的。于是，这篇就写一写刮刮乐的逻辑。、参考资料用HTML5 Canvas 做擦除及扩散效果在线演示地址 runjs的演示地址运行截图恭喜您，最后获得了一个香蕉核心代码 <% pag…

前言

微信推广小游戏是短平快的，那么刮刮乐也是很经常出现的。于是，这篇就写一写刮刮乐的逻辑。、

参考资料

用HTML5 Canvas 做擦除及扩散效果

在线演示地址

runjs的演示地址

运行截图

这里写图片描述

恭喜您，最后获得了一个香蕉

核心代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta content="telephone=no,email=no" name="format-detection"><meta name="full-screen" content="true"/><meta name="screen-orientation" content="portrait"/><meta name="x5-fullscreen" content="true"/><meta name="360-fullscreen" content="true"/><script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script><script src="../js/box2dWeb/Box2dWeb-2.1.a.3.min.js"></script><script src="../js/lufylegend/lufylegend-1.10.0.min.js"></script><style>body{padding: 0;margin: 0;}</style></head>
<body><div id="game" style=""></div><script type="text/javascript">var GameSettings={prizeWidth:512 //奖品图片的宽度。,prizeHeight:512 //奖品图片的高度};var GameOptions={width:600,height:800};var GameData={gameOver:false};var innerTools={timeFormat:function(seconds){var _seconds=parseInt(seconds);var _s=_seconds%60;var _m=parseInt((_seconds-_s)/60)%60;var _str="";if(_m<=9){_str="0"+""+_m;}else{_str=""+_m;}if(_s<=9){_str=_str+":0"+_s;}else{_str=_str+":"+_s;}return _str;},browser: {versions: function () {var u = navigator.userAgent, app = navigator.appVersion;return {         //移动终端浏览器版本信息trident: u.indexOf('Trident') > -1, //IE内核presto: u.indexOf('Presto') > -1, //opera内核webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器iPad: u.indexOf('iPad') > -1, //是否iPadwebApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部};}(),language: (navigator.browserLanguage || navigator.language).toLowerCase()}};</script>
<script>//--这是需要加载的各种资源。var _resources=[];//--加载完成后得到的数据。，var resourceList={};function _addResource(name,path){_resources.push({name:name,path:path});}var LayerLoading={};//--初始化其他设置，设置屏幕等等。function resetSystem(){//--刚体系统设置LGlobal.box2d = new LBox2d();//--屏幕设置//LGlobal.align = LStageAlign.BOTTOM_MIDDLE;LGlobal.stageScale = LStageScaleMode.SHOW_ALL;//LGlobal.stageScale = LStageScaleMode.EXACT_FIT;LSystem.screen(LStage.FULL_SCREEN);
//    LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
//    LSystem.screen(LStage.FULL_SCREEN);}//--加载资源。function loadResources(callback){_addResource("apple","images/apple512.png");_addResource("apricot","images/apricot512.png");_addResource("banana","images/banana512.png");_addResource("cherry","images/cherry512.png");_addResource("kiwi","images/kiwi512.png");_addResource("lemon","images/lemon512.png");_addResource("mango","images/mango512.png");_addResource("orange","images/orange512.png");_addResource("peach","images/peach512.png");_addResource("pear","images/pear512.png");_addResource("strawberry","images/strawberry512.png");_addResource("tomato","images/tomato512.png");LayerLoading = new LoadingSample3();addChild(LayerLoading);//--这里开始要加载资源了。LLoadManage.load(_resources,function(progress){LayerLoading.setProgress(progress);},function(_resource_loaded_object){resourceList=_resource_loaded_object;removeChild(LayerLoading);if(callback){callback();}});}init(10,"game",GameOptions.width,GameOptions.height,function(){resetSystem();loadResources(function(){gameInit();});});
</script><script>//--游戏的初始化。function gameInit(){var _prize_random="";var random_arr=[];for(var key in prizeListMap){random_arr.push(key);}var _random_index=parseInt(parseInt(Math.random()*1000)%random_arr.length);_prize_random=random_arr[_random_index];console.log(_prize_random);ObjPrize=initLayerPrize(_prize_random);LayerPrize.visible=false;addChild(LayerPrize);ObjModal=initLayerModal(_prize_random);addChild(LayerModal);LayerPrize.visible=true;}
</script><script>//--游戏的唯一难点就是，如何处消掉遮罩层，显示出图片。这里有一篇文章，用原生的canvas及相关api的可以参考一下：http://www.linuxidc.com/Linux/2015-04/115766.htm//当然，在demo。jsp里面也将文章里面的方法实现一次。//下面是文章的摘要
//  方案一的可优化点最明显的就是循环
//  ，
//  其两大缺陷都是基于此的
//  。
//  因此方案二的主要思路放弃了clip方法
//  。
//  而是利用了canvas上下文的strokeStyle属性
//  ，
//  该属性是指在canvas中绘制矢量图形的时候矢量线的绘制样式
//  ，
//  其值可以为color(颜色值)
//  、
//  gradient(渐变对象)
//  、
//  pattern(pattern对象)
//  。
//  这个方案就是将方案一中的drawImg方式改为将canvas上下文的strokeStyle设置为图片
//  ，
//  然后在绘制的时候直接画线就可以了
//  ，
//  因为矢量线的背景就是需要展示的图片
//  ，
//  这样就实现了擦除的效果
//  。
//  HTML结构不变
//  ，
//  JS代码如下
//  ：//接下来就是用lufylegend来实现了。var prizeListMap={"apple":{msg:"恭喜你获得了苹果"},"apricot":{msg:"恭喜您获得了杏桃"},"banana":{msg:"恭喜您获得了一年份的香蕉，从此不怕用不完"},"cherry":{msg:"恭喜您获得了一份樱桃"},"kiwi":{msg:"恭喜您获得了奇异果"},"lemon":{msg:"恭喜您获得了一份柠檬"},"mango":{msg:"恭喜您获得了芒果"},"orange":{msg:"恭喜您获得了橙子"},"peach":{msg:"恭喜您获得了桃子"},"pear":{msg:"恭喜您获得了鸭梨"},"strawberry":{msg:"恭喜您获得了一份士多啤梨"},"tomato":{msg:"恭喜您获得一份土豆"}};var LayerModal=new LSprite();var LayerPrize=new LSprite();var ObjModal={};var ObjPrize={};function initLayerPrize(currentPrizeName){var _root_=new LSprite();var _bitmap_prize=new LBitmap(new LBitmapData(resourceList[currentPrizeName]));var _x=parseInt((GameOptions.width-GameSettings.prizeWidth)/2);var _y=parseInt((GameOptions.height-GameSettings.prizeHeight)/2);_bitmap_prize.x=_x;_bitmap_prize.y=_y;_root_.addChild(_bitmap_prize);LayerPrize=_root_;var robj={getRoot:function(){return _root_;}};return robj;}function initLayerModal(currentPrizeName){var _root_=new LSprite();//--设定高度和宽度以及位置以覆盖奖品层。var _x=parseInt((GameOptions.width-GameSettings.prizeWidth)/2);var _y=parseInt((GameOptions.height-GameSettings.prizeHeight)/2);_root_.x=_x;_root_.y=_y;_root_.width=GameSettings.prizeWidth;_root_.height=GameSettings.prizeHeight;//--设定stroke typevar strokePattern=LGlobal.canvasObj.getContext("2d").createPattern(resourceList[currentPrizeName],"no-repeat");_root_.graphics.strokeStyle(strokePattern);//_root_.graphics.lineCap("round");//_root_.graphics.lineJoin("round");_root_.graphics.lineWidth("25");//    var pat=ctx2.createPattern(img,"no-repeat");
//    ctx2.strokeStyle=pat;
//    ctx2.lineCap="round";
//    ctx2.lineJoin="round";
//    ctx2.lineWidth="25";var innerData={};//    ctx.fillStyle = 'gray';
//    ctx.fillRect(0, 0, w, h);//// _root_.graphics.drawRect(0,0,GameSettings.prizeWidth,,GameSettings.prizeHeight,)//绘制矩形涂抹层。_root_.graphics.drawRect(0,'#00000',[0,0,GameSettings.prizeWidth,GameSettings.prizeHeight],true,'#cccccc');//--添加事件--拖动。//--分成pc端的拖动及移动端的拖动。if(innerTools.browser.versions.mobile==true||innerTools.browser.versions.mobile==true||innerTools.browser.versions.android||innerTools.browser.versions.iPhone){_init_mobile_operations();}else{_init_pc_operations();//me._init_mobile_operations();}function _init_mobile_operations(){_root_.addEventListener(LMouseEvent.MOUSE_DOWN,function(event){console.log("mobile 要开始拖动了");_root_.graphics.beginPath();_root_.graphics.moveTo(event.selfX,event.selfY);//ctx2.moveTo(e.clientX,e.clientY);});_root_.addEventListener(LMouseEvent.MOUSE_MOVE,function(event){window.the_event=event;if(GameData.gameOver){return;}_draw_arc(event.selfX,event.selfY);console.log("mobile 拖动中。");});}function _init_pc_operations(){var __pc_data={inDrag:false};_root_.addEventListener(LMouseEvent.MOUSE_DOWN,function(event){__pc_data.inDrag=true;console.log("pc 要开始拖动了");_root_.graphics.beginPath();_root_.graphics.moveTo(event.selfX,event.selfY);//ctx2.moveTo(e.clientX,e.clientY);});_root_.addEventListener(LMouseEvent.MOUSE_UP,function(event){__pc_data.inDrag=false;console.log("pc结束拖动");});_root_.addEventListener(LMouseEvent.MOUSE_MOVE,function(event){window.the_event=event;if(GameData.gameOver){return;}if(__pc_data.inDrag==false){return;}_draw_arc(event.selfX,event.selfY);console.log("pc 拖动中。");});}//--这是拖动时候画出的点。。。function _draw_arc(x,y){//_root_.graphics.arc(x, y, 5, 0, Math.PI * 2);//shape.graphics.arc(100,75,50,0,2*Math.PI);//_root_.graphics.stroke();//_root_.graphics.drawArc(1, "#000000", [x, y, 20, 0, 2*Math.PI,false,true], true);
//      _root_.graphics.fillStyle='transparent';
//      _root_.graphics.beginPath();
//      _root_.graphics.arc(x, y, 10, 0, Math.PI * 2);
//      _root_.graphics.fill();_root_.graphics.lineTo(x,y);_root_.graphics.stroke();}LayerModal=_root_;var robj={};return robj;}</script>
</body>
</html>