Cara Membuat Game Dengan HTML5, CSS, dan JavaScript
Ternyata hanya dengan 3 bahasa kita bisa Membuat Game Dengan HTML5, CSS, dan JavaScript secara simple dan mudah tentunya, seperti posting kali ini yang akan membahasa tentang hal tersebut. Seperti yang kita tahu bahwa HTML5 merupakan versi terakhir dari HyperText Markup Language, untuk belajar lebih mendalam dan step by step bisa mengunjungi website w3school, disan diulas secara mendetail satu persatu dari syntax html5.
Game ini merupakan game yang sangat simple, namun tentu saja bisa dikembangin sesuai dengan selera agar bisa menjadi lebih bagus lagi dan lebih powerful tentunya untuk mengembangkannya hal yang utama yang harus diubah adalah pada bagian Javascript, karena js lah yang menentukan Statistik game tersebut.
Oke kita langsung saja pada cara Membuat Game Dengan HTML5, CSS, dan JavaScript, Perhatikan beberapa Kode dibawah ini dan simpan sesuai petunjuk. atau bisa juga disimpan dengan nama sesuai selera, namun jangan lupa untuk menyesuaikan pemanggilan namanya dibagian Index.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src='script.js'></script>
<title>Game HTML5, CSS, JavaScript</title>
</head>
<body>
<div id='info'>
<div id='instructions'>Hello and welcome to my game T.I Sniper !!
<br/>Premis sederhana, Gunakan mouse Anda untuk mengumpulkan blok hijau sebanyak yang Anda bisa
<br/>The Rules:
<br/>1. Kumpulkan titik-titik hijau
<br/>2. Hindari titik merah
<br/>3. Titik hijau membuat kolektor Anda bertambah besar
<br/>4. Titik merah membuat kolektor Anda bertambah kecil
<br/>5. Anda kehilangan Nyawa untuk setiap blok merah yang Anda tekan
<br/>6. Setelah Anda mengumpulkan 30 blok Anda maju ke tingkat berikutnya (mempercepat dan lebih titik)
<br/>7. Setelah setiap tingkat Anda mendapatkan kehidupan baru
<br/>8. Kumpulkan titik-titik biru untuk mendapatkan kehidupan ekstra
<br/>9. Kehilangan semua kehidupan Anda dan GAME OVER.....
<br/><br/>
<div id='begin'>Start</div>
</div>
</div>
<div id='frame'>
<div id='title'>How high can you get?</div>
<div id='inner'>
<div id ='other'><div id='box'></div></div>
<div class='good'></div>
<div class='bad'></div>
<div class='ugly'></div>
</div>
</div>
<div id='left'>
<div id='clock'>
<div id='top'>
<div id='mins'>Minutes</div>
<div id='secs'>Seconds</div>
</div>
<div id='bottom'></div>
</div>
<div id='score'>
Score :<br/> 000000
</div>
<div id='button'>
<div id='lives'>Lives</div>
<div id='boxLeft'>Boxes Left</div>
<div id='level'>level</div>
<div id='easy'>Easy</div>
<div id='hard'>Hard</div>
<div id='extreme'>Extreme</div>
<div id='start'>Play</div>
<div id='stop'>Stop</div>
</div>
</div>
</body>
</html>
Simpan
kode diatas dengan nama index.html, kemudian lanjut pada kode berikutnya
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
max-height:500px;
background-image: url('http://static.hdw.eweb4.com/media/thumbs/1/13/123999.jpg');
}
#info{
position:relative;
z-index: 4;
width: 100%;
height: 100%;
background-color: black;
opacity:0.9;
color: white;
}
#instructions{
position:relative;
top:20%;
text-align: center;
}
#begin{
position: relative;
cursor: pointer;
border-radius: 20px;
margin: 0 auto;
width: 10%;
background-color: red;
text-align: center;
}
#frame{
position:absolute;
top:4%;
left:2%;
width:58%;
height:91%;
background: black;
border: 2px solid black;
cursor:none;
}
#inner{
position: relative;
left:10px;
width:95%;
height:95%;
}
#box{
position:relative;
top:80%;
width:20px;
height:3%;
background-color: #add123;
border-radius: 10px;
}
#left{
position: absolute;
left: 62%;
top:5%;
width: 35%;
height:90%;
border: 1px solid red;
}
#clock{
position:relative;
top:0;
left:0;
height:30%;
width:100%;
border: 1px solid red;
background:black;
}
#top{
position:relative;
top:0;
left:0;
height:50%;
width:99%;
}
#mins{
padding-top:12%;
color:white;
position:relative;
top:0;
left:0;
height:30%;
width:48%;
float:left;
text-align:center;
font-size:190%;
}
#secs{
padding-top:12%;
color:white;
position:relative;
top:0;
left:0;
width: 48%;
height:30%;
float: right;
text-align:center;
font-size:190%;
}
#bottom{
color:white;
text-align:center;
font-size: 300%;
}
#score{
color:white;
text-align:center;
font-size:300%;
border: 1px solid red;
background-color:black;
height:30.1%;
text:center;
}
#title{
color:red;
width:100%;
font-size:200%;
text-align:center;
background:black;
}
#button{
position:relative;
background:black;
width:100%;
height:38.9%
}
#easy{
position:absolute;
left:4%;
top:60%;
width:28%;
height:12%;
background-color:blue;
text-align:center;
cursor: pointer;
border-radius:10px;
}
#hard{
position:absolute;
left:37%;
top:60%;
width:28%;
height:12%;
background-color:red;
text-align:center;
cursor: pointer;
border-radius:10px;
}
#extreme{
position:absolute;
left:70%;
top:60%;
width:28%;
height:12%;
background-color:red;
text-align:center;
cursor: pointer;
border-radius:10px;
}
#start{
position:absolute;
left:55%;
top:80%;
width:40%;
height:15%;
background-color:#add123;
text-align:center;
cursor: pointer;
border-radius:10px;
}
#stop{
position:absolute;
left:5%;
top:80%;
width:40%;
height:15%;
background-color:#add123;
text-align:center;
cursor: pointer;
border-radius:10px;
}
#boxLeft{
position:relative;
top: 5px;
color: white;
float: left;
width: 50%;
text-align:center;
font-size: 150%;
}
#level{
position: relative;
top: 5px;
color: white;
float: right;
width: 20%;
font-size: 150%;
text-align:center;
}
#lives{
position: relative;
top: 5px;
color: white;
float: right;
width: 20%;
text-align:center;
font-size: 150%;
}
.good{
width:20px;
height:20px;
/*background-color:#add123;*/
position:absolute;
top:-200px;
}
.newBlock{
width:20px;
height:20px;
background-color:#add123;
background-image :url( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9Rmc290ZpjfCdOeLaSfF9Eu-hEMwQ2eqUx8QK3Z6aD5nr_OkB');
position:absolute;
top:-50px;
background-size: 100% 100%;
border-radius: 1000000px;
}
.bad{
width:20px;
height:20px;
background-color:red;
position:absolute;
top:-200px;
}
.badBlock{
width:20px;
height:20px;
background-color:red;
position:absolute;
top:-50px;
border-radius: 1000000px;
}
.ugly{
width:20px;
height:20px;
background-color:yellow;
position:absolute;
top:-200px;
}
.lifeBlock{
width:20px;
height:20px;
background-image :url('http://static3.wikia.nocookie.net/__cb20120809232436/fantendo/images/3/37/NSMBWii1upMushroom.png');
background-color:blue;
background-size: 100% 100%;
position:absolute;
top:-50px;
border-radius: 1000000px;
}
.hidden {
display:none;
}
#other{
height:91%;
margin: 0 auto;
}
Simpan kode css dengan nama style.css, kemudian lanjut lagi pada kode yang selanjutnya yang merupakan kode terakhir
$(document).ready(function() {
//sets the variables
var sec=0;
var min=0;
var limit= 300;
var limitBad= 400;
var speed=3000;
var score=0;
var boxLeft=30;
var level=1;
var lives= 5;
var mouseoff = 13;
///removes the instructions
$('#begin').click(function(){
$('#info').slideUp(1000);
})
//sets the dificulty by changing the variables
$('#easy').click(function(){
speed=3000;
limit=300;
limitBad= 400;
$('#easy').css('background-color','blue');
$('#hard').css('background-color','red');
$('#extreme').css('background-color','red');
});
$('#hard').click(function(){
speed=2000;
limit=200;
limitBad= 300;
$('#easy').css('background-color','red');
$('#hard').css('background-color','blue');
$('#extreme').css('background-color','red');
});
$('#extreme').click(function(){
speed=1000;
limit=100;
limitBad= 200;
$('#easy').css('background-color','red');
$('#hard').css('background-color','red');
$('#extreme').css('background-color','blue');
});
var box = $("#box");
var boxSize = {
height: box.height(),
width : box.width()
};
//sets the timer
$('#bottom').html(min+":"+sec);
//colision in the game
function testCollision(position1, size1, position2, size2, el) {
if (((position1.left + size1.width) > position2.left) &&
((position1.top + size1.height) > position2.top) &&
((position2.left + size2.width) > position1.left) &&
((position2.top + size2.height) > position1.top)) {
// BadaBoom !
if(el.hasClass('newBlock')){
score++;
boxLeft--;
$('#score').html('Score :<br/>'+ score);
$('#boxLeft').html('Boxes left :<br/>'+ boxLeft);
el.remove();
$('#box').css("width","+=10px");
boxSize.width= boxSize.width+10;
mouseoff+=5
$('#other').css('width','-=10px')
} else if(el.hasClass('badBlock')) {
score--;
lives--;
$('#score').html('Score :<br/>'+ score);
el.remove();
$('#box').css("width","-=10px");
boxSize.width= boxSize.width-10;
$('#lives').html('Lives :<br/>'+ lives);
mouseoff-=5
$('#other').css('width','+=10px')
}else if (el.hasClass('lifeBlock')) {
lives++;
el.remove();
$('#lives').html('Lives :<br/>'+ lives);
};
if(boxLeft ==0){
level++;
speed-=200;
limit-=10;
limitBad-=10;
lives++;
boxLeft=30;
$('#box').css('width','20px');
boxSize.width= 20;
$('#level').html('Level :<br/>'+ level);
$('#lives').html('Lives :<br/>'+ lives);
clearInterval(dropBox);
clearInterval(baddropBox);
mouseoff=13
$('#other').css('width','100%')
//calls function again calls function again
function fallBlock(el){
el.animate({ 'top': '90%' },speed, function(){$(this).remove();});
}
dropBox = setInterval(function(){
var new_block = $('.good').clone().addClass('newBlock').addClass('col').removeClass('good').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.good'));
fallBlock(new_block);
},limit);
//inserts the bad bricks
baddropBox = setInterval(function(){
var badBlock = $('.bad').clone().addClass('badBlock').addClass('col').removeClass('bad').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.bad')); fallBlock(badBlock);
},limitBad);
}
if (lives==0) {
clearInterval(myCounter);
clearInterval(dropBox);
clearInterval(baddropBox);
clearInterval(lifedropBox);
$('#bottom').html(min+":"+sec);
$('#box').css('width','20px');
$('#score').html('Score :<br/>'+ score+'<br/> GAME OVER');
$('.col').remove();
boxSize.width= 20;
$('#easy').click();
min=0;
sec=0;
mouseoff=13
$('#other').css('width','100%')
};
}
}
//starts the game
$('#start').click(function(){
//resets variables
score=0;
boxLeft=30;
level=1;
lives= 5;
$('#score').html('Score :<br/>'+ score);
$('#lives').html('Lives :<br/>'+ lives);
//detects collision
$('#level').html('level :<br/>'+ level);
$('#boxLeft').html('Boxes left :<br/>'+ boxLeft);
//sets the box catcher movement
$('#other').mousemove(function(event) {
$('#box').offset({left: (event.pageX-mouseoff)});
});
// clock timer
myCounter = setInterval(function () {
if(sec<59){
sec += 1;
$('#bottom').html(min+":"+sec);}
else{
min+=1;
sec-=59;
$('#bottom').html(min+":"+sec);
}
}, 1000);
function fallBlock(el){
el.animate({ 'top': '90%' },speed, function(){$(this).remove();});
}
//inserts new good blocks
dropBox = setInterval(function(){
var new_block = $('.good').clone().addClass('newBlock').addClass('col').removeClass('good').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.good'));
fallBlock(new_block);
},limit);
//inserts the bad bricks
baddropBox = setInterval(function(){
var badBlock = $('.bad').clone().addClass('badBlock').addClass('col').removeClass('bad').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.bad'));
fallBlock(badBlock);
},limitBad);
//inserts the lives blocks
lifedropBox = setInterval(function(){
var lifeBlock = $('.ugly').clone().addClass('lifeBlock').addClass('col').removeClass('ugly').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.ugly'));
fallBlock(lifeBlock);
},5000);
});
collisionBox=setInterval(function(){$('.col').each(function(){
var new_blockSize = {height: $(this).height(), width: $(this).width()};
// calls the function
testCollision(box.position(), boxSize, $(this).position(), new_blockSize,$(this));
});},10)
//stops the game
$('#stop').click(function(){
min=0;
sec=0;
clearInterval(myCounter);
clearInterval(dropBox);
clearInterval(baddropBox);
clearInterval(lifedropBox);
$('#bottom').html(min+":"+sec);
$('#box').css('width','20px');
$('#easy').click();
boxSize.width= 20;
$('.col').remove();
mouseoff=13
$('#other').css('width','100%')
});
});
Simpan kode diatas dengan nama script.js nah bergitulah kira-kira kode lengkap dari cara Membuat Game Dengan HTML5, CSS, dan JavaScript pada kali ini. Untuk demonya silahkan menuju link dibawah ini: Game
Disclaimer: gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami di halaman ini.