Web笔记 · · By/蜜汁炒酸奶

Canvas初实现拍照小游戏

由于实现的比较简单,且在部分机型上会出现点小问题,此处仅作为js代码的记录,暂不打算写相关教程。 代码会在项目结束后公布。  
var ctx = null;// global variable 2d context
var frame = 0;
var imageReady = false;
var myImage = null;	//girl
var myImages =null; //背景
var myImage2 =null; //海鸥
var myImage3 =null; //倒计时
var myImage4 =null; //倒计时girl
var frames= 0;
var started = false;
var suijisum=Math.round(Math.random()*10);//随机数-定位情况
var suijisum2= 0;//随机数--定位海鸥
var suijisum3= 0;//随机数--frame

var sEnd=0;//一种情况是否完成,若完成开始下一种情况。0 没有 1 完成

var frame = 0; //图片

var score=0;//成绩
var isGod=0;//情况判断
//清空canvas画布
function clearCanvas(){
    if(typeof ctx != "undefined"){
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    }
}

//图片集合
var pic = [

         {
             id: "phone-0",
             src: "img/P6/phone-0.png?S"
         },
         {
             id: "phone-1",
             src: "img/P6/phone-1.png?S"
         },
 		 {
             id: "phone-2",
             src: "img/P6/phone-2.png?S"
         },
 		{
             id: "phone-3",
             src: "img/P6/phone-3.png?S"
         },
	     {
	    	 id: "phone-4",
	    	 src: "img/P6/phone-4.png?s"
	     },
         {
        	 id: "phone-5",
        	 src: "img/P6/phone-5.png?s"
         }
     ];
/*
 * 创建对象
 * 通过对象的getSrc获取图片地址。
 */

var Re={
		getSrc:function(name){
			var i =0;

			while(1){
			if(pic[i].id==name){
					return pic[i].src;
				}

				i++;

			}

		}
	};

/*
 * touchstart执行函数,截取拍照页面
 * */
