window.onload = function() {
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var currentPos = 0;
function getSquare() {
var pos = Math.floor(Math.random() * (640 - 1) + 1);
return pos;
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function animate() {
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth);
ctx.fillRect(0, currentPos, 20, 20);
currentPos += 1;
if(currentPos >= canvas.clientHeight) {
currentPos = 0;
choosenPos = getSquare();
ctx.fillStyle= getRandomColor();
}
requestAnimationFrame(animate);
}
start.addEventListener("click", animate);
};
<doctype html>
<html>
<head>
<title> Qualium Systems Javascript test task </title>
<script type="text/javascript" src="main.js"></script>
<style>
canvas {
background: yellow;
}
</style>
</head>
<body>
<div>
<button id="start"> Start </button>
<button id=""> Stop </button>
<span> Score: <span id="score"> 0 </span> </span>
</div>
<canvas width="640" height="480" id="canvas"></canvas>
</body>
</html>
<doctype html>
<html>
<head>
<title> Qualium Systems Javascript test task </title>
<script type="text/javascript" src="main.js"></script>
<style>
canvas {
background: yellow;
}
</style>
</head>
<body>
<div>
<button id="start"> Start </button>
<button id=""> Stop </button>
<span> Score: <span id="score"> 0 </span> </span>
</div>
<canvas width="640" height="480" id="canvas"></canvas>
</body>
</html>
window.onload = function() {
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var currentPos = 0;
function getSquare() {
var pos = Math.floor(Math.random() * (640 - 1) + 1);
return pos;
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function animate() {
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth);
ctx.fillRect(0, currentPos, 20, 20);
currentPos += 1;
if(currentPos >= canvas.clientHeight) {
currentPos = 0;
choosenPos = getSquare(); //??? не работает
ctx.fillStyle= getRandomColor();
}
requestAnimationFrame(animate);
}
start.addEventListener("click", animate);
};
Хочу сделать чтоб квадрат появлялся в другом месте после исчезновения за нижней границей. Подскажите пожалуйста что не так.