Resim Hareketlendirme
<html>
<head>
<title>java</title>
</head>
<body onkeypress="HareketEt(this,-1)">
<script type="text/javascript">
<
function HareketEt(Resim, Gidis){
for(i=0; i<10; i++){
ResminYeri=parseInt(Resim.style.left);
if(!ResminYeri) ResminYeri=0;
Resim.style.left = ResminYeri + i*Gidis + "px";
}
}
//>
</script>
<img src="resimler/3.gif" width="10%" height="10%" style="position:absolute;" onmouseover="HareketEt(this,1)" />
</body>
</html>
<head>
<title>java</title>
</head>
<body onkeypress="HareketEt(this,-1)">
<script type="text/javascript">
<
function HareketEt(Resim, Gidis){
for(i=0; i<10; i++){
ResminYeri=parseInt(Resim.style.left);
if(!ResminYeri) ResminYeri=0;
Resim.style.left = ResminYeri + i*Gidis + "px";
}
}
//>
</script>
<img src="resimler/3.gif" width="10%" height="10%" style="position:absolute;" onmouseover="HareketEt(this,1)" />
</body>
</html>
Örnek 2
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2012/11/28/10/16/stars-67616_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#UGemi {
position: absolute;
}
</style>
<script>
var Adim = 10;
var y=0, x =0;
function TusaBasildi(event) {
BasilanTusNo = event.keyCode;
//alert(BasilanTusNo); //basılan tusun nosu
switch(BasilanTusNo) {
case 38 : y-=Adim; break; //yukarı tus
case 40 : y+=Adim; break; //asagi tus
case 37 : x-=Adim; break; //sol tus
case 39 : x+=Adim; break; //sag tus
}
//console.log(x);
document.getElementById('UGemi').style.top = y + 'px';
document.getElementById('UGemi').style.left = x + 'px';
}
</script>
</head>
<body onkeydown="TusaBasildi(event)">
<img src="resimler/rocket.gif" id="UGemi" />
</body>
</html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2012/11/28/10/16/stars-67616_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#UGemi {
position: absolute;
}
</style>
<script>
var Adim = 10;
var y=0, x =0;
function TusaBasildi(event) {
BasilanTusNo = event.keyCode;
//alert(BasilanTusNo); //basılan tusun nosu
switch(BasilanTusNo) {
case 38 : y-=Adim; break; //yukarı tus
case 40 : y+=Adim; break; //asagi tus
case 37 : x-=Adim; break; //sol tus
case 39 : x+=Adim; break; //sag tus
}
//console.log(x);
document.getElementById('UGemi').style.top = y + 'px';
document.getElementById('UGemi').style.left = x + 'px';
}
</script>
</head>
<body onkeydown="TusaBasildi(event)">
<img src="resimler/rocket.gif" id="UGemi" />
</body>
</html>
Örnek
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body,html{
height: 750px;
}
#araba{
background-image: url('https://fakeimg.pl/100x100/?text=araba');
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="araba"></div>
</body>
<script>
var ust = 50;
var left = 50;
window.addEventListener('keydown',function(e){
var tus = e.keyCode;
console.log(tus);
switch (tus){
case 37:
left-=10;
// alert(left);
break;
case 38:
ust-=10;
// alert(ust);
break;
case 39:
left+=10;
// alert(left);
break;
case 40:
ust+=10;
// alert(ust);
break;
default:
break;
}
document.getElementById('araba').style.top = ust+'px';
document.getElementById('araba').style.left = left+'px';
})
</script>
</html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body,html{
height: 750px;
}
#araba{
background-image: url('https://fakeimg.pl/100x100/?text=araba');
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="araba"></div>
</body>
<script>
var ust = 50;
var left = 50;
window.addEventListener('keydown',function(e){
var tus = e.keyCode;
console.log(tus);
switch (tus){
case 37:
left-=10;
// alert(left);
break;
case 38:
ust-=10;
// alert(ust);
break;
case 39:
left+=10;
// alert(left);
break;
case 40:
ust+=10;
// alert(ust);
break;
default:
break;
}
document.getElementById('araba').style.top = ust+'px';
document.getElementById('araba').style.left = left+'px';
})
</script>
</html>
Örnek
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0px;
padding: 0px;
width: 100vw;
height: 100vh;
background-image: url("arkaplan.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column-reverse;
}
.ucak{
width: 170px;
height: 170px;
background-image: url("ucak.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-left: 870px;
position: absolute;
}
.ates{
width: 20px;
height: 50px;
background-image: url("ates.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.dusman{
}
</style>
</head>
<body>
<script>
let ucakx = 870;
dusmanlar();
let ucak = document.createElement("div");
ucak.style.width = "170px";
ucak.style.height = "170px";
ucak.style.backgroundImage = `url("ucak.png")`;
ucak.style.backgroundSize = "cover";
ucak.style.backgroundRepeat = "no-repeat";
ucak.style.backgroundPosition = "center";
ucak.style.position = "absolute";
ucak.style.marginLeft = ucakx + "px";
document.body.appendChild(ucak);
function dusmanlar(){
let dusman = document.createElement("div")
dusman.style.width = "170px";
dusman.style.height = "170px";
dusman.style.backgroundImage = `url("dusman.png")`;
dusman.style.backgroundSize = "cover";
dusman.style.backgroundRepeat = "no-repeat";
dusman.style.backgroundPosition = "center";
dusman.style.position = "absolute";
dusman.style.marginBottom = 780 + "px";
dusman.style.marginLeft = 20 + "px";
document.body.appendChild(dusman);
}
document.body.addEventListener("keydown", function(e){
if (e.key == "Enter") {
ates();
}
if (e.key == "a") {
ucakx -= 10;
ucak.style.marginLeft = ucakx + "px";
}
if (e.key == "d") {
ucakx += 10;
ucak.style.marginLeft = ucakx + "px";
}
})
function ates(){
let y = 190;
let mermi = document.createElement("div");
mermi.style.width = "30px";
mermi.style.height = "60px";
mermi.style.backgroundImage = `url("ates.png")`;
mermi.style.backgroundSize = "cover";
mermi.style.backgroundRepeat = "no-repeat";
mermi.style.backgroundPosition = "center";
mermi.style.position = "absolute";
mermi.style.left = (ucakx + 70) + "px";
mermi.style.bottom = y + "px";
document.body.appendChild(mermi);
setInterval(function(){
y += 10;
mermi.style.bottom = y + "px";
},50)
}
</script>
</body>
</html>
