Canvas初实现拍照小游戏

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

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

17
var frame = 0; //图片
18

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

28
//图片集合
29
var pic = [
30

31
         {
32
             id: "phone-0",
33
             src: "img/P6/phone-0.png?S"
34
         },
35
         {
36
             id: "phone-1",
37
             src: "img/P6/phone-1.png?S"
38
         },
39
      {
40
             id: "phone-2",
41
             src: "img/P6/phone-2.png?S"
42
         },
43
     {
44
             id: "phone-3",
45
             src: "img/P6/phone-3.png?S"
46
         },
47
       {
48
         id: "phone-4",
49
         src: "img/P6/phone-4.png?s"
50
       },
51
         {
52
           id: "phone-5",
53
           src: "img/P6/phone-5.png?s"
54
         }
55
     ];
56
/*
57
 * 创建对象
58
 * 通过对象的getSrc获取图片地址。
59
 */
60

61
var Re={
62
    getSrc:function(name){
63
      var i =0;
64

65
      while(1){
66
      if(pic[i].id==name){
67
          return pic[i].src;
68
        }
69

70
        i++;
71

72
      }
73

74
    }
75
  };
76

77
/*
78
 * touchstart执行函数，截取拍照页面
79
 * */
80
function eventDown(){
81

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

89
  //加载背景
90
  preImage(myImages.src,function(){
91
    ctx.drawImage(myImages,0,0, window.innerWidth,window.innerHeight);
92
  });
93
  //加载海鸥图片
94
  if(suijisum2<11&&suijisum2>9){
95
    preImage(myImage2.src,function(){
96
      ctx.drawImage(myImage2,window.innerWidth/2+30,window.innerHeight/7,myImage2.width/2,myImage2.height/2);
97
    });
98
    $("#haioutext").show();
99
    $("#zouguang").hide();
100
    $("#wanmei").hide();
101
    $("#kanlian").hide();
102
    $("#shuaidao").hide();
103
    $("#zhunbei").hide();
104
    score = score*2;
105
  }else{
106
    $("#haioutext").hide();
107
    $("#zouguang").hide();
108
    $("#wanmei").hide();
109
    $("#kanlian").hide();
110
    $("#shuaidao").hide();
111
    $("#zhunbei").hide();
112

113
  }
114
  //加载gril图片
115
  myImage.src =Re.getSrc("phone-"+frame);
116
   preImage(myImage.src,function(){
117
     if(window.innerHeight<500){
118
         if(frame==0){
119
           ctx.drawImage(myImage,window.innerWidth/3+26,window.innerHeight/6,myImage.width/3,myImage.height/3);
120
          if(9>=suijisum2){
121
            $("#zhunbei").show();
122
            $("#wanmei").hide();
123
            $("#kanlian").hide();
124
            $("#shuaidao").hide();
125
            $("#zouguang").hide();
126
          }
127
         }else if(frame==1){
128
           ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/6,myImage.width/3,myImage.height/3);
129
        if(9>=suijisum2){
130
             $("#wanmei").show();
131
             $("#kanlian").hide();
132
             $("#shuaidao").hide();
133
             $("#zouguang").hide();
134
             $("#zhunbei").hide();
135
           }
136
         }else if(frame==2){
137
           ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/6,myImage.width/3,myImage.height/3);
138
        if(9>=suijisum2){
139
             $("#kanlian").show();
140
             $("#wanmei").hide();
141
             $("#shuaidao").hide();
142
             $("#zouguang").hide();
143
             $("#zhunbei").hide();
144
           }
145
         }else if(frame==3){
146
           ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/3,myImage.width/3,myImage.height/3);
147
        if(9>=suijisum2){
148
             $("#shuaidao").show();
149
             $("#kanlian").hide();
150
             $("#wanmei").hide();
151
             $("#zouguang").hide();
152
             $("#zhunbei").hide();
153
           }
154
         }else if(frame==4){
155
           ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/6,myImage.width/3,myImage.height/3);
156
        if(9>=suijisum2){
157
             $("#zouguang").show();
158
             $("#kanlian").hide();
159
             $("#shuaidao").hide();
160
             $("#wanmei").hide();
161
             $("#zhunbei").hide();
162
           }
163
         }
