Движение по квадрату)
Вот такое могу сделать(чтобы квадрат двигался из стороны в сторону) https://jsfiddle.net/gooodwin67/5opf17y2/1/
Но вот что-то ума не приложу как сделать чтобы дойдя до правой стенки квадрат пошел вниз, дойдя до низу пошел в лево, потом в верх, вправо и т д. |
<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>
|
Гениально! Спасибо
|
<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>
|
canvas движение по периметру
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>
|
| Часовой пояс GMT +3, время: 03:18. |