<!DOCTYPE html>
<html>
<body onkeydown="press(event)" onload="press(event)">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>
<div id="mytext"> </div>
<script>
let x1 = 0;
let y1 = 400;
let coordX = [];
for (let index = 0 ; index<5;index++){
coordX[index] = Math.floor(Math.random() * Math.floor(5))*100;
}
let obj_position = 0;
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.fillRect(x1, y1, 100, 100);
function board(){
ctx.beginPath();
for (let y = 0; y < 500; y += 100) {
ctx.moveTo(0, y);
ctx.lineTo(500, y);
}
for (let x = 0; x < 500; x += 100) {
ctx.moveTo(x, 0);
ctx.lineTo(x, 500);
}
ctx.stroke();
}
function press(event){
board();
if (event.code =='KeyZ' && x1 <=300){
x1 = x1 + 100;
ctx.clearRect(0,0,500,500);
ctx.fillRect(x1, y1, 100, 100);
board();
}
if (event.code =='KeyX' && x1 >= 100){
x1 = x1 - 100;
ctx.clearRect(0,0,500,500);
ctx.fillRect(x1, y1, 100, 100);
board();
}
if (event.code =='KeyQ'){
if (coordX[obj_position] == x1)
{
let txt = document.getElementById("mytext");
txt.innerHTML = "Вы врезались!!!";
}
y1 = y1 - 100;
ctx.clearRect(0,0,500,500);
ctx.fillRect(x1, y1, 100, 100);
board();
obj_position++;
}
if (obj_position == 4){
let txt = document.getElementById("mytext");
txt.innerHTML = "Вы достигли конца!!!";
}
}
</script>
</body>
</html>
| 