利用H5实现Canvas益智类填色画游戏



16 62 21



特效描述:利用H5实现 Canvas 益智类 填色画游戏,利用H5实现Canvas益智类填色画游戏

代码结构

1. 引入JS

<script src="HGame.js"></script>
<script src="data.js" ></script>

2. HTML代码

<div id="boxRender">
<div id="nowSelectColor">
</div>
<div id="colorSelect" class="colorSelect">
</div>
</div>
<div class="imgShowRow">
<div onClick="changeDraw(0)" style=" background-image: url(exp/A.png);" class="item">
	<div class="toolBox">汽车</div>
</div>
<div onClick="changeDraw(1)" style=" background-image: url(exp/B.png);" class="item">
	<div class="toolBox">蘑菇</div>
</div>
<div onClick="changeDraw(2)" style=" background-image: url(exp/C.png);" class="item">
	<div class="toolBox">飞机</div>
</div>
<div onClick="changeDraw(3)" style=" background-image: url(exp/D.png);" class="item">
	<div class="toolBox">气球</div>
</div>
<div onClick="changeDraw(4)" style=" background-image: url(exp/E.png);" class="item">
	<div class="toolBox">小鸭</div>
</div>
<div onClick="changeDraw(5)" style=" background-image: url(exp/F.png);" class="item">
	<div class="toolBox">皮球</div>
</div>
</div>
<script type="text/javascript">
var canvas = new HGAME.canvas();
var testBox=document.getElementById('boxRender');
testBox.appendChild(canvas.dom);
var animate=new HGAME.animate({
	action:function(){
		canvas.render();
	}
});
var colorObj={
	r:0,
	g:0,
	b:0
};
function initColor(){
	var div=null;
	var initColor=document.getElementById("colorSelect");
	for(var r=0;r<255;r+=65){
		for(var b=0;b<255;b+=65){
				for(var g=0;g<255;g+=65){
				div=document.createElement("div");
				div.setAttribute("class","item");
					div.setAttribute("data-r",r);
					div.setAttribute("data-g",g);
					div.setAttribute("data-b",b);
				div.style.backgroundColor="rgba("+r+","+g+","+b+","+"1)";
				initColor.appendChild(div);
				div.onclick=function(){
					document.getElementById("nowSelectColor").style.backgroundColor="rgba("+this.getAttribute("data-r")+","+this.getAttribute("data-g")+","+this.getAttribute("data-b")+","+"1)";
					colorObj.r=this.getAttribute("data-r");
					colorObj.g=this.getAttribute("data-g");
					colorObj.b=this.getAttribute("data-b");
				}
			}
		}
	}
}
initColor();
/*创建img数据*/
function changeImgColor(img,r,g,b){
	var c=document.createElement("canvas");
	var txt= c.getContext("2d");
	c.width=img.width;
	c.height=img.height;
	txt.drawImage(img,0,0);
	var data=txt.getImageData(0,0, c.width, c.height);
	for(var q=0;q<data.data.length;q+=4){
		if(data.data[q+3]>100){
			data.data[q]=r;
			data.data[q+1]=g;
			data.data[q+2]=b;
		}
	}
	txt.putImageData(data,0,0);
	return c;
}
var div=document.createElement("div");
function changeDraw(num){
	/*加载数据*/
	var source=new HGAME.source({
		loadCall:function(num,allNum){
			div.innerHTML="加载资源"+num+"/"+allNum;
			div.setAttribute("class","tool");
			testBox.appendChild(div);
		},
		loaded:function(){
			testBox.removeChild(div);
			var img=new HGAME.Object2D({
				img:this.data[0],
				w:500,
				h:500,
				x:0,
				y:0
			});
			canvas.child=new Array();
			canvas.add(img);
			var THIS = this;
			img.child=new Array();
			each(this.data,function(intX){
				if(intX>=1){
					img.add(new HGAME.Object2D({
						x:whxyInfo[num][intX-1].x,
						y:whxyInfo[num][intX-1].y,
						w:whxyInfo[num][intX-1].w,
						h:whxyInfo[num][intX-1].h,
						img:THIS.data[intX],
						isClick:true,
						clickFun:function(){
							if(typeof this.bufferImg=="undefined"){
								this.bufferImg=this.img;
								this.img=changeImgColor(this.bufferImg,colorObj.r,colorObj.g,colorObj.b);
							}else{
								this.img=changeImgColor(this.bufferImg,colorObj.r,colorObj.g,colorObj.b);
							}
						}
					}));
				}
			});
			animate.stop();
			animate.run();
		},
		data:data[num]
	});
}
changeDraw(0);
//
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 小游戏 H5游戏 游戏源码 手机游戏 微信游戏 网页游戏 图片切换 图片选项卡 图标选项卡 其他游戏 其他h5游戏 其他h5源码游戏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到