function eventDown(){

	imageReady =false;
	//实现小图
//	clearCanvas();
//	ctx.translate(window.innerWidth/6,window.innerHeight/7);
//	ctx.scale(0.6, 0.6);
//	ctx.rotate(10*Math.PI/180);

	//加载背景
	preImage(myImages.src,function(){
		ctx.drawImage(myImages,0,0, window.innerWidth,window.innerHeight);
	});
	//加载海鸥图片
	if(suijisum2<11&&suijisum2>9){
		preImage(myImage2.src,function(){
			ctx.drawImage(myImage2,window.innerWidth/2+30,window.innerHeight/7,myImage2.width/2,myImage2.height/2);
		});
		$("#haioutext").show();
		$("#zouguang").hide();
		$("#wanmei").hide();
		$("#kanlian").hide();
		$("#shuaidao").hide();
		$("#zhunbei").hide();
		score = score*2;
	}else{
		$("#haioutext").hide();
		$("#zouguang").hide();
		$("#wanmei").hide();
		$("#kanlian").hide();
		$("#shuaidao").hide();
		$("#zhunbei").hide();

	}
	//加载gril图片
	myImage.src =Re.getSrc("phone-"+frame);
 	preImage(myImage.src,function(){
 		if(window.innerHeight<500){
   			if(frame==0){
	   			ctx.drawImage(myImage,window.innerWidth/3+26,window.innerHeight/6,myImage.width/3,myImage.height/3);
					if(9>=suijisum2){
						$("#zhunbei").show();
						$("#wanmei").hide();
						$("#kanlian").hide();
						$("#shuaidao").hide();
						$("#zouguang").hide();
					}
	   		}else if(frame==1){
	   			ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/6,myImage.width/3,myImage.height/3);
				if(9>=suijisum2){
	   				$("#wanmei").show();
		   			$("#kanlian").hide();
		   			$("#shuaidao").hide();
		   			$("#zouguang").hide();
		   			$("#zhunbei").hide();
	   			}
	   		}else if(frame==2){
	   			ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/6,myImage.width/3,myImage.height/3);
				if(9>=suijisum2){
	   				$("#kanlian").show();
		   			$("#wanmei").hide();
		   			$("#shuaidao").hide();
		   			$("#zouguang").hide();
		   			$("#zhunbei").hide();
	   			}
	   		}else if(frame==3){
	   			ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/3,myImage.width/3,myImage.height/3);
				if(9>=suijisum2){
	   				$("#shuaidao").show();
		   			$("#kanlian").hide();
		   			$("#wanmei").hide();
		   			$("#zouguang").hide();
		   			$("#zhunbei").hide();
	   			}
	   		}else if(frame==4){
	   			ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/6,myImage.width/3,myImage.height/3);
				if(9>=suijisum2){
	   				$("#zouguang").show();
		   			$("#kanlian").hide();
		   			$("#shuaidao").hide();
		   			$("#wanmei").hide();
		   			$("#zhunbei").hide();
	   			}
	   		}

   		}else{
   			if(frame==0){
   	   			ctx.drawImage(myImage,window.innerWidth/3+26,window.innerHeight/7,myImage.width/2,myImage.height/2);
					if(9>=suijisum2){
						$("#zhunbei").show();
						$("#wanmei").hide();
						$("#kanlian").hide();
						$("#shuaidao").hide();
						$("#zouguang").hide();
					}
   	   		}else if(frame==1){
   	   			ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/7,myImage.width/2,myImage.height/2);
				if(9>=suijisum2){
	   				$("#wanmei").show();
		   			$("#kanlian").hide();
		   			$("#shuaidao").hide();
		   			$("#zouguang").hide();
		   			$("#zhunbei").hide();
	   			}
   	   		}else if(frame==2){
   	   			ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/7,myImage.width/2,myImage.height/2);
				if(9>=suijisum2){
	   				$("#kanlian").show();
		   			$("#wanmei").hide();
		   			$("#shuaidao").hide();
		   			$("#zouguang").hide();
		   			$("#zhunbei").hide();
	   			}
   	   		}else if(frame==3){
   	   			ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/3,myImage.width/2,myImage.height/2);
				if(9>=suijisum2){
	   				$("#shuaidao").show();
		   			$("#kanlian").hide();
		   			$("#wanmei").hide();
		   			$("#zouguang").hide();
		   			$("#zhunbei").hide();
	   			}
   	   		}else if(frame==4){
   	   			ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/7,myImage.width/2,myImage.height/2);
				if(9>=suijisum2){
	   				$("#zouguang").show();
		   			$("#kanlian").hide();
		   			$("#shuaidao").hide();
		   			$("#wanmei").hide();
		   			$("#zhunbei").hide();
	   			}
   	   		}
   		}

		//ctx.save();
		//ctx.restore();
	//	ctx.rect(10,10,100,120);
	//	ctx.clip();
	//	ctx.save();

	//	ctx.scale(0.5,0.5);
	//	ctx.rotate(20*Math.PI/180);
	//	clearCanvas();
	//	 ctx.drawImage(myImage,150,150,1000,1009,0,0,100,100);

    });
 		//添加白框,绘制照片效果
 	/**/setTimeout(function(){
 		//添加阴影
 		ctx.shadowColor="black";
		ctx.shadowOffsetX = 0;
		ctx.shadowOffsetY = 0;
		ctx.shadowBlur = 2;
 		//var newImgData=ctx.createImageData(canvas.width,canvas.height);
		var imgData=ctx.getImageData(window.innerWidth/6,window.innerHeight/7,window.innerWidth-63,window.innerHeight-202);//复制图层
		clearCanvas();//清除画布
		//绘制白框
		ctx.strokeStyle="#ffffff";
		ctx.lineWidth="10";
		ctx.rect(35,45,window.innerWidth-53,window.innerHeight-192);
		ctx.stroke();
		ctx.clip();


		ctx.putImageData(imgData,40,50);//拷贝imData图层

 	},200);



 	imageReady =false;
 	//更新得分
	if($("#zuigaofen").html()<score){
		$("#zuigaofen").html(score);
		$("#me_paizuigao").html(score);
		updateZqlMember_points_game();

	}
	getResultGame();//执行特殊分享
	//显示游戏结束的得分界面
	$("#scoresums").html(score);
	$("#photo").hide();
	$("#photo_paihang").hide();
	$("#zuigaofen").hide();
	imageReady =false;
	if(score<10){
		$("#scoresums").css("left","12%");
	}else if(score<99){
		$("#scoresums").css("left","7%");
	}else{
		$("#scoresums").css("left","3%");
	}
	$("#zhongqing_o4").show();
	imageReady =false;


}
/*
 * touchend执行函数
 * */