164

165
       }else{
166
         if(frame==0){
167
              ctx.drawImage(myImage,window.innerWidth/3+26,window.innerHeight/7,myImage.width/2,myImage.height/2);
168
          if(9>=suijisum2){
169
            $("#zhunbei").show();
170
            $("#wanmei").hide();
171
            $("#kanlian").hide();
172
            $("#shuaidao").hide();
173
            $("#zouguang").hide();
174
          }
175
            }else if(frame==1){
176
              ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/7,myImage.width/2,myImage.height/2);
177
        if(9>=suijisum2){
178
             $("#wanmei").show();
179
             $("#kanlian").hide();
180
             $("#shuaidao").hide();
181
             $("#zouguang").hide();
182
             $("#zhunbei").hide();
183
           }
184
            }else if(frame==2){
185
              ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/7,myImage.width/2,myImage.height/2);
186
        if(9>=suijisum2){
187
             $("#kanlian").show();
188
             $("#wanmei").hide();
189
             $("#shuaidao").hide();
190
             $("#zouguang").hide();
191
             $("#zhunbei").hide();
192
           }
193
            }else if(frame==3){
194
              ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/3,myImage.width/2,myImage.height/2);
195
        if(9>=suijisum2){
196
             $("#shuaidao").show();
197
             $("#kanlian").hide();
198
             $("#wanmei").hide();
199
             $("#zouguang").hide();
200
             $("#zhunbei").hide();
201
           }
202
            }else if(frame==4){
203
              ctx.drawImage(myImage,window.innerWidth/5+26,window.innerHeight/7,myImage.width/2,myImage.height/2);
204
        if(9>=suijisum2){
205
             $("#zouguang").show();
206
             $("#kanlian").hide();
207
             $("#shuaidao").hide();
208
             $("#wanmei").hide();
209
             $("#zhunbei").hide();
210
           }
211
            }
212
       }
213

214
    //ctx.save();
215
    //ctx.restore();
216
  //  ctx.rect(10,10,100,120);
217
  //  ctx.clip();
218
  //  ctx.save();
219

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

225
    });
226
     //添加白框，绘制照片效果
227
   /**/setTimeout(function(){
228
     //添加阴影
229
     ctx.shadowColor="black";
230
    ctx.shadowOffsetX = 0;
231
    ctx.shadowOffsetY = 0;
232
    ctx.shadowBlur = 2;
233
     //var newImgData=ctx.createImageData(canvas.width,canvas.height);
234
    var imgData=ctx.getImageData(window.innerWidth/6,window.innerHeight/7,window.innerWidth-63,window.innerHeight-202);//复制图层
235
    clearCanvas();//清除画布
236
    //绘制白框
237
    ctx.strokeStyle="#ffffff";
238
    ctx.lineWidth="10";
239
    ctx.rect(35,45,window.innerWidth-53,window.innerHeight-192);
240
    ctx.stroke();
241
    ctx.clip();
242

243

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

246
   },200);
247

248

249

250
   imageReady =false;
251
   //更新得分
252
  if($("#zuigaofen").html()<score){
253
    $("#zuigaofen").html(score);
254
    $("#me_paizuigao").html(score);
255
    updateZqlMember_points_game();
256

257
  }
258
  getResultGame();//执行特殊分享
259
  //显示游戏结束的得分界面
260
  $("#scoresums").html(score);
261
  $("#photo").hide();
262
  $("#photo_paihang").hide();
263
  $("#zuigaofen").hide();
264
  imageReady =false;
265
  if(score<10){
266
    $("#scoresums").css("left","12%");
267
  }else if(score<99){
268
    $("#scoresums").css("left","7%");
269
  }else{
270
    $("#scoresums").css("left","3%");
271
  }
272
  $("#zhongqing_o4").show();
273
  imageReady =false;
274

275

276
}
277
/*
278
 * touchend执行函数
279
 * */
