效果还很粗糙，慢慢修改优化，暂存。
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>Super Mario</title>
<style>
body{
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="bg"></canvas>
<canvas id="screen" style="position: absolute;top: 0;"></canvas>
<script>
var SCREEN_WIDTH = document.documentElement.clientWidth;
var SCREEN_HEIGHT = document.documentElement.clientHeight;
var LINE_WIDTH = 5;
var s = 0;
var s1 = 0;
var exp = 1;
var currentStatus = 'right';
var bg = new Image();
var canvas = document.getElementById('screen');
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
var ctx = canvas.getContext('2d');
var bgCanvas = document.getElementById('bg');
bgCanvas.width = SCREEN_WIDTH;
bgCanvas.height = SCREEN_HEIGHT;
var bgContext = bgCanvas.getContext('2d');
ctx.lineWidth = LINE_WIDTH;
var control = new Control();//实例化游戏控制类
init();
drawMarioA(ctx, s1);
//drawMarioC(ctx, s1);
var interval;
function init() {
bg.src = 'http://cdn.attach.qdfuns.com/notes/pics/201711/30/163940zti73hgoxh5ah39z.png';
bgContext.drawImage(bg, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}
//游戏控制类
function Control() {
this.code = {37: 'left', 39: 'right', 38: 'jump', 40: 'down'}
this.status = {'left': false, 'right': false, 'jump': false, 'down': false};
document.addEventListener("keydown", function (e) {
var status = this.code[e.keyCode];
if (!status) return;
this.status[status] = true;
clearInterval(interval);
interval = setInterval(start, 1000 / 60);
}.bind(this))
document.addEventListener("keyup", function (e) {
clearInterval(interval);
var status = this.code[e.keyCode];
if (!status) return;
this.status[status] = false;
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
if (e.keyCode == 37 || e.keyCode == 39) {
currentStatus = this.code[e.keyCode];
}
if (currentStatus == 'right') {
drawMarioA(ctx, s1);
} else {
drawMarioA1(ctx, SCREEN_WIDTH - s1 - 100);
}
}.bind(this))
}
function start() {
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
if (control.status.left) {
if (s > 0) { //判断当前线的位置，控制在区域内
s = s - 1;
}
s1 = s;
run(ctx, SCREEN_WIDTH - s - 100, 'left');
//drawMarioA1(ctx, SCREEN_WIDTH - s - 100);
} else if (control.status.right) {
if (s <= SCREEN_WIDTH - 100) { //判断当前线的位置，控制在区域内
s = s1 + 1; //起点+活动像素位置
} else {
s = s1;
}
s1 = s;
run(ctx, s, 'right');
} else if (control.status.jump) {
if (currentStatus == 'right') {
drawMarioB(ctx, s1);
} else {
drawMarioB1(ctx, SCREEN_WIDTH - s1 - 100);
}
} else {
if (currentStatus == 'right') {
drawMarioA(ctx, s1);
} else {
drawMarioA1(ctx, s1);
}
}
}
function run(ctx, s, d) {
if (d == 'right') {
drawMarioC(ctx, s);
setTimeout(function () {
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
drawMarioA(ctx, s);
}, 10);
} else {
drawMarioC1(ctx, s);
setTimeout(function () {
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
drawMarioA1(ctx, s);
}, 10);
}
}
//站着的mario
function drawMarioA(ctx, s) {
var x = LINE_WIDTH + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(s + (LINE_WIDTH * 10), x + LINE_WIDTH * 10);
ctx.lineTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 10);
ctx.moveTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.lineTo(s + (LINE_WIDTH * 18), x + LINE_WIDTH * 11);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(s + (LINE_WIDTH * 12), x + LINE_WIDTH * 12);
ctx.lineTo(s + (LINE_WIDTH * 16), x + LINE_WIDTH * 12);
ctx.moveTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 13);
ctx.lineTo(s + (LINE_WIDTH * 18), x + LINE_WIDTH * 13);
ctx.moveTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 14);
ctx.lineTo(s + (LINE_WIDTH * 19), x + LINE_WIDTH * 14);
ctx.moveTo(s + (LINE_WIDTH * 10), x + LINE_WIDTH * 15);
ctx.lineTo(s + (LINE_WIDTH * 18), x + LINE_WIDTH * 15);
ctx.moveTo(s + (LINE_WIDTH * 10), x + LINE_WIDTH * 16);
ctx.lineTo(s + (LINE_WIDTH * 17), x + LINE_WIDTH * 16);
//手
ctx.moveTo(s + (LINE_WIDTH * 7), x + LINE_WIDTH * 20);
ctx.lineTo(s + (LINE_WIDTH * 19), x + LINE_WIDTH * 20);
ctx.moveTo(s + (LINE_WIDTH * 7), x + LINE_WIDTH * 21);
ctx.lineTo(s + (LINE_WIDTH * 19), x + LINE_WIDTH * 21);
ctx.moveTo(s + (LINE_WIDTH * 7), x + LINE_WIDTH * 22);
ctx.lineTo(s + (LINE_WIDTH * 19), x + LINE_WIDTH * 22);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 12);
ctx.lineTo(s + (LINE_WIDTH * 12), x + LINE_WIDTH * 12);
ctx.moveTo(s + (LINE_WIDTH * 10), x + LINE_WIDTH * 13);
ctx.lineTo(s + (LINE_WIDTH * 11), x + LINE_WIDTH * 13);
ctx.moveTo(s + (LINE_WIDTH * 10), x + LINE_WIDTH * 14);
ctx.lineTo(s + (LINE_WIDTH * 12), x + LINE_WIDTH * 14);
ctx.moveTo(s + (LINE_WIDTH * 8), x + LINE_WIDTH * 13);
ctx.lineTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 13);
ctx.moveTo(s + (LINE_WIDTH * 8), x + LINE_WIDTH * 14);
ctx.lineTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 14);
ctx.moveTo(s + (LINE_WIDTH * 8), x + LINE_WIDTH * 15);
ctx.lineTo(s + (LINE_WIDTH * 10), x + LINE_WIDTH * 15);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(s + (LINE_WIDTH * 14), x + LINE_WIDTH * 12);
ctx.lineTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 12);
ctx.moveTo(s + (LINE_WIDTH * 14), x + LINE_WIDTH * 13);
ctx.lineTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 13);
ctx.moveTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 14);
ctx.lineTo(s + (LINE_WIDTH * 16), x + LINE_WIDTH * 14);
ctx.moveTo(s + (LINE_WIDTH * 14), x + LINE_WIDTH * 15);
ctx.lineTo(s + (LINE_WIDTH * 18), x + LINE_WIDTH * 15);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 17);
ctx.lineTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 17);
ctx.moveTo(s + (LINE_WIDTH * 8), x + LINE_WIDTH * 18);
ctx.lineTo(s + (LINE_WIDTH * 18), x + LINE_WIDTH * 18);
ctx.moveTo(s + (LINE_WIDTH * 7), x + LINE_WIDTH * 19);
ctx.lineTo(s + (LINE_WIDTH * 19), x + LINE_WIDTH * 19);
ctx.moveTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 20);
ctx.lineTo(s + (LINE_WIDTH * 17), x + LINE_WIDTH * 20);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(s + (LINE_WIDTH * 11), x + LINE_WIDTH * 17);
ctx.lineTo(s + (LINE_WIDTH * 12), x + LINE_WIDTH * 17);
ctx.moveTo(s + (LINE_WIDTH * 11), x + LINE_WIDTH * 18);
ctx.lineTo(s + (LINE_WIDTH * 12), x + LINE_WIDTH * 18);
ctx.moveTo(s + (LINE_WIDTH * 14), x + LINE_WIDTH * 18);
ctx.lineTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 18);
ctx.moveTo(s + (LINE_WIDTH * 11), x + LINE_WIDTH * 19);
ctx.lineTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 19);
ctx.moveTo(s + (LINE_WIDTH * 10), x + LINE_WIDTH * 20);
ctx.lineTo(s + (LINE_WIDTH * 16), x + LINE_WIDTH * 20);
ctx.moveTo(s + (LINE_WIDTH * 10), x + LINE_WIDTH * 21);
ctx.lineTo(s + (LINE_WIDTH * 16), x + LINE_WIDTH * 21);
ctx.moveTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 22);
ctx.lineTo(s + (LINE_WIDTH * 17), x + LINE_WIDTH * 22);
ctx.moveTo(s + (LINE_WIDTH * 9), x + LINE_WIDTH * 23);
ctx.lineTo(s + (LINE_WIDTH * 12), x + LINE_WIDTH * 23);
ctx.moveTo(s + (LINE_WIDTH * 14), x + LINE_WIDTH * 23);
ctx.lineTo(s + (LINE_WIDTH * 17), x + LINE_WIDTH * 23);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
ctx.moveTo(s + (LINE_WIDTH * 8), x + LINE_WIDTH * 24);
ctx.lineTo(s + (LINE_WIDTH * 11), x + LINE_WIDTH * 24);
ctx.moveTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 24);
ctx.lineTo(s + (LINE_WIDTH * 18), x + LINE_WIDTH * 24);
ctx.moveTo(s + (LINE_WIDTH * 7), x + LINE_WIDTH * 25);
ctx.lineTo(s + (LINE_WIDTH * 11), x + LINE_WIDTH * 25);
ctx.moveTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 25);
ctx.lineTo(s + (LINE_WIDTH * 19), x + LINE_WIDTH * 25);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(s + (LINE_WIDTH * 11), x + LINE_WIDTH * 20);
ctx.lineTo(s + (LINE_WIDTH * 12), x + LINE_WIDTH * 20);
ctx.moveTo(s + (LINE_WIDTH * 14), x + LINE_WIDTH * 20);
ctx.lineTo(s + (LINE_WIDTH * 15), x + LINE_WIDTH * 20);
ctx.stroke();
}
//站着的mario
function drawMarioA1(ctx, s) {
var x = LINE_WIDTH + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 11);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 16)), x + LINE_WIDTH * 12);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 13);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 13);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 17)), x + LINE_WIDTH * 16);
//手
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 20);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 20);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 21);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 21);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 22);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 22);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 12);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 13);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 13);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 13);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 13);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 15);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 12);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 13);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 13);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 16)), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 15);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 17);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 17);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 18);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 19);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 19);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 20);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 17)), x + LINE_WIDTH * 20);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 17);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 17);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 18);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 18);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 19);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 19);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 20);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 16)), x + LINE_WIDTH * 20);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 21);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 16)), x + LINE_WIDTH * 21);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 22);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 17)), x + LINE_WIDTH * 22);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 23);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 23);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 23);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 17)), x + LINE_WIDTH * 23);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 24);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 24);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 24);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 24);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 25);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 25);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 25);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 25);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 20);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 20);
ctx.moveTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 20);
ctx.lineTo(SCREEN_WIDTH - (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 20);
ctx.stroke();
}
//跳起的mario
function drawMarioB(ctx, s) {
var x = LINE_WIDTH + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 7);
ctx.lineTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 7);
ctx.moveTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 8);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 8);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 9);
ctx.lineTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 9);
ctx.moveTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 12);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 12);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 13);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 13);
//手
ctx.moveTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 7);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 7);
ctx.moveTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 8);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 8);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 9);
ctx.lineTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 9);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 11, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 12);
ctx.lineTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 12);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(s + LINE_WIDTH * 14, x + LINE_WIDTH * 9);
ctx.lineTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 9);
ctx.moveTo(s + LINE_WIDTH * 14, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 14, x + LINE_WIDTH * 12);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 12);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 9);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 9);
ctx.moveTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 12);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 12);
ctx.moveTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 13);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 13);
ctx.moveTo(s + LINE_WIDTH * 7, x + LINE_WIDTH * 14);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 14);
ctx.moveTo(s + LINE_WIDTH * 7, x + LINE_WIDTH * 15);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 15);
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 16);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 16);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(s + LINE_WIDTH * 11, x + LINE_WIDTH * 14);
ctx.lineTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 14);
ctx.moveTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 14);
ctx.lineTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 14);
ctx.moveTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 15);
ctx.lineTo(s + LINE_WIDTH * 13, x + LINE_WIDTH * 15);
ctx.moveTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 15);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 15);
ctx.moveTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 16);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 16);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 17);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 17);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 18);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 18);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 19);
ctx.lineTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 19);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
//左边
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 18);
ctx.lineTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 18);
ctx.moveTo(s + LINE_WIDTH * 7, x + LINE_WIDTH * 19);
ctx.lineTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 19);
ctx.moveTo(s + LINE_WIDTH * 7, x + LINE_WIDTH * 20);
ctx.lineTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 20);
//右边
ctx.moveTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 14);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 14);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 15);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 15);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 16);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 16);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 17);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 17);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 18);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 18);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 16);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 16);
ctx.moveTo(s + LINE_WIDTH * 13, x + LINE_WIDTH * 17);
ctx.lineTo(s + LINE_WIDTH * 14, x + LINE_WIDTH * 17);
ctx.stroke();
}
//跳起的mario
function drawMarioB1(ctx, s) {
var x = LINE_WIDTH + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 7);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 7);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 8);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 8);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 9);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 9);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 13);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 13);
//手
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 7);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 7);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 8);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 8);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 9);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 9);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 11), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 12);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 14), x + LINE_WIDTH * 9);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 9);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 14), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 14), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 9);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 9);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 12);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 13);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 13);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 7), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 7), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 16);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 11), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 13), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 16);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 17);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 17);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 18);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 19);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 19);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
//左边
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 18);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 7), x + LINE_WIDTH * 19);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 19);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 7), x + LINE_WIDTH * 20);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 20);
//右边
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 16);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 17);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 17);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 18);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 16);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 13), x + LINE_WIDTH * 17);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 14), x + LINE_WIDTH * 17);
ctx.stroke();
}
//行走的mario
function drawMarioC(ctx, s) {
var x = LINE_WIDTH * 4 + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
s = s;
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 7);
ctx.lineTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 7);
ctx.moveTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 8);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 8);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 9);
ctx.lineTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 9);
ctx.moveTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 12);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 12);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 13);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 13);
//手
ctx.moveTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 7);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 7);
ctx.moveTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 8);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 8);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 9);
ctx.lineTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 9);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 11, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 12);
ctx.lineTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 12);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(s + LINE_WIDTH * 14, x + LINE_WIDTH * 9);
ctx.lineTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 9);
ctx.moveTo(s + LINE_WIDTH * 14, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 14, x + LINE_WIDTH * 12);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 12);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 9);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 9);
ctx.moveTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 10);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 10);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 11);
ctx.lineTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 11);
ctx.moveTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 12);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 12);
ctx.moveTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 13);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 13);
ctx.moveTo(s + LINE_WIDTH * 7, x + LINE_WIDTH * 14);
ctx.lineTo(s + LINE_WIDTH * 18, x + LINE_WIDTH * 14);
ctx.moveTo(s + LINE_WIDTH * 7, x + LINE_WIDTH * 15);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 15);
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 16);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 16);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(s + LINE_WIDTH * 11, x + LINE_WIDTH * 14);
ctx.lineTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 14);
ctx.moveTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 14);
ctx.lineTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 14);
ctx.moveTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 15);
ctx.lineTo(s + LINE_WIDTH * 13, x + LINE_WIDTH * 15);
ctx.moveTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 15);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 15);
ctx.moveTo(s + LINE_WIDTH * 12, x + LINE_WIDTH * 16);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 16);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 17);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 17);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 18);
ctx.lineTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 18);
ctx.moveTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 19);
ctx.lineTo(s + LINE_WIDTH * 15, x + LINE_WIDTH * 19);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
//左边
ctx.moveTo(s + LINE_WIDTH * 8, x + LINE_WIDTH * 18);
ctx.lineTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 18);
ctx.moveTo(s + LINE_WIDTH * 7, x + LINE_WIDTH * 19);
ctx.lineTo(s + LINE_WIDTH * 10, x + LINE_WIDTH * 19);
ctx.moveTo(s + LINE_WIDTH * 7, x + LINE_WIDTH * 20);
ctx.lineTo(s + LINE_WIDTH * 9, x + LINE_WIDTH * 20);
//右边
ctx.moveTo(s + LINE_WIDTH * 20, x + LINE_WIDTH * 14);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 14);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 15);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 15);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 16);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 16);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 17);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 17);
ctx.moveTo(s + LINE_WIDTH * 19, x + LINE_WIDTH * 18);
ctx.lineTo(s + LINE_WIDTH * 21, x + LINE_WIDTH * 18);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(s + LINE_WIDTH * 16, x + LINE_WIDTH * 16);
ctx.lineTo(s + LINE_WIDTH * 17, x + LINE_WIDTH * 16);
ctx.moveTo(s + LINE_WIDTH * 13, x + LINE_WIDTH * 17);
ctx.lineTo(s + LINE_WIDTH * 14, x + LINE_WIDTH * 17);
ctx.stroke();
}
//行走的mario
function drawMarioC1(ctx, s) {
var x = LINE_WIDTH * 4 + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
s = s;
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 7);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 7);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 8);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 8);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 9);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 9);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 13);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 13);
//手
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 7);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 7);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 8);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 8);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 9);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 9);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 11), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 12);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 14), x + LINE_WIDTH * 9);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 9);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 14), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 14), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 9);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 9);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 10);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 10);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 11);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 11);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 12);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 13);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 13);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 7), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 18), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 7), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 16);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 11), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 13), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 12), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 16);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 17);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 17);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 18);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 19);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 15), x + LINE_WIDTH * 19);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
//左边
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 8), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 18);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 7), x + LINE_WIDTH * 19);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 10), x + LINE_WIDTH * 19);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 7), x + LINE_WIDTH * 20);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 9), x + LINE_WIDTH * 20);
//右边
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 20), x + LINE_WIDTH * 14);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 14);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 15);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 15);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 16);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 17);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 17);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 19), x + LINE_WIDTH * 18);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 21), x + LINE_WIDTH * 18);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 16), x + LINE_WIDTH * 16);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 17), x + LINE_WIDTH * 16);
ctx.moveTo(SCREEN_WIDTH - (s + LINE_WIDTH * 13), x + LINE_WIDTH * 17);
ctx.lineTo(SCREEN_WIDTH - (s + LINE_WIDTH * 14), x + LINE_WIDTH * 17);
ctx.stroke();
}
</script>
</body>
</html>
优化代码：
1、运用ctx.translate()移动画布，改变画布的坐标轴位置来进行绘制反方向的图像。
注意：在移动前，先用ctx.save();保存当前画布，然后进行移动，绘制。绘制完成后恢复之前的保存状态ctx.restore();这样删除了一半的冗余的代码。
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>Super Mario</title>
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="bg"></canvas>
<canvas id="screen" style="position: absolute;top: 0;"></canvas>
<script>
var SCREEN_WIDTH = document.documentElement.clientWidth;
var SCREEN_HEIGHT = document.documentElement.clientHeight;
var LINE_WIDTH = 5;
var s = 0;
var s1 = 0;
var exp = 1;
var currentStatus = 'right';
var bg = new Image();
var canvas = document.getElementById('screen');
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
var ctx = canvas.getContext('2d');
var bgCanvas = document.getElementById('bg');
bgCanvas.width = SCREEN_WIDTH;
bgCanvas.height = SCREEN_HEIGHT;
var bgContext = bgCanvas.getContext('2d');
ctx.lineWidth = LINE_WIDTH;
var control = new Control();//实例化游戏控制类
init();
drawMarioA(ctx, s1, 1);
var interval;
function init() {
bg.src = 'http://cdn.attach.qdfuns.com/notes/pics/201711/30/163940zti73hgoxh5ah39z.png';
bgContext.drawImage(bg, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}
//游戏控制类
function Control() {
this.code = {37: 'left', 39: 'right', 38: 'jump', 40: 'down'}
this.status = {'left': false, 'right': false, 'jump': false, 'down': false};
document.addEventListener("keydown", function (e) {
var status = this.code[e.keyCode];
if (!status) return;
this.status[status] = true;
clearInterval(interval);
interval = setInterval(start, 1000 / 60);
}.bind(this))
document.addEventListener("keyup", function (e) {
clearInterval(interval);
var status = this.code[e.keyCode];
if (!status) return;
this.status[status] = false;
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
if (e.keyCode == 37 || e.keyCode == 39) {
currentStatus = this.code[e.keyCode];
}
if (currentStatus == 'right') {
drawMarioA(ctx, s1, 1);
} else {
drawMarioA(ctx, SCREEN_WIDTH - s1 - 100, -1);
}
}.bind(this))
}
function start() {
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
if (control.status.left) {
if (s > 0) { //判断当前线的位置，控制在区域内
s = s - 1;
}
s1 = s;
run(ctx, SCREEN_WIDTH - s - 100, 'left');
} else if (control.status.right) {
if (s <= SCREEN_WIDTH - 100) { //判断当前线的位置，控制在区域内
s = s1 + 1; //起点+活动像素位置
} else {
s = s1;
}
s1 = s;
run(ctx, s, 'right');
} else if (control.status.jump) {
if (currentStatus == 'right') {
drawMarioB(ctx, s1, 1);
} else {
drawMarioB(ctx, SCREEN_WIDTH - s1 - 100, -1);
}
} else {
if (currentStatus == 'right') {
drawMarioA(ctx, s1, 1);
} else {
drawMarioA(ctx, SCREEN_WIDTH - s1 - 100, -1);
}
}
}
function run(ctx, s, d) {
var p = 1;
if (d == 'left') {
p = -1;
}
drawMarioC(ctx, s, p);
setTimeout(function () {
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
drawMarioA(ctx, s, p);
}, 10);
}
//站着的mario
function drawMarioA(ctx, s, p) {
ctx.save();
if (p == -1) {
ctx.translate(SCREEN_WIDTH, 0);
}
var x = LINE_WIDTH + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(p * (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 11);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(p * (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + (LINE_WIDTH * 16)), x + LINE_WIDTH * 12);
ctx.moveTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 13);
ctx.lineTo(p * (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 13);
ctx.moveTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + (LINE_WIDTH * 17)), x + LINE_WIDTH * 16);
//手
ctx.moveTo(p * (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 20);
ctx.lineTo(p * (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 20);
ctx.moveTo(p * (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 21);
ctx.lineTo(p * (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 21);
ctx.moveTo(p * (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 22);
ctx.lineTo(p * (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 22);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 12);
ctx.moveTo(p * (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 13);
ctx.lineTo(p * (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 13);
ctx.moveTo(p * (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 13);
ctx.lineTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 13);
ctx.moveTo(p * (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 15);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(p * (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 12);
ctx.moveTo(p * (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 13);
ctx.lineTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 13);
ctx.moveTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + (LINE_WIDTH * 16)), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 15);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 17);
ctx.lineTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 17);
ctx.moveTo(p * (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 18);
ctx.moveTo(p * (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 19);
ctx.lineTo(p * (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 19);
ctx.moveTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 20);
ctx.lineTo(p * (s + (LINE_WIDTH * 17)), x + LINE_WIDTH * 20);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(p * (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 17);
ctx.lineTo(p * (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 17);
ctx.moveTo(p * (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 18);
ctx.moveTo(p * (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 18);
ctx.moveTo(p * (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 19);
ctx.lineTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 19);
ctx.moveTo(p * (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 20);
ctx.lineTo(p * (s + (LINE_WIDTH * 16)), x + LINE_WIDTH * 20);
ctx.moveTo(p * (s + (LINE_WIDTH * 10)), x + LINE_WIDTH * 21);
ctx.lineTo(p * (s + (LINE_WIDTH * 16)), x + LINE_WIDTH * 21);
ctx.moveTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 22);
ctx.lineTo(p * (s + (LINE_WIDTH * 17)), x + LINE_WIDTH * 22);
ctx.moveTo(p * (s + (LINE_WIDTH * 9)), x + LINE_WIDTH * 23);
ctx.lineTo(p * (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 23);
ctx.moveTo(p * (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 23);
ctx.lineTo(p * (s + (LINE_WIDTH * 17)), x + LINE_WIDTH * 23);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
ctx.moveTo(p * (s + (LINE_WIDTH * 8)), x + LINE_WIDTH * 24);
ctx.lineTo(p * (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 24);
ctx.moveTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 24);
ctx.lineTo(p * (s + (LINE_WIDTH * 18)), x + LINE_WIDTH * 24);
ctx.moveTo(p * (s + (LINE_WIDTH * 7)), x + LINE_WIDTH * 25);
ctx.lineTo(p * (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 25);
ctx.moveTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 25);
ctx.lineTo(p * (s + (LINE_WIDTH * 19)), x + LINE_WIDTH * 25);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(p * (s + (LINE_WIDTH * 11)), x + LINE_WIDTH * 20);
ctx.lineTo(p * (s + (LINE_WIDTH * 12)), x + LINE_WIDTH * 20);
ctx.moveTo(p * (s + (LINE_WIDTH * 14)), x + LINE_WIDTH * 20);
ctx.lineTo(p * (s + (LINE_WIDTH * 15)), x + LINE_WIDTH * 20);
ctx.stroke();
ctx.restore();
}
//跳起的mario
function drawMarioB(ctx, s, p) {
var x = LINE_WIDTH + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
ctx.save();
if (p == -1) {
ctx.translate(SCREEN_WIDTH, 0);
}
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 7);
ctx.lineTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 7);
ctx.moveTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 8);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 8);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 9);
ctx.lineTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 9);
ctx.moveTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 13);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 13);
//手
ctx.moveTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 7);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 7);
ctx.moveTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 8);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 8);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 9);
ctx.lineTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 9);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 11), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 12);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(p * (s + LINE_WIDTH * 14), x + LINE_WIDTH * 9);
ctx.lineTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 9);
ctx.moveTo(p * (s + LINE_WIDTH * 14), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 14), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 9);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 9);
ctx.moveTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 12);
ctx.moveTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 13);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 13);
ctx.moveTo(p * (s + LINE_WIDTH * 7), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + LINE_WIDTH * 7), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 16);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(p * (s + LINE_WIDTH * 11), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + LINE_WIDTH * 13), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 16);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 17);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 17);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 18);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 19);
ctx.lineTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 19);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
//左边
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 18);
ctx.moveTo(p * (s + LINE_WIDTH * 7), x + LINE_WIDTH * 19);
ctx.lineTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 19);
ctx.moveTo(p * (s + LINE_WIDTH * 7), x + LINE_WIDTH * 20);
ctx.lineTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 20);
//右边
ctx.moveTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 16);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 17);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 17);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 18);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 16);
ctx.moveTo(p * (s + LINE_WIDTH * 13), x + LINE_WIDTH * 17);
ctx.lineTo(p * (s + LINE_WIDTH * 14), x + LINE_WIDTH * 17);
ctx.stroke();
ctx.restore();
}
//行走的mario
function drawMarioC(ctx, s, p) {
var x = LINE_WIDTH * 4 + (SCREEN_HEIGHT - SCREEN_HEIGHT * 0.4);
ctx.save();
if (p == -1) {
ctx.translate(SCREEN_WIDTH, 0);
}
//帽子
ctx.beginPath();
ctx.strokeStyle = "#e00000";
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 7);
ctx.lineTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 7);
ctx.moveTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 8);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 8);
ctx.stroke();
//皮肤
ctx.beginPath();
ctx.strokeStyle = '#f7d7c2';
ctx.moveTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 9);
ctx.lineTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 9);
ctx.moveTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 13);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 13);
//手
ctx.moveTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 7);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 7);
ctx.moveTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 8);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 8);
ctx.stroke();
//头发
ctx.beginPath();
ctx.strokeStyle = "#772102";
ctx.moveTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 9);
ctx.lineTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 9);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 11), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 12);
ctx.stroke();
//胡子和眼睛
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(p * (s + LINE_WIDTH * 14), x + LINE_WIDTH * 9);
ctx.lineTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 9);
ctx.moveTo(p * (s + LINE_WIDTH * 14), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 14), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.stroke();
//红色衣服
ctx.beginPath();
ctx.strokeStyle = '#e00000';
ctx.moveTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 9);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 9);
ctx.moveTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 10);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 10);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 11);
ctx.lineTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 11);
ctx.moveTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 12);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 12);
ctx.moveTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 13);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 13);
ctx.moveTo(p * (s + LINE_WIDTH * 7), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + LINE_WIDTH * 18), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + LINE_WIDTH * 7), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 16);
ctx.stroke();
//蓝色衣服
ctx.beginPath();
ctx.strokeStyle = '#2b4bf4';
ctx.moveTo(p * (s + LINE_WIDTH * 11), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + LINE_WIDTH * 13), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + LINE_WIDTH * 12), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 16);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 17);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 17);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 18);
ctx.moveTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 19);
ctx.lineTo(p * (s + LINE_WIDTH * 15), x + LINE_WIDTH * 19);
ctx.stroke();
//鞋子
ctx.beginPath();
ctx.strokeStyle = '#632705';
//左边
ctx.moveTo(p * (s + LINE_WIDTH * 8), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 18);
ctx.moveTo(p * (s + LINE_WIDTH * 7), x + LINE_WIDTH * 19);
ctx.lineTo(p * (s + LINE_WIDTH * 10), x + LINE_WIDTH * 19);
ctx.moveTo(p * (s + LINE_WIDTH * 7), x + LINE_WIDTH * 20);
ctx.lineTo(p * (s + LINE_WIDTH * 9), x + LINE_WIDTH * 20);
//右边
ctx.moveTo(p * (s + LINE_WIDTH * 20), x + LINE_WIDTH * 14);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 14);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 15);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 15);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 16);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 17);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 17);
ctx.moveTo(p * (s + LINE_WIDTH * 19), x + LINE_WIDTH * 18);
ctx.lineTo(p * (s + LINE_WIDTH * 21), x + LINE_WIDTH * 18);
ctx.stroke();
//扣子
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(p * (s + LINE_WIDTH * 16), x + LINE_WIDTH * 16);
ctx.lineTo(p * (s + LINE_WIDTH * 17), x + LINE_WIDTH * 16);
ctx.moveTo(p * (s + LINE_WIDTH * 13), x + LINE_WIDTH * 17);
ctx.lineTo(p * (s + LINE_WIDTH * 14), x + LINE_WIDTH * 17);
ctx.stroke();
ctx.restore();
}
</script>
</body>
</html>