function eventUp(){
	     canvas.removeEventListener('touchstart', eventDown);
     canvas.removeEventListener('touchend', eventUp);


}
/*
 * 图片循环出现,并根据不同情况计算分数
 * */
function update() {


	    if(imageReady){
	    	if(frames==0){
	    		frames=1;
	    	}else if(frames==1){
	    		frames=0;
	    	}
	    	/*
	    	 * 0-1-0 正常
	    	 * 0-2-0 挡脸
	    	 * 0-1-3 摔倒
	    	 * 0-4-0 禁
	    	 * */
	    	if(sEnd==1){
	    		suijisum =Math.round(Math.random()*10);

	    	}
	    	suijisum2 =Math.round(Math.random()*10);
	    	if(2>suijisum){
	    		//站立
	    		 clearCanvas();
	    		frame=0;
	    		score =0;
	    		drawPicture();

	    	}else if((4>suijisum&&suijisum>=2)){
	    		//1正常
	    		 clearCanvas();

    			frame=1;
    			score =50;
	    		drawPicture();

	    	}else if(6>suijisum&&suijisum>=4){
	    		//2遮脸
	    		clearCanvas();
    			frame=2;
    			score =40;
	    		drawPicture();
	    	}else if(8>suijisum&&suijisum>=6){
	    		//3 摔倒
	    		clearCanvas();
    			frame=3;
    			score =20;
	    		drawPicture();
	    	}else if(10>=suijisum&&suijisum>=8){
	    		//4禁
	    		clearCanvas();
    			frame=4;
    			score =30;
	    		drawPicture();
	    	}


	    }


	}
/* 绘制girl图片
 *frame为图片名称中的数字
 *sEnd 判定一种情况是否结束以便执行下一种,0未结束,1结束
 *
 * */

function drawPicture(){
    if(typeof ctx != "undefined"){
    	myImage = document.createElement('img');
    	myImages = document.createElement('img');
    	myImage2 = document.createElement('img');
    	myImages.src ="img/P5/bg.png?S";
    	myImage2.src="img/P6/phone-5.png";

    	myImage.src =Re.getSrc("phone-"+frames);
    	if(imageReady){
    		/*
    		 * 图片展示
    		 * */
    	   	preImage(myImage.src,function(){
    	   		if(suijisum2<11&&suijisum2>9){
    	    		ctx.drawImage(myImage2,window.innerWidth/2+26,window.innerHeight/7,myImage2.width/2,myImage2.height/2);
    	    	}
    	   		if(window.innerHeight<500){
    	   			if(frames==0){
        	   			ctx.drawImage(myImage,window.innerWidth/3+20,window.innerHeight/6,myImage.width/3,myImage.height/3);
        	   		}else if(frames==1){
        	   			ctx.drawImage(myImage,window.innerWidth/5+20,window.innerHeight/6,myImage.width/3,myImage.height/3);
        	   		}

    	   		}else{
    	   			if(frames==0){
    	   	   			ctx.drawImage(myImage,window.innerWidth/3+20,window.innerHeight/7,myImage.width/2,myImage.height/2);
    	   	   		}else if(frames==1){
    	   	   			ctx.drawImage(myImage,window.innerWidth/5+20,window.innerHeight/7,myImage.width/2,myImage.height/2);
    	   	   		}
    	   		}


    	    });
    	   	/*
	    	 * 0-1-0 正常
	    	 * 0-2-0 挡脸
	    	 * 0-1-3 摔倒
	    	 * 0-4-0 禁
	    	 * */
    	   	if(2>suijisum){
	    		//站立
	    		frame=0;
	    		score =0;

	    	}else if((4>suijisum&&suijisum>=2)){
	    		//1正常

    			frame=1;
    			score =50;

	    	}else if(6>suijisum&&suijisum>=4){
	    		//2遮脸
    			frame=2;
    			score =40;
	    	}else if(8>suijisum&&suijisum>=6){
	    		//3 摔倒
    			frame=3;
    			score =20;
	    	}else if(10>=suijisum&&suijisum>=8){
	    		//4禁
    			frame=4;
    			score =30;
	    	}

    	}


    	/*循环
    	 * sEnd=0 情况未变
    	 * sEnd=1 情况改变
    	 * */
    	setTimeout(function(){
			setTimeout( update, 1000/30);
     },500);
   /* 	if(sEnd==1){

    		setTimeout(function(){
    				frame=0;
        			setTimeout( update, 1000/30);
             },700);
    	}else{
    		);
    	}*/

    	 //点击事件-拍照
    	 canvas.addEventListener('touchstart', eventDown);
         canvas.addEventListener('touchend', eventUp);

    }

}
/*倒计时,并开始游戏
 * isnum2计数 3 2 1
 *
 * */
