Форум

gooodwin67 · #1 (**permalink**) 03.07.2018, 16:45

Вот такое могу сделать(чтобы квадрат двигался из стороны в сторону) https://jsfiddle.net/gooodwin67/5opf17y2/1/

Но вот что-то ума не приложу как сделать чтобы дойдя до правой стенки квадрат пошел вниз, дойдя до низу пошел в лево, потом в верх, вправо и т д.

Dilettante_Pro · #2 (**permalink**) 03.07.2018, 17:03

<style>
body {
  background: #232425;
  color: #ccc;
}
canvas {
  border: 1px solid #ccc;
}
</style>
<canvas id = 'myCanvas' width = '500' height = '300'></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var n = 4;
var m = 0;


var x = 10;
var y = 10;

function draw(x,y) {
	ctx.fillRect(x,y,20,20);
}

function move() {
	x += n;
        y += m;
  if (x > canvas.width) {
        x -= 20;
  	n = 0;
        m = 4;
  }
    if (x <  0) {
        x = 0;
  	n = 0;
        m = -4;
  }
  if (y > canvas.height) {
        y -= 20;
  	n = -4;
        m = 0;
  }
  if (y < 0) {
        y = 0;
  	n = 4;
        m = 0;
  }
  console.log(x, y);
}

function game() {
	ctx.clearRect(0,0, canvas.width, canvas.height)
  draw(x,y);
  move();
  
	requestAnimationFrame(game)
}

game();
</script>

gooodwin67 · #3 (**permalink**) 03.07.2018, 17:09

Гениально! Спасибо

j0hnik · #4 (**permalink**) 03.07.2018, 17:14

<div style="position:relative">111</div>
	<script>
var div = document.querySelector('div');
(run=()=>{
	var l = parseFloat(getComputedStyle(div).left),
	t = parseFloat(getComputedStyle(div).top);
	if(l<200 && t==0) div.style.left = l+1+'px';
	if(l==200 && t<200) div.style.top = t+1+'px';
	if(l>0 && t==200) div.style.left = l-1+'px';
	if(l==0 && t>0) div.style.top = t-1+'px';
	setTimeout(run,4);
})();

	</script>

рони · #5 (**permalink**) 03.07.2018, 17:45

gooodwin67,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  background: #232425;
  color: #ccc;
}
canvas {
  border: 1px solid #ccc;
}
  </style>

</head>

<body>
<canvas id = 'myCanvas' width = '500' height = '300'></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var n = 4;
var x = 0;
var y = 0;

function draw(x, y) {
    ctx.fillStyle = "red";
    ctx.fillRect(x, y, 20, 20)
}
var a = 0;

function move() {
 var  b = false;
    switch (a) {
        case 0:
            b = x > canvas.width - 24;
            break;
        case 1:
            b = y > canvas.height - 24;
            break;
        case 2:
            b = x < 4;
            break;
        case 3:
            b = y < 4;
            break
    }
    if (b) {
        a = ++a % 4;
        a % 2 || (n = -n)
    }
    a % 2 ? y += n : x += n
}

function game() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    draw(x, y);
    move();
    requestAnimationFrame(game)
}
game();
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript