Добрый вечер! Помогите пожалуйста! Написал программу. При корректной работе должна быть нарисована голова снеговика, которая должна двигаться от левого края к правому и обратно. Помогите пожалуйста исправить код. Заранее спасибо.
<!DOCTYPE html!>
<html>
<head>
<meta charset = "UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id = "canvas" width="300" height="300" style = "border: 1px solid;"></canvas>
<script>
</script>
</body>
</html>
[JS]var gameEngine;
var nextGameStep;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 10;
var y = 10;
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.Pi * 2, false);
if (fillCircle) {
ctx.fill();
} else {
ctx.stroke();
}
};
var drawSnowmanHead = function (x, y) {
ctx.fillStyle = "Black";
ctx.lineWidth = 4;
circle(x, y, 30, false);
circle(x, y, 5, true);
circle(x, y, 5, true);
ctx.fillStyle = "Orange";
circle(x, y, 5, true);
};
var nextGameStep = (function () {
return requestAnimationFrame ||
webkitRequestAnimationFrame ||
mozRequestAnimationFrame ||
oRequestAnimationFrame ||
msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
};
})();
var gameEngineStart = function(callback) {
gameEngine = callback;
gameEngineStep();
};
var gameEngineStep = function() {
gameEngine();
nextGameStep(gameEngineStep);
};
var setGameEngine = function (callback) {
gameEngine = callback;
};
var gameLoopRight = function() {
drawSnowmanHead();
x += 3;
if (x >= 250) {
setGameEngine(gameLoopLeft);
}
};
var gameLoopLeft = function() {
drawSnowmanHead();
x -= 3;
if (x < 0) {
setGameEngine(gameLoopRight);
}
};
gameEngineStart(gameLoopRight);
