Jangan lupa install dulu react Js dan gunakan ini di App.js
import React, { useState, useEffect } from 'react';
const Snake = () => {
const [snakeDots, setSnakeDots] = useState([
[0, 0], // starting position of snake
]);
const [direction, setDirection] = useState('RIGHT');
useEffect(() => {
const moveSnake = () => {
let dots = [...snakeDots];
let head = dots[dots.length - 1];
switch (direction) {
case 'RIGHT':
head = [head[0] + 2, head[1]];
break;
case 'LEFT':
head = [head[0] - 2, head[1]];
break;
case 'UP':
head = [head[0], head[1] - 2];
break;
case 'DOWN':
head = [head[0], head[1] + 2];
break;
default:
break;
}
dots.push(head);
dots.shift();
setSnakeDots(dots);
};
const gameInterval = setInterval(moveSnake, 100); // Moves snake every 100ms
return () => clearInterval(gameInterval);
}, [snakeDots, direction]);
const handleKeyDown = (e) => {
switch (e.key) {
case 'ArrowUp':
setDirection('UP');
break;
case 'ArrowDown':
setDirection('DOWN');
break;
case 'ArrowLeft':
setDirection('LEFT');
break;
case 'ArrowRight':
setDirection('RIGHT');
break;
default:
break;
}
};
return (
<div className="snake-game" onKeyDown={handleKeyDown} tabIndex="0">
{snakeDots.map((dot, index) => (
<div
key={index}
style={{
position: 'absolute',
left: `${dot[0]}px`,
top: `${dot[1]}px`,
width: '10px',
height: '10px',
backgroundColor: 'green',
}}
></div>
))}
</div>
);
};
export default Snake;
Hallo Guys, 😀 Traktir kami di sini agar channel ini berkembang dengan baik :
Komentar
Posting Komentar