Bismilah
Lama tidak
posting kali ini saya akan membagikan game ular atau game snake sebenarnya game
ini bukan buatan saya namun dengan game ini saya banyak belajar ok langsung
saja Let,s go pertama apa saja yang di
butuhkan tentunya file jquery.min.js setelah itu kita buat file dengan nama
index.hml lalu pastekan kode di bawah
<!DOCTYPE html>
<html>
<head>
<title> Snake Game
</title>
<link
rel="stylesheet" href="snake.css">
<!-- jQuery -->
<script src="jquery.min.js"
type="text/javascript"></script>
<style>
#container {
margin: auto;
width: 600px;
}
#myCanvas {
background-color: black;
border: 3px white solid;
}
#gameover {
position : absolute;
top: 200px;
left: 600px;
font-size: 25px;
text-align: center;
color: #FFFFFF;
display: none;
}
#score {
width: 600px;
height: 100px;
margin: auto;
background-color: white;
border: 3px black solid;
color: black;
-webkit-box-shadow:0 0 20px #000;
-moz-box-shadow: 0 0 20px
#000;
box-shadow:0 0 20px
#000;
padding-left:5px;
}
#current, #highest {
font-size : 25px;
color: black;
text-align: center;
}
a {
text-decoration: none;
color : #FFFFFF;
background-color:
#9c27b0;
padding-left:5px;
padding-right:5px;
border-radius: 7px;
}
a:hover{
text-decoration: none;
color : #FFFFFF;
background-color:
#673ab7;
padding-left:5px;
padding-right:5px;
border-radius: 7px;
}
span {
color : #FFFFFF;
}
</style>
<script>
$(document).ready(function() {
var canvas =
$("#myCanvas")[0];
var ctx =
canvas.getContext("2d");
var w =
$("#myCanvas").width();
var h =
$("#myCanvas").height();
var cw = 15;
var food;
var snake;
var d =
"RIGHT";
var gameloop =
setInterval(update, 100);
function update() {
if (d ==
"RIGHT")
snake.x = snake.x + 1;
else if (d ==
"LEFT")
snake.x = snake.x - 1;
else if (d ==
"UP")
snake.y = snake.y - 1;
else if (d ==
"DOWN")
snake.y = snake.y + 1;
check_borders();
check_food();
blank();
paint_cell(food.x,
food.y, "grey");
paint_cell(snake.x,
snake.y, "green");
}
function showGameOver() {
var current =
$('#current').text();
$('#final').text(current);
$('#gameover').fadeIn();
}
function
updateHighScore() {
var current =
$("#current").text();
var highest =
$("#highest").text();
if (parseInt(current)
> parseInt(highest)) {
$('#highest').text(current)
}
}
function placeFood() {
food = {
x :
Math.round(Math.random()*(w-cw)/cw),
y :
Math.round(Math.random()*(h-cw)/cw)
}
}
function placeSnake() {
snake = {
x :
Math.round(Math.random()*(w-cw)/cw),
y :
Math.round(Math.random()*(h-cw)/cw)
}
}
function blank(){
//Paint The Canvas
ctx.fillStyle =
"black";
ctx.fillRect(0, 0, w,
h);
ctx.strokeStyle =
"white";
ctx.strokeRect(0, 0, w,
h);
}
function check_borders()
{
if (snake.x < 0 ||
snake.x > (w-cw)/cw || snake.y < 0 || snake.y > (h-cw)/cw) {
clearInterval(gameloop);
showGameOver();
}
}
function paint_cell(x,y,
color){
ctx.fillStyle=color;
ctx.fillRect(x*cw,y*cw,cw,cw);
ctx.strokeStyle="white";
ctx.strokeRect(x*cw,y*cw,cw,cw);
}
function check_food() {
if (food.x == snake.x
&& food.y == snake.y) {
var current =
parseInt($('#current').text());
current += 1;
$('#current').text(current);
placeFood();
}
}
placeFood();
paint_cell(food.x,
food.y, "grey");
placeSnake();
paint_cell(snake.x,
snake.y, "green");
//Keyboard Controller
$(document).keydown(function(e){
//39: RIGHT
//37: LEFT
//38: UP
//40: DOWN
var key = e.which;
if(key ==
"37") {
snake.x -= 1;
d = "LEFT";
}
else if(key ==
"38") {
snake.y -= 1;
d = "UP";
}
else if(key ==
"39") {
snake.x += 1;
d = "RIGHT";
}
else if(key ==
"40") {
snake.y += 1;
d = "DOWN";
}
check_food();
blank();
color =
"grey";
paint_cell(food.x,
food.y);
color =
"green";
paint_cell(snake.x,
snake.y);
});
});
</script>
</head>
<body>
<div
id="container">
<div
id="gameover">
Game over!
<br>
skor kamu <span
id="final"></span>
<br>
<a
onClick="window.location.reload()" href="#">klik untuk
main lagi</a>
</div>
<canvas
id="myCanvas" width="600" height="450">
Your browser does not
support the canvas feature
</canvas>
<div
id="score">
<div>skor
kamu:<span id="current">0</span>
</div>
<div>gunakan
panah ke kiri kanan atas dan bawah untuk menggerakan <span
id="highest"></span>
</div>
</div>
</div>
</body>
</html>
Cukup sekian
postingan kali ini semoga bermanfaat untuk source codenya silahkan download di sini
0 Komentar