Anda di halaman 1dari 3

MEMBUAT APLIKASI SEDERHANA DENGAN HTML

Coding Block:
<!DOCTYPE html> <body>
<html> <canvas width="400" height="400"
<head> id="game"></canvas>
<title></title> <script>
<style> var canvas =
html, body { document.getElementById('game');
height: 100%; var context = canvas.getContext('2d');
margin: 0;
} var grid = 16;
var count = 0;
body {
background: black; var snake = {
display: flex; x: 160,
align-items: center; y: 160,
justify-content: center; dx: grid,
} dy: 0,
canvas { cells: [],
border: 1px solid white; maxCells: 4
} };
</style> var apple = {
</head> x: 320,
y: 320
}; if (snake.cells.length > snake.maxCells)
{
function getRandomInt(min, max) { snake.cells.pop();
return Math.floor(Math.random() * }
(max - min)) + min;
} context.fillStyle = 'red';
context.fillRect(apple.x, apple.y, grid-1,
function loop() { grid-1);
requestAnimationFrame(loop);
if (++count < 4) { context.fillStyle = 'green';
return; snake.cells.forEach(function(cell,
} index) {
count = 0;
context.fillRect(cell.x, cell.y, grid-1,
context.clearRect(0,0,canvas.width,canv grid-1);
as.height);
if (cell.x === apple.x && cell.y ===
snake.x += snake.dx; apple.y) {
snake.y += snake.dy; snake.maxCells++;
apple.x = getRandomInt(0, 25) * grid;
if (snake.x < 0) { apple.y = getRandomInt(0, 25) * grid;
snake.x = canvas.width - grid; }
}
else if (snake.x >= canvas.width) {
snake.x = 0; for (var i = index + 1; i <
} snake.cells.length; i++) {

if (cell.x === snake.cells[i].x && cell.y


if (snake.y < 0) { === snake.cells[i].y) {
snake.y = canvas.height - grid; snake.x = 160;
} snake.y = 160;
else if (snake.y >= canvas.height) { snake.cells = [];
snake.y = 0; snake.maxCells = 4;
} snake.dx = grid;
snake.cells.unshift({x: snake.x, y: snake.dy = 0;
snake.y});
apple.x = getRandomInt(0, 25) * }
grid;
apple.y = getRandomInt(0, 25) * else if (e.which === 39 && snake.dx
grid; === 0) {
} snake.dx = grid;
} snake.dy = 0;
}); }
}
else if (e.which === 40 && snake.dy
document.addEventListener('keydown', === 0) {
function(e) { snake.dy = grid;
if (e.which === 37 && snake.dx === 0) { snake.dx = 0;
snake.dx = -grid; }
snake.dy = 0; });
}
requestAnimationFrame(loop);
else if (e.which === 38 && snake.dy </script>
=== 0) { </body>
snake.dy = -grid; </html>
snake.dx = 0;

Tugas :
1. Ketik script diatas dan simpan kedalam format HTML
2. Tulis Tag Dasar HTML diatas yang tidak anda fahami fungsi / kegunaannya
3. Silahkan browsing untuk mengetahui fungsi / kegunaannyaTAG HTML yang anda
tulis tadi.
4. Kumpulkan dalam format word (.doc) atau pdf kirim ke WA (Pak Iril)

Anda mungkin juga menyukai