280
function eventUp(){
281
       canvas.removeEventListener('touchstart', eventDown);
282
     canvas.removeEventListener('touchend', eventUp);
283

284

285
}
286
/*
287
 * 图片循环出现，并根据不同情况计算分数
288
 * */
289
function update() {
290

291

292
      if(imageReady){
293
        if(frames==0){
294
          frames=1;
295
        }else if(frames==1){
296
          frames=0;
297
        }
298
        /*
299
         * 0-1-0 正常
300
         * 0-2-0 挡脸
301
         * 0-1-3 摔倒
302
         * 0-4-0 禁
303
         * */
304
        if(sEnd==1){
305
          suijisum =Math.round(Math.random()*10);
306

307
        }
308
        suijisum2 =Math.round(Math.random()*10);
309
        if(2>suijisum){
310
          //站立
311
           clearCanvas();
312
          frame=0;
313
          score =0;
314
          drawPicture();
315

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

320
          frame=1;
321
          score =50;
322
          drawPicture();
323

324
        }else if(6>suijisum&&suijisum>=4){
325
          //2遮脸
326
          clearCanvas();
327
          frame=2;
328
          score =40;
329
          drawPicture();
330
        }else if(8>suijisum&&suijisum>=6){
331
          //3 摔倒
332
          clearCanvas();
333
          frame=3;
334
          score =20;
335
          drawPicture();
336
        }else if(10>=suijisum&&suijisum>=8){
337
          //4禁
338
          clearCanvas();
339
          frame=4;
340
          score =30;
341
          drawPicture();
342
        }
343

344

345
      }
346

347

348
  }
349
/* 绘制girl图片
350
 *frame为图片名称中的数字
351
 *sEnd 判定一种情况是否结束以便执行下一种，0未结束，1结束
352
 *
353
 * */
354

355
function drawPicture(){
356
    if(typeof ctx != "undefined"){
357
      myImage = document.createElement('img');
358
      myImages = document.createElement('img');
359
      myImage2 = document.createElement('img');
360
      myImages.src ="img/P5/bg.png?S";
361
      myImage2.src="https://windcoder.com/img/P6/phone-5.png";
362

363
      myImage.src =Re.getSrc("phone-"+frames);
364
      if(imageReady){
365
        /*
366
         * 图片展示
367
         * */
368
           preImage(myImage.src,function(){
369
             if(suijisum2<11&&suijisum2>9){
370
              ctx.drawImage(myImage2,window.innerWidth/2+26,window.innerHeight/7,myImage2.width/2,myImage2.height/2);
371
            }
372
             if(window.innerHeight<500){
373
               if(frames==0){
374
                   ctx.drawImage(myImage,window.innerWidth/3+20,window.innerHeight/6,myImage.width/3,myImage.height/3);
375
                 }else if(frames==1){
376
                   ctx.drawImage(myImage,window.innerWidth/5+20,window.innerHeight/6,myImage.width/3,myImage.height/3);
377
                 }
378

379
             }else{
380
               if(frames==0){
381
                    ctx.drawImage(myImage,window.innerWidth/3+20,window.innerHeight/7,myImage.width/2,myImage.height/2);
382
                  }else if(frames==1){
383
                    ctx.drawImage(myImage,window.innerWidth/5+20,window.innerHeight/7,myImage.width/2,myImage.height/2);
384
                  }
385
             }
386

387

388
          });
389
           /*
390
         * 0-1-0 正常
391
         * 0-2-0 挡脸
392
         * 0-1-3 摔倒
393
         * 0-4-0 禁
394
         * */
395
           if(2>suijisum){
396
          //站立
397
          frame=0;
398
          score =0;
399

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

403
          frame=1;
404
          score =50;
405

406
        }else if(6>suijisum&&suijisum>=4){
407
          //2遮脸
408
          frame=2;
409
          score =40;
410
        }else if(8>suijisum&&suijisum>=6){
411
          //3 摔倒
412
          frame=3;
413
          score =20;
414
        }else if(10>=suijisum&&suijisum>=8){
415
          //4禁
416
          frame=4;
417
          score =30;
418
        }
419

420
      }
421

422

423
      /*循环
424
       * sEnd=0 情况未变
425
       * sEnd=1 情况改变
426
       * */
427
      setTimeout(function(){
428
      setTimeout( update, 1000/30);
429
     },500);
430
   /*   if(sEnd==1){
431

432
        setTimeout(function(){
433
            frame=0;
434
              setTimeout( update, 1000/30);
435
             },700);
436
      }else{
437
        );
438
      }*/
439

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

444
    }
445

446
}
447
/*倒计时，并开始游戏
448
 * isnum2计数 3 2 1
449
 *
450
 * */
