<!DOCTYPE html>
<html>
<body onkeydown="press(event)" onload="press(event)">
<div id="score"> </div>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>
<div id="mytext"> </div>
<script>
let x1 = 0;
let y1 = 0;
let coordX = [];
let score = 0;
for (let index = 0 ; index<25;index++){
coordX[index] = Math.floor(Math.random() * Math.floor(2));
}
let obj_position = 0;
let counter = 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){
let txt = document.getElementById("score");
txt.innerHTML = "Очки "+score;
board();
if (event.code =='KeyR' && coordX[counter]==0){
score++;
ctx.clearRect(0,0,500,500);
ctx.fillStyle = 'red';
ctx.fillRect(x1, y1, 100, 100);
board();
let txt = document.getElementById("mytext");
txt.innerHTML = "Правильно красный цвет!!!";
}
if (event.code =='KeyR' && coordX[counter]==1){
score--;
}
if (event.code =='KeyG' && coordX[counter]==1){
score++;
ctx.clearRect(0,0,500,500);
ctx.fillStyle = 'green';
ctx.fillRect(x1, y1, 100, 100);
board();
let txt = document.getElementById("mytext");
txt.innerHTML = "Правильно зеленый цвет!!!";
}
if (event.code =='KeyG' && coordX[counter]==0){
score--;
}
if (event.code =='KeyQ'){
counter++;
obj_position++;
x1 = x1 + 100;
if (obj_position== 5)
{
x1 = 0;
obj_position=0;
y1 = y1 + 100;
}
ctx.clearRect(0,0,500,500);
ctx.fillStyle = 'black';
ctx.fillRect(x1, y1, 100, 100);
board();
let txt = document.getElementById("mytext");
txt.innerHTML = "";
}
if (counter == 25){
let txt = document.getElementById("mytext");
txt.innerHTML = "Вы достигли конца!!!";
}
}
</script>
</body>
</html>
| 