<!DOCTYPE html>
<html>
<body onkeydown="myfunc1()" onload="myfunc1()">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
</canvas>
<p id="coordinateX1"></p>
<p id="coordinateY1"></p>
<p id="coordinateX2"></p>
<p id="coordinateY2"></p>
<script>
let xObj_1 = 0;
let yObj_1 = 0;
let size = 25;
let xObj_2 = Math.floor(Math.random() * 25)*10;
let yObj_2 = Math.floor(Math.random() * 25)*10;
function myfunc1(){
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
if (event.code == 'KeyQ' && xObj_1 > 0) {
xObj_1 -= 5;
}
if (event.code == 'KeyW' && xObj_1 < 300) {
xObj_1 += 5;
}
if (event.code == 'KeyO' && yObj_1 > 0) {
yObj_1 -= 5;
}
if (event.code == 'KeyP' && yObj_1 < 300) {
yObj_1 += 5;
}
if(collision()){
alert("Хочу еще и еще жрать");
size = size + 5;
xObj_2 = Math.floor(Math.random() * 25)*10;
yObj_2 = Math.floor(Math.random() * 25)*10;
}
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);
let p1 = document.getElementById("coordinateX1");
p1.innerHTML = "координата игрока X " + xObj_1;
let p2 = document.getElementById("coordinateY1");
p2.innerHTML = "координата игрока Y " + yObj_1;
let p3 = document.getElementById("coordinateX2");
p3.innerHTML = "координата объекта X " + xObj_2;
let p4 = document.getElementById("coordinateY2");
p4.innerHTML = "координата объекта Y " + yObj_2;
}
function collision(){
let result1 = false;
let result2 = false;
if (xObj_1 == xObj_2) result1 = true;
if (yObj_1 == yObj_2) result2 = true;
if (result1&&result2) return true;
return false;
}
</script>
</body>
</html>
| 