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);
};
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-06-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读