<!DOCTYPE html>
<html>
<body onkeydown="myfunc1()" onload="myfunc1()">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
</canvas>
<script>
let xObj_1 = 0;
let yObj_1 = 0;
let size = 10;
let xObj_2 = Math.floor(Math.random() * 290);
let yObj_2 = Math.floor(Math.random() * 290);
Math.floor(Math.random() * 10);
function myfunc1(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
if (event.code == 'KeyQ' && xObj_1 > 0) {
xObj_1 -= 10;
}
if (event.code == 'KeyW' && xObj_1 < 300) {
xObj_1 += 10;
}
if (event.code == 'KeyO' && yObj_1 > 0) {
yObj_1 -= 10;
}
if (event.code == 'KeyP' && yObj_1 < 300) {
yObj_1 += 10;
}
if (xObj_1+10 >= xObj_2+10 && xObj_1+10 <= xObj_2+size+10 && yObj_1+10 >= yObj_2+10 && yObj_1+10 <= yObj_2+size+10){
alert("Хочу еще и еще жрать");
size = size + 5;
xObj_2 = Math.floor(Math.random() * 290);
yObj_2 = Math.floor(Math.random() * 290);
}
ctx.clearRect(0,0,300,300);
ctx.fillStyle = "red";
ctx.fillRect(xObj_1, yObj_1,size, size);
ctx.fillRect(xObj_2, yObj_2,size, size);
}
</script>
</body>
</html>
| 