53 lines
1.2 KiB
HTML
53 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" style="width: 100%; height: 100%">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Spiel 1</title>
|
|
<script>
|
|
var y = 10
|
|
var x = 170;
|
|
|
|
function run (){
|
|
draw();
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
|
|
if(event.key == "ArrowRight"){
|
|
x = x + 10;
|
|
console.log(x)
|
|
draw()
|
|
}
|
|
if(event.key == "ArrowLeft"){
|
|
x = x - 10;
|
|
console.log(x)
|
|
draw()
|
|
} if(event.key == "ArrowDown"){
|
|
y = y + 10;
|
|
console.log(x)
|
|
draw()
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
function draw() {
|
|
console.log("hi");
|
|
const canvas = document.getElementById("welt");
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
ctx.fillStyle = "DeepSkyBlue";
|
|
ctx.fillRect(10, 10, 150, 150);
|
|
|
|
ctx.fillStyle = "red";
|
|
ctx.fillRect(x, y, 150 , 150)
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="run()" style="width: 100%; height: 100%">
|
|
<canvas id="welt" width="1000" height="1000"></canvas>
|
|
</body>
|
|
</html>
|