שלום חברים. אני מבקש את עזרתכם בהכנת משחק מונופול ב-javascript.
לאחר זמן מועט ראיתי שזה חתיכת סיפור ואני צריך עזרה מרובה בעניין הלוגיקה והקידוד. אשמח לעזרת התותחים/מומחים או פשוט נלהבים ויודעי דבר ב-html, javascript וכו'.
אני כעת נמצא במצב ראשוני מאוד, סקיצה התחלתית. *לגבי css-אני לא נוגע בזה עכשיו, לאחר השלמת הבסיס הלוגי והקידוד לא תהיה בעיה כלל להוסיף עיצוב.
זה כנראה יהיה אשכול מתמשך, ואהיה זקוק לעזרה מתמשכת בנושא-אנא עזרו לי במשך התהליך הזה.
כמה שאלות/בקשות להתחלה:
- אני רוצה למקם שחקן בצורה גרפית על גבי הכפתורים, בין שהוא יהיה תמונה שאני אשמור בתיקייה של התמונות, או סתם נקודה כלשהי על הכפתור. הצלחתי למקם טקסט על כפתור ולהעביר אותו לכפתור אחר, אך לא להעלים אותו מהמיקום שלו. איך אני עושה את זה? ואיך אני עושה את זה בצורה גרפית יותר?
- אני מעוניין שהמשתמש שהגיע לכפתור מסוים(שזה בעצם עיר, כלא, רכבת או הפתעה-כמו מונופול רגיל), ייפתח לו תפריט אפשרויות שבו תינתן לו האפשרות לקנות את הרחוב, לבנות בית וכו'-זה לשלב מתקדם יותר, נכון, אבל גם זה בסופו של דבר אמור להיות.
לבינתיים אני חושב שמספיק, ונתקדם משם.
קוד ה-HTML
<html>
<head>
<link href="mon.css" rel="stylesheet"/>
<script src="mon.js">
</script>
</head>
<body >
First die:<div id="die1"></div>
Second die:<div id="die2"></div>
<button onclick ="dice()">Roll dice!</button>
<button onclick="move()">Move Player 1</button>
<button id="btop1" onclick="btop1()" disabled = "true"> City122</button>
<button id="btop2" onclick="btop2()" disabled = "true"> City1</button>
<button id="btop3" onclick="btop3()" disabled = "true"> City1</button>
<button id="btop4" onclick="btop4()" disabled = "true"> Train</button>
<button id="btop5" onclick="btop5()" disabled = "true"> City2</button>
<button id="btop6" onclick="btop6()" disabled = "true"> City2</button>
<button id="btop7" onclick="btop7()" disabled = "true"> City2</button>
<button id="btop8" onclick="btop7()" disabled = "true"> Jail</button>
<button id="btop9" onclick="btop1()" disabled = "true"> City1</button>
<button id="btop10" onclick="btop2()" disabled = "true"> City1</button>
<button id="btop11" onclick="btop3()" disabled = "true"> City1</button>
<button id="btop12" onclick="btop4()" disabled = "true"> Train</button>
<button id="btop13" onclick="btop5()" disabled = "true"> City2</button>
<button id="btop14" onclick="btop6()" disabled = "true"> City2</button>
<button id="btop15" onclick="btop7()" disabled = "true"> City2</button>
<button id="btop16" onclick="btop7()" disabled = "true"> Jail</button>
<button id="btop17" onclick="btop1()" disabled = "true"> City1</button>
<button id="btop18" onclick="btop2()" disabled = "true"> City1</button>
<button id="btop19" onclick="btop3()" disabled = "true"> City1</button>
<button id="btop20" onclick="btop4()" disabled = "true"> Train</button>
<button id="btop21" onclick="btop5()" disabled = "true"> City2</button>
<button id="btop22" onclick="btop6()" disabled = "true"> City2</button>
<button id="btop23" onclick="btop7()" disabled = "true"> City2</button>
<button id="btop24" onclick="btop7()" disabled = "true"> Jail</button>
<button id="btop25" onclick="btop1()" disabled = "true"> City1</button>
<button id="btop26" onclick="btop2()" disabled = "true"> City1</button>
<button id="btop27" onclick="btop3()" disabled = "true"> City1</button>
<button id="btop28" onclick="btop4()" disabled = "true"> Train</button>
<button id="btop29" onclick="btop5()" disabled = "true"> City2</button>
<button id="btop30" onclick="btop6()" disabled = "true"> City2</button>
<button id="btop31" onclick="btop7()" disabled = "true"> City2</button>
<button id="btop32" onclick="btop7()" disabled = "true"> Jail</button>
<button id="btop33" onclick="btop1()" disabled = "true"> City1</button>
<button id="btop34" onclick="btop2()" disabled = "true"> City1</button>
<button id="btop35" onclick="btop3()" disabled = "true"> City1</button>
<button id="btop36" onclick="btop4()" disabled = "true"> Train</button>
<button id="btop37" onclick="btop5()" disabled = "true"> City2</button>
<button id="btop38" onclick="btop6()" disabled = "true"> City2</button>
<button id="btop39" onclick="btop7()" disabled = "true"> City2</button>
<button id="btop40" onclick="btop7()" disabled = "true"> Jail</button>
<button id="btop40" onclick="btop1()" disabled = "true"> City1</button>
<button id="btop41" onclick="btop2()" disabled = "true"> City1</button>
<button id="btop42" onclick="btop3()" disabled = "true"> City1</button>
<button id="btop43" onclick="btop4()" disabled = "true"> Train</button>
<button id="btop44" onclick="btop5()" disabled = "true"> City2</button>
<button id="btop45" onclick="btop6()" disabled = "true"> City2</button>
<button id="btop46" onclick="btop7()" disabled = "true"> City2</button>
<button id="btop47" onclick="btop7()" disabled = "true"> Jail</button>
<!--<canvas id="canv" width="1550" height="700"></canvas>-->
<button id="btop48" onclick="bottom1()" disabled = "true"> City1</button>
<button id="btop49" onclick="bottom2()" disabled = "true"> City1</button>
<button id="btop50" onclick="bottom3()" disabled = "true"> City1</button>
<button id="btop51" onclick="bottom4()" disabled = "true"> Train</button>
<button id="btop52" onclick="bottom5()" disabled = "true"> City2</button>
<button id="btop53" onclick="bottom6()" disabled = "true"> City2</button>
<button id="btop54" onclick="bottom7()" disabled = "true"> City2</button>
<button id="btop55" onclick="Start()" disabled = "true"> Start</button>
</body>
</html>
קוד ה-JavaScript
pos1=1;
pos2=2;
//קנבאס שאמור להיות באמצע, מסביבו כל הכפתורים, בינתיים הוא מבוטל-בסוף פשוט נמקם אותו באמצע ונעשה על הכפתורים שמתחתיו disable.
function draw()
{
/*var canv =document.getElementById ("canv");
var ctx = canv.getContext ("2d");
ctx.fillRect (100, 100, 100, 100);}*/
}
//הטלת קוביות
function dice (){
die1 = Math.floor((Math.random() * 6) + 1);
die2 = Math.floor((Math.random() * 6) + 1);
dicesum = die1 + die2;
document.getElementById("die1").innerHTML = die1;
document.getElementById("die2").innerHTML = die2;
}
//העברה של השחקן לכפתור אחר
function move()
{
pos1=pos1+dicesum;
pos="btop"+pos1;
document.getElementById(pos).disabled = false;
content="I Am Here";
document.getElementById(pos).innerHTML=content;
oldPos();
}
function oldPos()
{
oldp=pos1-dicesum;
oldp2="btop"+oldp;
}
קוד ה-CSS(לא ממש חשוב עכשיו, לדעתי)
#canv{
/*margin-left: 550px;
margin-top: 120px;
border: 1px solid black;*/
}
#butt {
height:150px;
width:190px;
}
#Lside{
height:100px;
width:150px;
}
#Rside{
height:100px;
width:150px;
}
.top{
margin-left:150px;
}
.bottom{
margin-left:150px;
}
.right{
float:right;
}
.left{
float:left;
}
תודה רבה מראש למי שאכן ינסה לעזור לי. אני ממש לא לוקח את זה כמובן מאליו-אתם תותחים אחד אחד, באמת.
ערב טוב ולילה טוב.
נ.ב
אני מקווה שהייתי ברור. במידה ולא, אני אסביר את עצמי טוב יותר.
