Подпрыгивая изображения, используя дом

Question

У меня есть идея, которую я хочу реализовать, когда различные картинки подпрыгивают на экране, и ученик должен определить, какая из них является правильной.

Я выполнил поиск в Google для javascriptизображения подпрыгивают , и это был первый результат, который работает, но использует Canvas:

var ctx = null;
var x_icon = 0;
var y_icon = 0;
var stepX = 1;
var stepY = 1;
var size_x = 23;
var size_y = 22;
var canvas_size_x = 480;
var canvas_size_y = 320;
var anim_img = null;

function draw() {
  var canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  anim_img = new Image(size_x, size_y);
  anim_img.onload = function() { setInterval('myAnimation()', 10); }
  anim_img.src = 'https://pbs.twimg.com/profile_images/3352183391/a16302aab7bd8742ad3e39a75454008a_normal.jpeg';
}
function myAnimation() {
  ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
 if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
 if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
	 x_icon += stepX;
	 y_icon += stepY;
 ctx.drawImage(anim_img, x_icon, y_icon);
}

draw()

<canvas id="canvas" width="480" height="320" style="border:solid 1px;"></canvas>

Я действительно хочу сделать это приложение для смартфона, поэтому я думаю просто использовать dom и опросить screen.width и screen.height.

В: Есть ли способ отразить маленькие гиперссылки на HTML-странице, не прибегая к холсту?

Answer 1

Вы можете использовать абсолютное положение для элемента изображения и просто обновить его верхнее / левое значения:

var ctx = null;
var x_icon = 0;
var y_icon = 0;
var stepX = 1;
var stepY = 1;
var size_x = 23;
var size_y = 22;
var anim_img = null;

function draw() {
  anim_img = new Image(size_x, size_y);
  anim_img.onload = function() { setInterval('myAnimation()', 10); }
  anim_img.src = 'https://pbs.twimg.com/profile_images/3352183391/a16302aab7bd8742ad3e39a75454008a_normal.jpeg';
  anim_img.style.position = 'absolute';
  document.body.append(anim_img);
}
function myAnimation() {
  if (x_icon < 0 || x_icon > window.innerHeight - size_x) {stepX = -stepX; }
  if (y_icon < 0 || y_icon > window.innerWidth - size_y) {stepY = -stepY; }
  x_icon += stepX;
  y_icon += stepY;
  anim_img.style.top = x_icon + 'px';
  anim_img.style.left = y_icon + 'px';
}

draw()