1
Köstebeğin görüntüsünü tıklatmaya çalışıyorum ve bir kez tıklandığında skor artacak ancak .on() görüntünün sınıf adıyla çalışmaz. Bununla birlikte, "#gamespace" seçicisini kullanıyorum, ancak oyun alanının içindeki herhangi bir yere tıklamak, yalnızca köstebek tıklamak yerine oyuncu puanlarını alacaktır. o #gamespace eklenir ve önce .mole üzerinde click event handler ekliyoruzJquery .on() çağrıyı seçmiyor
<!DOCTYPE html>
<html>
<head>
<title>Whack-A-Mole (CSCI2447)</title>
<!-- CSS styles: This is for me to worry about; not you. -->
<link href="css/game.css" rel="stylesheet" />
<script src="js/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
var score = 0
var time = 30
var t;
var moleRepeat;
$(document).ready(function(){
$('#start_button').click(function(){
start();
});
$('.mole').on('click' , function() {
counter();
});
});
function getYRandomNumber(){
return Math.floor((Math.random()*300)+0);
};
function getXRandomNumber(){
return Math.floor((Math.random()*600)+0);
};
function counter() {
score++;
$("#score").html(score + ' pts');
};
function start() {
$('#timer').show();
addMole();
decrement();
$('h1').css("color","purple");
$('#gamespace').css("background-color", "green");
};
function decrement() {
time--;
$('#timer').html(time + ' seconds left');
t = setTimeout('decrement()', 1000);
};
function addMole() {
$('#gamespace').append('<img class="mole" src="img/mole.png" onClick="counter()"/>');
moleRepeat = setTimeout('addMole()', 2000);
};
</script>
</head>
<body>
<div id="content">
<h1>Whack-A-Mole</h1>
<p>After clicking "start", you will have 30 seconds to click
as many moles as you can. The moles appear randomly so be ready! </p>
<div id="controls">
<span id="score">0 pts</span>
<button type="button" id="start_button">Start!</button>
</div>
<div id="timer">30 seconds left</div>
<div id="gamespace">
</div>
</div>
</body>
</html>
Bunu yaptı! Utanç verici basit ama sadece düşünmedim-açıkça bu konuda çok yeni. Teşekkür ederim!!! – ecooper10