Good Day, Need some help about this work of mine. This maybe is not a good one but im nourishing my skilss using jquery. How could could i duplicate that red spaceship and put it on different positions? Please help. Thank You.
and this is my Jquery to locate the red spaceship ,
var enemT = (".enemspaceship").offset().top;
var enemL = (".enemspaceship").offset().left;
Hey @Jedbartolo11,
cool idea for a game, but without seeing more of your code it is hard to determine how to help you out.
What is the container that everything is drawn into? Do you use SVG?
Use the Preformatted Text(Ctrl + Shift + C) tool to insert your code inside of a post.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link href="css/interfacestyle.css" rel="stylesheet" />
</head>
<body>
<div id="info"><br>
Stage:<span id="lvl"> 1</span><br><br>
Score:<span id="score"> 0</span><br>
<button id="start" type="button"> Start</button>
</div>
<center>
<div id="space">
<div id="lm1">
<div id="llane1" class="lm1"></div>
<div id="llane2"></div>
<div id="llane3"></div>
</div>
<div id="lm2" class="lm2move">
<div id="rlane1"></div>
<div id="rlane2"></div>
<div id="rlane3"></div>
</div>
<div class="myspaceship">
<div id="cmsStyle"></div>
<div id="l1" class="blink"></div>
<div id="l2" class="blink"></div>
<div id="l3" class="blink"></div>
<div id="l4" class="blink"></div>
<div id="l5" class="blink"></div>
</div>
<div class="enemspaceship">
<div id="ecmsStyle"></div>
<div id="el1" class="blink"></div>
<div id="el2" class="blink"></div>
<div id="el3" class="blink"></div>
<div id="el4" class="blink"></div>
<div id="el5" class="blink"></div>
<div id="el5" class="blink"></div>
</div>
</div>
</center>
<script src="js/jquery.min.js"></script>
<script src="js/mygame.js"></script>
</body>
</html>
here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link href="css/interfacestyle.css" rel="stylesheet" />
</head>
<body>
<div id="info"><br>
Stage:<span id="lvl"> 1</span><br><br>
Score:<span id="score"> 0</span><br>
<button id="start" type="button"> Start</button>
</div>
<center>
<div id="space">
<div id="lm1">
<div id="llane1" class="lm1"></div>
<div id="llane2"></div>
<div id="llane3"></div>
</div>
<div id="lm2" class="lm2move">
<div id="rlane1"></div>
<div id="rlane2"></div>
<div id="rlane3"></div>
</div>
<div class="myspaceship">
<div id="cmsStyle"></div>
<div id="l1" class="blink"></div>
<div id="l2" class="blink"></div>
<div id="l3" class="blink"></div>
<div id="l4" class="blink"></div>
<div id="l5" class="blink"></div>
</div>
<div class="enemspaceship">
<div id="ecmsStyle"></div>
<div id="el1" class="blink"></div>
<div id="el2" class="blink"></div>
<div id="el3" class="blink"></div>
<div id="el4" class="blink"></div>
<div id="el5" class="blink"></div>
<div id="el5" class="blink"></div>
</div>
</div>
</center>
<script src="js/jquery.min.js"></script>
<script src="js/mygame.js"></script>
</body>
</html>
here is my js code
type or paste code here
````$().ready(function(){
$(window).keypress(function(event){
var enemT = $(".enemspaceship").offset().top;
var enemL = $(".enemspaceship").offset().left;
var myT = $(".myspaceship").offset().top;
var myL = $(".myspaceship").offset().left;
var key = (event.keyCode);
var et2 = enemT , el2 = enemL;
if(key == 119){
up(myT,myL,enemT,enemL);
}
if(key == 97){
left(myT,myL,enemT,enemL);
}
if(key == 115){
down(myT,myL,enemT,enemL);
}
if(key == 100){
right(myT,myL,enemT,enemL);
}
if((myT <= (enemT+80) && myL <= (enemL+80))){
alert("game over");
}
});
});
function mySpaceship(){
var left = $(".enemspaceship").offset().left;
var top = $(".enemspaceship").offset().top;
console.log("left" + left);
console.log("top" + top);
}
function up(myT,myL,enemT,enemL){
var count;
var pos = $(".myspaceship").offset().top;
if(pos >= 120){
$(".myspaceship").css({"position":"absolute","top":pos-20+"px"});
console.log(pos);
}
console.log("myspace: "+ (myT+120) + " " + (myL+100));
console.log("enemspace: "+ enemT + " " + enemL);
}
function down(myT,myL,enemT,enemL){
var count;
var pos = $(".myspaceship").offset().top;
console.log(pos);
if(pos >= 110 && pos < 620){
$(".myspaceship").css({"position":"absolute","top":pos+20+"px"});
console.log(pos);
} else {
console.log('f');
}
console.log("myspace: "+ (myT+100) + " " + (myL+100));
console.log("enemspace: "+ enemT + " " + enemL);
}
function left(myT,myL,enemT,enemL){
var count;
var pos = $(".myspaceship").offset().left;
console.log(pos);
if(pos > 530){
$(".myspaceship").css({"position":"absolute","left":pos-20+"px"});
console.log(pos);
}
console.log("myspace: "+ (myT+100) + " " + (myL+100));
console.log("enemspace: "+ enemT + " " + enemL);
}
function right(myT,myL,enemT,enemL){
var count;
var pos = $(".myspaceship").offset().left;
console.log(pos);
if(pos >= 520 && pos < 900){
$(".myspaceship").css({"position":"absolute","left":pos+20+"px"});
console.log(pos);
}
console.log("myspace: "+ (myT+100) + " " + (myL+100));
console.log("enemspace: "+ enemT + " " + enemL);
}`Thanks. Unfortunately, when using codepad.remoteinterview.io, I have to cut/paste the code into one single file, so what are the contents of “css/interfacestyle.css”?
body{
background-color:aliceblue;
margin:0px;
}
#space{
padding:20px;
background-color:lightslategray;
height:718px;
width:500px;
border-right: 2px solid lightgray;
border-left: 2px solid lightgray;
}
#lm1{
position:absolute;
top:-150px;
left:670px;
}
#lm2{
position:absolute;
top:-150px;
right:670px;
}
.lm2move{
animation:lm1move linear 3000ms;
}
#llane1{
background-color:white;
position:absolute;
top:560px;
height:170px;
width:10px;
background-repeat: repeat-x;
}
#llane2{
background-color:white;
position:absolute;
top:290px;
height:170px;
width:10px;
}
#llane3{
background-color:white;
position:absolute;
height:170px;
width:10px;
}
#rlane1{
background-color:white;
position:absolute;
top:290px;
height:170px;
width:10px;
}
#rlane2{
background-color:white;
position:absolute;
top:560px;
height:170px;
width:10px;
}
#rlane3{
background-color:white;
position:absolute;
height:170px;
width:10px;
}
.myspaceship{
position:absolute;
top:630px;
left:720px;
background-color:yellow;
height:100px;
width:100px;
border-radius:100px;
border:2px solid black;
}
#cmsStyle{
position:absolute;
bottom:23px;
left:23px;
background-color:skyblue;
height:50px;
width:50px;
border-radius:100px;
border:1px solid black;
}
#l1{
position:absolute;
bottom:10px;
left:22px;
background-color:red;
height:10px;
width:10px;
border-radius:100px;
border:1px solid red;
}
#l2{
position:absolute;
bottom:10px;
right:24px;
background-color:white;
height:10px;
width:10px;
border-radius:100px;
border:1px solid white;
}
#l3{
position:absolute;
top:38px;
left:5px;
background-color:skyblue;
height:10px;
width:10px;
border-radius:100px;
border:1px solid skyblue;
}
#l4{
position:absolute;
top:35px;
right:8px;
background-color:red;
height:10px;
width:10px;
border-radius:100px;
border:1px solid red;
}
#l5{
position:absolute;
top:5px;
right:45px;
background-color:white;
height:10px;
width:10px;
border-radius:100px;
border:1px solid white;
}
/** enemy*/
.enemspaceship{
position:absolute;
top:220px;
left:530px;
background-color:red;
height:100px;
width:100px;
border-radius:100px;
border:2px solid black;
margin: 0px;
animation: rotation 1000ms linear infinite;
}
#ecmsStyle{
position:absolute;
bottom:23px;
left:23px;
background-color:skyblue;
height:50px;
width:50px;
border-radius:100px;
border:1px solid black;
}
#el1{
position:absolute;
bottom:10px;
left:22px;
background-color:yellow;
height:10px;
width:10px;
border-radius:100px;
border:1px solid yellow;
}
#el2{
position:absolute;
bottom:10px;
right:24px;
background-color:white;
height:10px;
width:10px;
border-radius:100px;
border:1px solid white;
}
#el3{
position:absolute;
top:38px;
left:5px;
background-color:skyblue;
height:10px;
width:10px;
border-radius:100px;
border:1px solid skyblue;
}
#el4{
position:absolute;
top:35px;
right:8px;
background-color:yellow;
height:10px;
width:10px;
border-radius:100px;
border:1px solid yellow;
}
#el5{
position:absolute;
top:5px;
right:45px;
background-color:white;
height:10px;
width:10px;
border-radius:100px;
border:1px solid white;
}
#info{
background-color:black;
height: 200px;
width: 200px;
position:absolute;
border-radius: 20px;
margin:250px 180px;
border:0px;
padding:25px;
color:red;
font-size:35px;
}
#start{
background-color: rgba(0,0,0,.1);
border:none;
border:1px solid red;
font-size:15px;
padding:5px 80px 5px 80px;
color:red;
}
#start:hover{
color:white;
border:1px solid white;
}
/** animation section */
.blink{
animation: blink 1500ms infinite;
}
@keyframes blink{
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
@keyframes lm1move{
from {
position:absolute;
top:-150px;
right:670px;
}
to {
position:absolute;
top:718px;
right:670px;
}
}
@keyframes rotation{
from{
transform:rotateZ(0deg);
}
to{
transform:rotateZ(360deg);
}
}
/** animation section */
My apologies. I was hoping that copying your code to remoteinterview.io, I could replicate what you’re doing and fix it.
Unfortunately, https://codepad.remoteinterview.io/MVQHHESASW is the closest I got and it’s still not working.
If there’s any place you having running/editable code, I might be able to help.
I looked over the code that you posted, and it is not easy to follow through and understand what happens where.
It seems like if you wanted to duplicate the enemyspaceship, you would need to duplicate the entire div with that class. Furthermore, you would also need to give it a specific id to differentiate it from the first enemy space ship, so you can give it a different position.
It seems to me this is a path you do not want to take as it will complicate things for you.
Have you thought about using Canvas?