Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   canvas снеговик (https://javascript.ru/forum/misc/71045-canvas-snegovik.html)

Omnia 21.10.2017 22:09

canvas снеговик
 
Добрый вечер! Помогите пожалуйста! Написал программу. При корректной работе должна быть нарисована голова снеговика, которая должна двигаться от левого края к правому и обратно. Помогите пожалуйста исправить код. Заранее спасибо.

<!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);


Часовой пояс GMT +3, время: 13:40.