Spaces:
Running
Running
File size: 2,802 Bytes
21e61c6 f115e64 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html>
<html>
<head>
<title>Snakes Game in A-Frame</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<!-- Step 8: Finishing Touches - Add Instructions and Key Map -->
<div>
<h1>Instructions:</h1>
<p>Use the arrow keys to control the snake. Eat the red food box to grow!</p>
<h2>Key Map:</h2>
<ul>
<li>Arrow Up: Move Up</li>
<li>Arrow Down: Move Down</li>
<li>Arrow Left: Move Left</li>
<li>Arrow Right: Move Right</li>
</ul>
</div>
<a-scene>
<!-- Step 3: Create the Game Board -->
<a-box id="game-board" position="0 0 -5" rotation="0 0 0" color="#4CC3D9" depth="10" height="10" width="10"></a-box>
<!-- Initialize Snake -->
<a-box id="snake-head" position="0 0 -4" rotation="0 0 0" color="green" depth="1" height="1" width="1"></a-box>
</a-scene>
<script>
// Step 4: Implementing Snake Movement
let x = 0;
let y = 0;
let z = -4;
let direction = 'right'; // initial direction
let snakeHead = document.getElementById('snake-head');
document.addEventListener('keydown', function(event) {
if (event.code === 'ArrowUp') { direction = 'up'; }
if (event.code === 'ArrowDown') { direction = 'down'; }
if (event.code === 'ArrowLeft') { direction = 'left'; }
if (event.code === 'ArrowRight') { direction = 'right'; }
});
function moveSnake() {
if (direction === 'up') { y = Math.min(4, y + 1); }
if (direction === 'down') { y = Math.max(-4, y - 1); }
if (direction === 'left') { x = Math.max(-4, x - 1); }
if (direction === 'right') { x = Math.min(4, x + 1); }
snakeHead.setAttribute('position', `${x} ${y} ${z}`);
}
// Step 5: Adding Food Items (simplified, one food item)
let food = document.createElement('a-box');
food.setAttribute('id', 'food');
food.setAttribute('position', '2 2 -4');
food.setAttribute('color', 'red');
food.setAttribute('depth', '1');
food.setAttribute('height', '1');
food.setAttribute('width', '1');
document.querySelector('a-scene').appendChild(food);
// Step 6: Game Logic (simplified)
function checkCollision() {
let foodPosition = food.getAttribute('position');
let snakeHeadPosition = snakeHead.getAttribute('position');
if (foodPosition.x === snakeHeadPosition.x && foodPosition.y === snakeHeadPosition.y) {
// Implement growth and scoring logic here
alert('You ate the food!');
}
}
// Game Loop
setInterval(function() {
moveSnake();
checkCollision();
}, 500);
</script>
</body>
</html> |