moritz/project-x
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

(wip) Add snake game
All checks were successful
moritz/project-x/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Markus Köbele
2023-12-04 19:29:55 +01:00
parent 4b1024f5ab
commit 63ba1db4c0
2 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/snake.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%">
<head>
<meta charset="UTF-8">
<title>Snake</title>
<script src="snake.js"></script>
</head>
<body onload="run()" style="width: 95%; height: 95%">
<canvas id="welt" width="400" height="400"></canvas>
</body>
</html>

97
src/snake.js Normal file
View File

@@ -0,0 +1,97 @@
var y = 70
var x = 70;
var direction = "none"
function run() {
document.addEventListener("keydown", (event) => {
if (event.key == "ArrowRight") {
direction = "right"
}
if (event.key == "ArrowLeft") {
direction = "left"
}
if (event.key == "ArrowDown") {
direction = "down"
}
if (event.key == "ArrowUp") {
direction = "up"
}
});
update()
}
async function update() {
controle()
checkeating()
draw()
await new Promise(() => setTimeout(update, 0.033333));
}
function checkeating() {
// x = 70
// y = 70
if (x > 150 && x < 220) {
if (y > 150 && y < 220) {
console.log("yummy")
}
}
if (x + 100 > 150 && x + 100 < 220) {
if (y > 150 && y < 220) {
console.log("yummy")
}
}
if (x + 100 > 150 && x + 100 < 220) {
if (y + 100 > 150 && y + 100 < 220) {
console.log("yummy")
}
}
if (x > 150 && x < 220) {
if (y + 100 > 150 && y + 100 < 220) {
console.log("yummy")
}
}
}
function controle() {
if (direction == "right") {
x = x + 0.08
}
if (direction == "left") {
x = x - 0.08
}
if (direction == "down") {
y = y + 0.08
}
if (direction == "up") {
y = y - 0.08
}
}
function draw() {
const canvas = document.getElementById("welt");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "lightGreen"
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = "purple";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(x, y, 100, 100)
ctx.fillStyle = "yellow"
ctx.fillRect(150, 150, 70, 70)
}