var isnum2 = 3;
function playgo(){

	myImage3 = document.createElement('img');
	myImage4 = document.createElement('img');

	myImage4.src="img/P6/phone-0.png";


		if(isnum2==3){
			clearCanvas();
			myImage3.src="img/P4/"+isnum2+".png";
			preImage(myImage4.src,function(){
					 if(window.innerHeight<500){
							ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/6,myImage4.width/3,myImage4.height/3);
						}else{
							ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/7,myImage4.width/2,myImage4.height/2);
						}
			 });
			preImage(myImage3.src,function(){
			 ctx.drawImage(myImage3, window.innerWidth/5+30,window.innerHeight/4);
				 });
			 isnum2 =2;
			 setTimeout(function(){

				 playgo();

			 },600);
		}else if(isnum2==2){
			clearCanvas();
			myImage3.src="img/P4/"+isnum2+".png";
			preImage(myImage4.src,function(){
					 if(window.innerHeight<500){
							ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/6,myImage4.width/3,myImage4.height/3);
						}else{
							ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/7,myImage4.width/2,myImage4.height/2);
						}
			 });
			preImage(myImage3.src,function(){
				ctx.drawImage(myImage3, window.innerWidth/5+30,window.innerHeight/4);
			 });
			isnum2 =1;
			 setTimeout(function(){

				 playgo();

			 },600);
		}else if(isnum2==1){
			clearCanvas();
			myImage3.src="img/P4/"+isnum2+".png";
			 preImage(myImage4.src,function(){
					 if(window.innerHeight<500){
							ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/6,myImage4.width/3,myImage4.height/3);
						}else{
							ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/7,myImage4.width/2,myImage4.height/2);
						}
			 });
			preImage(myImage3.src,function(){
				ctx.drawImage(myImage3, window.innerWidth/5+30,window.innerHeight/4);
			});
			isnum2 =0;
			 setTimeout(function(){
				//开始游戏


				 setTimeout(function(){

					 clearCanvas();
					 frames=1;
					 drawPicture();
				 },300);
			 },700);
		}

}
function star_game() {
	imageReady = true;
    score =0;
    frame = 0;
    frames = 0;
    isnum2 = 3;
   suijisum=Math.round(Math.random()*10);
   suijisum3 = Math.round(Math.random()*10);
    suijisum2= Math.round(Math.random()*10);
	canvas = document.getElementById("canvas");

	 canvas.width = window.innerWidth;// window.innerWidth;
     canvas.height = window.innerHeight;//window.innerHeight;
     $("#canvas").css("width",window.innerWidth);
     $("#canvas").css("height",window.innerHeight);
	 $("#canvas").css("left","0%");
	 $("#canvas").css("top","0%");

     ctx =canvas.getContext("2d");
     //取消拍照点击事件
     canvas.removeEventListener('touchstart', eventDown);
     canvas.removeEventListener('touchend', eventUp);
     //倒计时
     clearCanvas();
     playgo();



}
//图片预加载
function preImage(url,callback){
    var img = new Image(); //创建一个Image对象,实现图片的预下载
    img.src = url;



    	 img.onload = function () { //图片下载完毕时异步调用callback函数。

    	        callback.call(img);//将回调函数的this替换为Image对象
    	     //   alert(img.src);
    	    };


}
   

评论已关闭

example
C
蜜汁炒酸奶

当前处于试运行期间,可能存在不稳定情况,敬请见谅。

欢迎点击此处反馈访问过程中出现的问题