Merhaba, bu kod çalışmıyor Gerçekten neden emin değilim, bazı insanlara aptal gelebilir, ancak bu yüzden jQuery oldukça yeniyim . My JSfiddle
bunu yapmak için ne gerekiyor bir temel açıklamasıdır:
Start Up başlatma düğmesine Bu
çalışır < < tıklayarak 'sınırından dairesel olduğu daha önce gizlenmiş dairesel div göster -radius:% 100 'CSS kodu dahil edilmiştir. < < Bu
Up sahip div hareket edin Works, Aşağı, Sol ve Sağ < < Bu anda benim sorunum eser
DEĞİL yapar. Bu göreve dahil ettiğim 3 dosyanın hepsine ekledim.
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src = 'script.js'></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='runner'></div>
<div id='start'>START!</div>
</body>
</html>
CSS
body{
background-color: black;
}
#runner {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 100%;
position:relative
left: 0;
top: 0;;
}
#start{
background-color: red;
border-radius: 6px;
color: white;
font-family:arial black;
text-align: center;
font-size: 48px;
width:200px;
height:75px;
position: absolute;
top:50%;
left:50%;
margin: -100px 0 0 -32.5px;
text-align: center;
}
JavaScript Kod
var main = function()
{
var $runner = $('#runner');
var $start = $('#start');
// STARTUP
$runner.hide();
$start.mouseenter(function(){
$start.css('width', '210px');
$start.css('height', '80px');
});
$start.mouseleave(function(){
$start.css('width', '200px');
$start.css('height', '75px');
});
$start.click(function(){
$start.hide();
$runner.show();
$(document).keydown(function(key){
switch(parseInt(key.which,10)) {
// Left arrow key pressed
case 37:
$('#runner').animate({left: "-=10px"}, 1);
break;
// Up Arrow Pressed
case 38:
// Put our code here
$('#runner').animate({top: "-=10px"}, 1);
break;
// Right Arrow Pressed
case 39:
// Put our code here
$('#runner').animate({left: "+=10px"}, 1);
break;
// Down Arrow Pressed
case 40:
// Put our code here
$('#runner').animate({top: "+=10px"}, 1);
break;
}
})
});
// STARTUP FINISHED
// GAME
}
$(document).ready(main);
Yani bu benim kod ve ben gerçekten neden çalışmadığını emin değilim. Neden olmasın diye bir şey yok mu?
Sorunu görebileceğinizi düşünüyorsanız ya da bunu yapmanın alternatif bir yolunu biliyorsanız, lütfen düşüncelerinizi yanıtlayın. Sadece çıktıyı gösteren bir JSfiddle bağlantısı ekledim:My JSfiddle
Teşekkürler.
+ Vincent G Çok unutkan hissediyorum. Cevabınız için teşekkür ederim. Bir tesadüfi eklemiş olmalıyım; üstüne :) – Guy
Bir şey değil! Tam olarak evet. Çok küçük bir hata, JS kodu iyi çalışıyor :) –
+ Vincent G Eğer sorabilirsem, ekrandan ayrılan div sorununa nasıl yaklaşmanızı önerirsiniz? Ekranın alanından çıkmasına izin vermek istemiyorum. Baska öneri? – Guy