Mungkin anda pernah mendengar collision / tabrakan..
yaa materi ini berguna bagi anda yang ingin mendalami pembuatan game..
awalny saya membaca tutorial2 namun aplikasi pembuatan sudah lumayan sulit untuk dimengerti
disini saya akan mencoba memberi sedikit penjelasan
tabrakan terjadi minimal antara 2 buah objek..
untuk mengetahui terjadi tabrakan kita kita harus mengetahu kedua posisi objek tersebut..
maka kita harus tau koordinat pada tiap-tiap sudut object .. dimana tiap-tiap sudut tersebut akan membentuk garis pembatas tabrakan..
ini ilustrasinya
coba liat source nya lalu copy ke editormu
<html>
<head>
<style>
body{
padding:0px;
margin:0px;
}
#badan{
width:900px;
height:625px;
margin:auto;
border: 5px green solid;
background-color: orange;
}
#mobil{
width:100px;
height:100px;
background-color:blue;
position:absolute;
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px red solid;
}
#lahan{
width:100px;
height:100px;
background-color:yellow;
font-size:20pt;
margin-left:200px;
margin-top:200px;
}
#status{
font-size:20pt;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var kepala=4;
var mesin;
var posisiM;
var posisiL;
$(document).ready(function() {
$(this).keydown(function(e){
tombol = e.keyCode;
jalan(tombol);
});
$(this).keydown(function(e){
tombol = e.keyCode;
if(tombol=="74"){
$('#mobil').stop();
posisiMobil();
posisiLahan();
status();
}
});
});
function jalan(tombol) {
if(tombol=="68"){
kepala++;
if(kepala==5)
kepala=1;
}
else if(tombol=="65"){
kepala--;
if(kepala==0)
kepala=4;
}
if(kepala==4){
$('#mobil').css({"border-top":"1px black solid","border-left":"1px black solid","border-right":"1px black solid","border-bottom":"1px red solid" });
if(tombol=="87"){
mesin=$('#mobil').animate({top:'+=100px'},'slow',function(){
posisiMobil();
posisiLahan();
status();
});
}}
else if(kepala==1){
$('#mobil').css({"border-top":"1px black solid","border-left":"1px red solid","border-right":"1px black solid","border-bottom":"1px black solid" });
if(tombol=="87"){
mesin=$('#mobil').animate({left:'-=100px'},'slow',function(){
posisiMobil();
posisiLahan();
status();
});
}}
else if(kepala==2){
$('#mobil').css({"border-top":"1px red solid","border-left":"1px black solid","border-right":"1px black solid","border-bottom":"1px black solid" });
if(tombol=="87"){
mesin=$('#mobil').animate({top:'-=100px'},'slow',function(){
posisiMobil();
posisiLahan();
});
}}
else if(kepala==3){
$('#mobil').css({"border-top":"1px black solid","border-left":"1px black solid","border-right":"1px red solid","border-bottom":"1px black solid" });
if(tombol=="87"){
mesin=$('#mobil').animate({left:'+=100px'},'slow',function(){
posisiMobil();
posisiLahan();
status();
});
}}
}
function posisiMobil(){
var p = $( "#mobil" );
positionM = p.offset();
$( "#posisiM" ).text( "left: " + positionM.left + ", top: " + positionM.top );
}
function posisiLahan(){
var s = $( "#lahan" );
positionL = s.offset();
$( "#posisiL" ).text( "left: " + (positionL.left )+ ", top: " + (positionL.top) );
}
function status(){
if((positionM.left>positionL.left-115 && positionM.top>positionL.top-115)){
$( "#status" ).text( "Status Terditeksi Sesuatu Benda diSekitar Anda" );
if((positionM.left>positionL.left-105 && positionM.top>positionL.top-104))
$( "#status" ).text( "Status Tertabrak" );
if(positionM.left>positionL.left+100)
$( "#status" ).text( "Status Terditeksi Sesuatu Benda diSekitar Anda" );
if(positionM.top>positionL.top+100)
$( "#status" ).text( "Status Terditeksi Sesuatu Benda diSekitar Anda" );
if(positionM.left>positionL.left+115)
$( "#status" ).text( "Aman" );
if(positionM.top>positionL.top+115)
$( "#status" ).text( "Aman" );
}
else{
$( "#status" ).text( "Status Aman" );}
}
</script>
</head>
<body>
<div id="badan">
<div id="lahan">lahan</div>
<center>PosisiMobil =><span id="posisiM">left: 000, top: 000</span><br/>
PosisiLahan =><span id="posisiL">left: 000, top: 000</span><br>
<span id="status">Status Aman</span>
</center>
<div id="mobil">Mobil</div>
</div>
</body>
</html>
yaa materi ini berguna bagi anda yang ingin mendalami pembuatan game..
awalny saya membaca tutorial2 namun aplikasi pembuatan sudah lumayan sulit untuk dimengerti
disini saya akan mencoba memberi sedikit penjelasan
tabrakan terjadi minimal antara 2 buah objek..
untuk mengetahui terjadi tabrakan kita kita harus mengetahu kedua posisi objek tersebut..
maka kita harus tau koordinat pada tiap-tiap sudut object .. dimana tiap-tiap sudut tersebut akan membentuk garis pembatas tabrakan..
ini ilustrasinya
coba liat source nya lalu copy ke editormu
<html>
<head>
<style>
body{
padding:0px;
margin:0px;
}
#badan{
width:900px;
height:625px;
margin:auto;
border: 5px green solid;
background-color: orange;
}
#mobil{
width:100px;
height:100px;
background-color:blue;
position:absolute;
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px red solid;
}
#lahan{
width:100px;
height:100px;
background-color:yellow;
font-size:20pt;
margin-left:200px;
margin-top:200px;
}
#status{
font-size:20pt;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var kepala=4;
var mesin;
var posisiM;
var posisiL;
$(document).ready(function() {
$(this).keydown(function(e){
tombol = e.keyCode;
jalan(tombol);
});
$(this).keydown(function(e){
tombol = e.keyCode;
if(tombol=="74"){
$('#mobil').stop();
posisiMobil();
posisiLahan();
status();
}
});
});
function jalan(tombol) {
if(tombol=="68"){
kepala++;
if(kepala==5)
kepala=1;
}
else if(tombol=="65"){
kepala--;
if(kepala==0)
kepala=4;
}
if(kepala==4){
$('#mobil').css({"border-top":"1px black solid","border-left":"1px black solid","border-right":"1px black solid","border-bottom":"1px red solid" });
if(tombol=="87"){
mesin=$('#mobil').animate({top:'+=100px'},'slow',function(){
posisiMobil();
posisiLahan();
status();
});
}}
else if(kepala==1){
$('#mobil').css({"border-top":"1px black solid","border-left":"1px red solid","border-right":"1px black solid","border-bottom":"1px black solid" });
if(tombol=="87"){
mesin=$('#mobil').animate({left:'-=100px'},'slow',function(){
posisiMobil();
posisiLahan();
status();
});
}}
else if(kepala==2){
$('#mobil').css({"border-top":"1px red solid","border-left":"1px black solid","border-right":"1px black solid","border-bottom":"1px black solid" });
if(tombol=="87"){
mesin=$('#mobil').animate({top:'-=100px'},'slow',function(){
posisiMobil();
posisiLahan();
});
}}
else if(kepala==3){
$('#mobil').css({"border-top":"1px black solid","border-left":"1px black solid","border-right":"1px red solid","border-bottom":"1px black solid" });
if(tombol=="87"){
mesin=$('#mobil').animate({left:'+=100px'},'slow',function(){
posisiMobil();
posisiLahan();
status();
});
}}
}
function posisiMobil(){
var p = $( "#mobil" );
positionM = p.offset();
$( "#posisiM" ).text( "left: " + positionM.left + ", top: " + positionM.top );
}
function posisiLahan(){
var s = $( "#lahan" );
positionL = s.offset();
$( "#posisiL" ).text( "left: " + (positionL.left )+ ", top: " + (positionL.top) );
}
function status(){
if((positionM.left>positionL.left-115 && positionM.top>positionL.top-115)){
$( "#status" ).text( "Status Terditeksi Sesuatu Benda diSekitar Anda" );
if((positionM.left>positionL.left-105 && positionM.top>positionL.top-104))
$( "#status" ).text( "Status Tertabrak" );
if(positionM.left>positionL.left+100)
$( "#status" ).text( "Status Terditeksi Sesuatu Benda diSekitar Anda" );
if(positionM.top>positionL.top+100)
$( "#status" ).text( "Status Terditeksi Sesuatu Benda diSekitar Anda" );
if(positionM.left>positionL.left+115)
$( "#status" ).text( "Aman" );
if(positionM.top>positionL.top+115)
$( "#status" ).text( "Aman" );
}
else{
$( "#status" ).text( "Status Aman" );}
}
</script>
</head>
<body>
<div id="badan">
<div id="lahan">lahan</div>
<center>PosisiMobil =><span id="posisiM">left: 000, top: 000</span><br/>
PosisiLahan =><span id="posisiL">left: 000, top: 000</span><br>
<span id="status">Status Aman</span>
</center>
<div id="mobil">Mobil</div>
</div>
</body>
</html>
