分享一个HTML5实现的拼脸游戏

最新推荐文章于 2023-07-10 15:48:40 发布

Cheris2014

最新推荐文章于 2023-07-10 15:48:40 发布

阅读量560

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/u013681996/article/details/40893423

版权

HTML5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

分享一款使用HTML5的Canvas实现的拼脸游戏，你可以自己选择设定，眉毛，鼻子，嘴，并且能够输出为图片。这篇教程将帮助你快速了解如何使用Canvas API。

使用方式：请使用键盘方向键上下选择脸部**，左右选择**的不同类型。

Step 1. HTML
<!DOCTYPE html>
<html lang="en" >
<head>
      <meta charset="utf-8" />
      <title>HTML5 Face Builder | Script Tutorials</title>

      <link href="css/main.css" rel="sty**heet" type="text/css" />
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
      <header>
         <h2>HTML5 image crop tool</h2>
         <a href="http://www.script-tutorials.com/html5-face-builder/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
      </header>
      <div class="container">
         <canvas id="scene" width="500" height="500"></canvas>
         <div id="results">
            <h2>Use arrow keys to select your face details (up-down to select category, left-right to switch them), then click Spacebar to export as image.</h2>
            <img id="face_result" />
         </div>
      </div>
</body>
</html> Step 2. HTML5 JS// inner variab**
var canvas, ctx;
var oHead, oEye, oNose, oMouth;
var iSel = 0;
// -------------------------------------------------------------

// objects :
function Head(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.iSpr = 0;
}
function Eye(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.iSpr = 0;
}
function Nose(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.iSpr = 0;
}
function Mouth(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.iSpr = 0;
}
// -------------------------------------------------------------

// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
clear(); // clear canvas

// draw head
ctx.drawImage(oHead.image, oHead.x2 + oHead.iSpr*oHead.w, oHead.y2, oHead.w, oHead.h, oHead.x, oHead.y, oHead.w, oHead.h);

// draw eyes
ctx.drawImage(oEye.image, oEye.x2 + oEye.iSpr*oEye.w, oEye.y2, oEye.w, oEye.h, oEye.x, oEye.y, oEye.w, oEye.h);

// draw nose
ctx.drawImage(oNose.image, oNose.x2 + oNose.iSpr*oNose.w, oNose.y2, oNose.w, oNose.h, oNose.x, oNose.y, oNose.w, oNose.h);

// draw mouth
ctx.drawImage(oMouth.image, oMouth.x2 + oMouth.iSpr*oMouth.w, oMouth.y2, oMouth.w, oMouth.h, oMouth.x, oMouth.y, oMouth.w, oMouth.h);

// draw controls
ctx.textAlign = 'center';
ctx.fillStyle = '#000';

ctx.font = '30px Verdana';
if (iSel == 0)
      ctx.font = 'bold 30px Verdana';
ctx.fillText('< Head >', 400, 80);

ctx.font = '30px Verdana';
if (iSel == 1)
      ctx.font = 'bold 30px Verdana';
ctx.fillText('< Eye >', 400, 180);

ctx.font = '30px Verdana';
if (iSel == 2)
      ctx.font = 'bold 30px Verdana';
ctx.fillText('< Nose >', 400, 280);

ctx.font = '30px Verdana';
if (iSel == 3)
      ctx.font = 'bold 30px Verdana';
ctx.fillText('< Mouth >', 400, 380);
}

// -------------------------------------------------------------

// initialization
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');

// initialization of dragon
var oHeadImage = new Image();
oHeadImage.src="images/image.png";
oHeadImage.onload = function() {};

oHead = new Head(0, 0, 0, 755, 300, 405, oHeadImage);
oEye = new Eye(40, 70, 0, 120, 235, 80, oHeadImage);
oNose = new Nose(70, 120, 0, 276, 180, 140, oHeadImage);
oMouth = new Mouth(60, 260, 0, 546, 170, 120, oHeadImage);

$(window).keydown(function(event){
      switch (event.keyCode) {
         case 38: // Up key
            iSel--;
            if (iSel < 0) {
                  iSel = 3;
            }
            break;
         case 40: // Up key
            iSel++;
            if (iSel >= 4) {
                  iSel = 0;
            }
            break;
         case 37: // Left key

            // update sprite positions
            if (iSel == 0) {
                  oHead.iSpr--;
                  if (oHead.iSpr < 0) {
                     oHead.iSpr = 3;
                  }
            }
            if (iSel == 1) {
                  oEye.iSpr--;
                  if (oEye.iSpr < 0) {
                     oEye.iSpr = 4;
                  }
            }
            if (iSel == 2) {
                  oNose.iSpr--;
                  if (oNose.iSpr < 0) {
                     oNose.iSpr = 4;
                  }
            }
            if (iSel == 3) {
                  oMouth.iSpr--;
                  if (oMouth.iSpr < 0) {
                     oMouth.iSpr = 4;
                  }
            }
            break;
         case 39: // Right key

            // update sprite positions
            if (iSel == 0) {
                  oHead.iSpr++;
                  if (oHead.iSpr >= 4) {
                     oHead.iSpr = 0;
                  }
            }
            if (iSel == 1) {
                  oEye.iSpr++;
                  if (oEye.iSpr >= 5) {
                     oEye.iSpr = 0;
                  }
            }
            if (iSel == 2) {
                  oNose.iSpr++;
                  if (oNose.iSpr >= 5) {
                     oNose.iSpr = 0;
                  }
            }
            if (iSel == 3) {
                  oMouth.iSpr++;
                  if (oMouth.iSpr >= 5) {
                     oMouth.iSpr = 0;
                  }
            }
            break;

         case 32: // Spacebar key - export results
            var temp_ctx, temp_canvas;
            temp_canvas = document.createElement('canvas');
            temp_ctx = temp_canvas.getContext('2d');
            temp_canvas.width = 360;
            temp_canvas.height = 410;

            // draw head
            temp_ctx.drawImage(oHead.image, oHead.iSpr*oHead.w, oHead.y2, oHead.w, oHead.h, oHead.x, oHead.y, oHead.w, oHead.h);

            // draw eyes
            temp_ctx.drawImage(oEye.image, oEye.iSpr*oEye.w, oEye.y2, oEye.w, oEye.h, oEye.x, oEye.y, oEye.w, oEye.h);

            // draw nose
            temp_ctx.drawImage(oNose.image, oNose.iSpr*oNose.w, oNose.y2, oNose.w, oNose.h, oNose.x, oNose.y, oNose.w, oNose.h);

            // draw mouth
            temp_ctx.drawImage(oMouth.image, oMouth.iSpr*oMouth.w, oMouth.y2, oMouth.w, oMouth.h, oMouth.x, oMouth.y, oMouth.w, oMouth.h);

            var vData = temp_canvas.toDataURL();
            $('#face_result').attr('src', vData);
            break;
      }
});

setInterval(drawScene, 40); // loop drawScene
});

大家可以在本地下载代码，谢谢阅读！

演示地址：http://www.gbin1.com/technology/html/20111225html5facebuilder/demo.html

代码下载：http://download.csdn.net/detail/u013681996/8132325

Cheris2014

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享一个HTML5实现的拼脸游戏

分享一款使用HTML5的Canvas实现的拼脸游戏，你可以自己选择设定，眉毛，鼻子，嘴，并且能够输出为图片。这篇教程将帮助你快速了解如何使用Canvas API。使用方式：请使用键盘方向键上下选择脸部**，左右选择**的不同类型。 Step 1. HTML HTML5 Face Builder | S
复制链接

扫一扫