451
var isnum2 = 3;
452
function playgo(){
453

454
  myImage3 = document.createElement('img');
455
  myImage4 = document.createElement('img');
456

457
  myImage4.src="https://windcoder.com/img/P6/phone-0.png";
458

459

460
    if(isnum2==3){
461
      clearCanvas();
462
      myImage3.src="https://windcoder.com/img/P4/"+isnum2+".png";
463
      preImage(myImage4.src,function(){
464
           if(window.innerHeight<500){
465
              ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/6,myImage4.width/3,myImage4.height/3);
466
            }else{
467
              ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/7,myImage4.width/2,myImage4.height/2);
468
            }
469
       });
470
      preImage(myImage3.src,function(){
471
       ctx.drawImage(myImage3, window.innerWidth/5+30,window.innerHeight/4);
472
         });
473
       isnum2 =2;
474
       setTimeout(function(){
475

476
         playgo();
477

478
       },600);
479
    }else if(isnum2==2){
480
      clearCanvas();
481
      myImage3.src="https://windcoder.com/img/P4/"+isnum2+".png";
482
      preImage(myImage4.src,function(){
483
           if(window.innerHeight<500){
484
              ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/6,myImage4.width/3,myImage4.height/3);
485
            }else{
486
              ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/7,myImage4.width/2,myImage4.height/2);
487
            }
488
       });
489
      preImage(myImage3.src,function(){
490
        ctx.drawImage(myImage3, window.innerWidth/5+30,window.innerHeight/4);
491
       });
492
      isnum2 =1;
493
       setTimeout(function(){
494

495
         playgo();
496

497
       },600);
498
    }else if(isnum2==1){
499
      clearCanvas();
500
      myImage3.src="https://windcoder.com/img/P4/"+isnum2+".png";
501
       preImage(myImage4.src,function(){
502
           if(window.innerHeight<500){
503
              ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/6,myImage4.width/3,myImage4.height/3);
504
            }else{
505
              ctx.drawImage(myImage4,window.innerWidth/3+20,window.innerHeight/7,myImage4.width/2,myImage4.height/2);
506
            }
507
       });
508
      preImage(myImage3.src,function(){
509
        ctx.drawImage(myImage3, window.innerWidth/5+30,window.innerHeight/4);
510
      });
511
      isnum2 =0;
512
       setTimeout(function(){
513
        //开始游戏
514

515

516
         setTimeout(function(){
517

518
           clearCanvas();
519
           frames=1;
520
           drawPicture();
521
         },300);
522
       },700);
523
    }
524

525
}
526
function star_game() {
527
  imageReady = true;
528
    score =0;
529
    frame = 0;
530
    frames = 0;
531
    isnum2 = 3;
532
   suijisum=Math.round(Math.random()*10);
533
   suijisum3 = Math.round(Math.random()*10);
534
    suijisum2= Math.round(Math.random()*10);
535
  canvas = document.getElementById("canvas");
536

537
   canvas.width = window.innerWidth;// window.innerWidth;
538
     canvas.height = window.innerHeight;//window.innerHeight;
539
     $("#canvas").css("width",window.innerWidth);
540
     $("#canvas").css("height",window.innerHeight);
541
   $("#canvas").css("left","0%");
542
   $("#canvas").css("top","0%");
543

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

552

553

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

560

561

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

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

568

569
}
Canvas初实现拍照小游戏

支持一下

评论
