So verschieben Sie ein Bild zufällig, wenn Sie mit HTML und Javascript auf das andere Bild klicken
Ich bin ein Anfänger mit Javascript. Ich habe zwei Bilder. Eine dient zum Klicken und die andere zum zufälligen Verschieben von 10 Pixel nach links und rechts. Sobald ich auf das Bild "high5" klicke, muss sich das Bild "pic2" zufällig in eine beliebige Richtung bewegen, die nicht mehr als 10 Pixel beträgt. Jeder Klick wird zur Punktzahl hinzugefügt, um am Ende eine Gesamtpunktzahl zu generieren. Ich stecke an diesem Punkt fest und weiß nicht, wohin ich gehen soll. Kann mir bitte jemand helfen? Wie Sie sehen können, habe ich meinen Code bearbeitet. Ich habe immer noch Probleme in:
- Erstellen einer Anzeigetafel, um zu verfolgen, wie viele Klicks der Benutzer innerhalb von 30 Sekunden angeklickt hat.
- Ich brauche einen Timer, der 30 Sekunden zählt.
- Jedes Mal, wenn sich das Bild in der Mitte bewegt, geht es nach links.
HTML Quelltext:
<!DOCTYPE html>
<!-- game.html
Uses game.js
Illustrates visibility control of elements
-->
<html lang="en">
<head>
<title>Visibility control</title>
<meta charset="utf-8" />
</head>
<body>
<div id="score">
0
</div>
<div id="high5" style="position: relative; left: 10px;">
<img onclick= "moveImg(); clicked();" src="pics/high5.jpg"
style="height:250px; width:250px; " alt="Minion High Five" />
</div>
<div id="pic2" style="position: relative; top: 20px; left: 650px;">
<img src="pics/pic2.gif" style="height:250px; width:350px;"/>
</div>
<script type="text/javascript" src="game.js" ></script>
</body>
</html>
Javascript:
var x = 0;
var y = 0;
var timer = 30;
var count = 0;
var isDone = true;
function moveImg() {
x += Math.floor(Math.random() * 20) - 10;
y += Math.floor(Math.random() * 20) - 10;
pic2.style.left = x + "px";
pic2.style.top = y + "px";
if(timer > 0) {
setTimeout("moveImg()", 50);
timer--;
}
else {
timer = 30;
}
}
function clicked() {
timer = 30;
count++;
score.innerHTML = count;
}
Versuchen Sie etwas wie dieses: Verwenden onclickSie es nicht in HTML. Ich habe einen jquery-Teil hinzugefügt, wenn Sie ihn nicht entsprechend ändern müssen, oder lassen Sie es mich wissen.
var high5,myVar;
$(function(){
$("img").on("click",function(){
console.log($(this));
if($(this).data('id') == "minion"){
high5=document.getElementById('pic2');
high5.style.left="10px";
moveImg();
}
});
setInterval(function(){ myStopFunction(); }, 3000);//call to stop shacking after 3000 miliseconds.
});
function moveImg() {
//alert("hi");
var x;
x = Math.floor(Math.random()*4)+1;
left = parseInt(high5.style.left.replace('px', ''));
console.log(x+ "," +left);
if (x==4 && left >= 10) {
high5.style.left = (left - 10) + 'px';;
}
if (x==3 && left <= 650) {
high5.style.left = (left + 10) + 'px';
}
if (x==2 && left >= 10) {
high5.style.left = (left - 10) + 'px';;
}
if (x==1 && left <= 450) {
high5.style.left = (left + 10) + 'px';
}
myVar = setTimeout(function(){moveImg();},100);
}
function myStopFunction() {
clearTimeout(myVar);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "high5" style = "position: absolute;">
<img src="pics/high5.jpg" style="height:250px; width:250px;
margin-top: 50px; margin-left: 50px; border:none;"
alt="Minion High Five" data-id="minion"/>
</div>
<div id = "pic2" style=" position: absolute; width:350px;height:250px;margin-left: 550px;border:1px solid black;margin-top:150px;">
<img src="pics/pic2.gif" style="width:350px;height:250px;" alt="Minion High Five"/>
</div>