<!DOCTYPE html>
<html>
<body onkeydown="key_handler()" onload="myfunc1()">
<canvas id="myCanvas" width="300" height="500" style="border:1px solid #d3d3d3;">
</canvas>
<p id="myout"></p>
<script>
var x = 150;
var y = 290;
var speedX = 1;
var speedY = 1;
var direction = 0;
var xObj_1 = 0;
var yObj_1 = 0;
var xObj_2 = 0;
var yObj_2 = 490;
var counter = 1;
var status = 1;
function myfunc1(){
let playGame = setInterval(function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0,0, 300,500);
ctx.fillStyle = "black";
ctx.fillRect(x,y,10,10);
if (x<=0 || x+10 >=300)
{
speedX = -speedX;
}
if (y<=0 || y+10 >=500)
{
speedY = -(speedY+1);
}
counter++;
y+=speedY;
x+=speedX;
ctx.fillStyle = "red";
ctx.fillRect(xObj_1, yObj_1,100, 10);
ctx.fillRect(xObj_2, yObj_2,100,10);
var c = document.getElementById("myout");
myout.innerHTML = "x =" + x + " y = " + y + " Счетчик = " + counter;
},5);
}
function collision() {
if (xObj_1+100 > x &&
xObj_1 < x+10 &&
yObj_1+10 > y &&
yObj_1 < y+10) {
return true;
}
else {
return false;
}
}
function collision2() {
if (xObj_2+100 > x &&
xObj_2 < x+10 &&
yObj_2+10 > y &&
yObj_2 < y+10) {
return true;
}
else {
return false;
}
}
function key_handler(){
if (event.code == 'KeyQ' && xObj_1 > 0) {
xObj_1 -= 5;
}
if (event.code == 'KeyW' && xObj_1 < 200) {
xObj_1 += 5;
}
if (event.code == 'KeyO' && xObj_2 > 0) {
xObj_2 -= 5;
}
if (event.code == 'KeyP' && xObj_2 < 200) {
xObj_2 += 5;
}
}
</script>
</body>
</html>
| 