Html, CSS dan Javascript
Dalam tugas kali ini, kami mempelajari HTML, CSS dan Javascript yang merupakan unsur penting dalam pemrograman web. Dari itu kami mengimplementasikan aplikasi dari internet yang kemudian kami kembangkan sesuai dengan kemampuan kami.Aplikasi ini merupakan pengeditan ulang ( Oprek ) dari salah satu situs blogspot yang bernama Jin Toples
Berikut aplikasinya :
Source Code sebelum di Oprek :
<!DOCTYPE html>
<html>
<head>
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function() {
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var cw = 10;
var d;
var food;
var score;
var snake_array; //membuat cell aray untuk membuat ular
function init()
{
d = "right"; //default direction
create_snake();
create_food(); //membuat makanan untuk ular
//score game
score = 0;
if (typeof game_loop != "undefined")
clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}
init();
function create_snake()
{
var length = 5; //panjang ular default
snake_array = [];
for (var i = length - 1; i >= 0; i--)
{
//membuat ular horizontal mulai dari arah kiri
snake_array.push({x: i, y: 0});
}
}
//membuat makanan
function create_food()
{
food = {
x: Math.round(Math.random() * (w - cw) / cw),
y: Math.round(Math.random() * (h - cw) / cw),
};
}
//Mewarnai tubuh ular
function paint()
{
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//Membuat pergerakan untuk ular.
var nx = snake_array[0].x;
var ny = snake_array[0].y;
if (d == "right")
nx++;
else if (d == "left")
nx--;
else if (d == "up")
ny--;
else if (d == "down")
ny++;
//Cek tabakan tembok
if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array))
{
//restart game
init();
return;
}
//Cek tabrakan dengan makanan
if (nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//membuat makanan baru
create_food();
}
else
{
var tail = snake_array.pop();
tail.x = nx;
tail.y = ny;
}
snake_array.unshift(tail);
for (var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
paint_cell(c.x, c.y);
}
//Mewarnai makanan
paint_cell(food.x, food.y);
//Mewarnai score game
var score_text = "Score: " + score;
ctx.fillText(score_text, 5, h - 5);
}
function paint_cell(x, y)
{
ctx.fillStyle = "blue";
ctx.fillRect(x * cw, y * cw, cw, cw);
ctx.strokeStyle = "white";
ctx.strokeRect(x * cw, y * cw, cw, cw);
}
function check_collision(x, y, array)
{
for (var i = 0; i < array.length; i++)
{
if (array[i].x == x && array[i].y == y)
return true;
}
return false;
}
//Keyboard control ular
$(document).keydown(function(e) {
var key = e.which;
if (key == "37" && d != "right")
d = "left";
else if (key == "38" && d != "down")
d = "up";
else if (key == "39" && d != "left")
d = "right";
else if (key == "40" && d != "up")
d = "down";
})
})
</script>
</head>
<body>
<!-- HTML5 canvas untuk lokasi game -->
<canvas id="canvas" width="450" height="450"></canvas>
</body>
</html>
Source Code setelah di Oprek :
<!DOCTYPE html>
<html>
<head>
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function() {
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var cw = 10;
var d;
var food;
var score;
var snake_array; //membuat cell aray untuk membuat ular
function init()
{
d = "right"; //default direction
create_snake();
create_food(); //membuat makanan untuk ular
//score game
score = 0;
if (typeof game_loop != "undefined")
clearInterval(game_loop);
game_loop = setInterval(paint, 120);
}
init();
function create_snake()
{
var length = 3; //panjang ular default
snake_array = [];
for (var i = length - 1; i >= 0; i--)
{
//membuat ular horizontal mulai dari arah kiri
snake_array.push({x: i, y: 0});
}
}
//membuat makanan
function create_food()
{
food = {
x: Math.round(Math.random() * (w - cw) / cw),
y: Math.round(Math.random() * (h - cw) / cw),
};
}
//Mewarnai tubuh ular
function paint()
{
ctx.fillStyle = "brown";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//Membuat pergerakan untuk ular.
var nx = snake_array[0].x;
var ny = snake_array[0].y;
if (d == "right")
nx++;
else if (d == "left")
nx--;
else if (d == "up")
ny--;
else if (d == "down")
ny++;
//Cek tabakan tembok
if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array))
{
alret("Score anda : "+score);
//restart game
init();
return;
}
//Cek tabrakan dengan makanan
if (nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//membuat makanan baru
create_food();
}
else
{
var tail = snake_array.pop();
tail.x = nx;
tail.y = ny;
}
snake_array.unshift(tail);
for (var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
paint_cell(c.x, c.y);
}
//Mewarnai makanan
paint_cell(food.x, food.y);
//Mewarnai score game
var score_text = "Score: " + score;
ctx.fillText(score_text, 5, h - 5);
}
function paint_cell(x, y)
{
ctx.fillStyle = "green";
ctx.fillRect(x * cw, y * cw, cw, cw);
ctx.strokeStyle = "black";;
ctx.strokeRect(x * cw, y * cw, cw, cw);
}
function check_collision(x, y, array)
{
for (var i = 0; i < array.length; i++)
{
if (array[i].x == x && array[i].y == y)
return true;
}
return false;
}
//Keyboard control ular
$(document).keydown(function(e) {
var key = e.which;
if (key == "37" && d != "right")
d = "left";
else if (key == "38" && d != "down")
d = "up";
else if (key == "39" && d != "left")
d = "right";
else if (key == "40" && d != "up")
d = "down";
})
})
</script>
</head>
<body>
<!-- HTML5 canvas untuk lokasi game -->
<canvas id="canvas" width="450" height="450"></canvas>
</body>
</html>