در برنامه بالا من دو تا کانواس استفاده کردم، کانواس دومی حکم رادار را دارد تا بازیکن بداند کجای مسیر است.
فایل اصلی برنامه من این است:
JavaScript:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
<?php
include"my_css.php";
?>
body {background-color: #887722;}
</style>
</head>
<body onload="startGame()">
<canvas id="myCanvas" width="400" height="250" style="border:1px solid grey"></canvas>
<canvas id="myCanvas2" width="400" height="100" style="border:1px solid grey"></canvas>
<img id="img" src="../images/plane.png" alt="plane" width="30" height="10">
<img id="img2" src="../images/building2.png" alt="plane" width="30" height="9">
<img id="img3" src="../images/building3.png" alt="plane" width="30" height="9">
<img id="img4" src="../images/building4.png" alt="plane" width="30" height="9">
<p id="gamearea2"></p>
<script type='text/javascript'>
....
.....
.....
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = 370;
const canvas2 = document.getElementById("myCanvas2");
const ctx2 = canvas2.getContext("2d");
canvas2.width = window.innerWidth;
canvas2.height = 100;
var FPS = 50;
setInterval(function(){
updateGameArea();
}, 1000/FPS);
setInterval(function(){
updateGameArea2();
}, 1000/FPS);
function startGame() {
hero = new hero(73, 25 ,"red", 10,120);
hero2 = new hero2(36, 12 ,"red", 10,25);
}
</script>
<?php
include"component.php";
include"hero.php";
include"hero2.php";
include"updateGameArea.php";
include"updateGameArea2.php";
?>
<script>
function everyinterval(n) {
if ((frameNo / n) % 1 == 0) {return true;}
return false;
}
function accelerate(n) {
hero.gravity = n;
if(n==0)
{
hero.gravity = 0;
hero.gravitySpeed = 0;
}//n==0
}
</script>
<center>
<p id="the_heart"></p>
<p id="the_heart2"></p>
<button type="button" style=" font-size:35px; height:100px; width:220px" onclick="accelerate(-0.04)">up</button>
<button type="button" style=" font-size:12px; height:55px; width:120px" onclick="accelerate(0)">stop</button>
<button type="button" style=" font-size:35px; height:100px; width:220px" onclick="accelerate(0.04)">down</button>
</center>
<p>Use the up and down button to stay in the air</p>
<p>How long can you stay alive?</p>
<p id="gamearea"></p>
</body>
</html>
در قسمت html با کد زیر ، دو کانواس تعریف کردم:
HTML:
<canvas id="myCanvas" width="400" height="250" style="border:1px solid grey"></canvas>
<canvas id="myCanvas2" width="400" height="100" style="border:1px solid grey"></canvas>
و در قسمت جاوا اسکریپت از اون دو کانواس استفاده شده. کد زیر:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = 370;
const canvas2 = document.getElementById("myCanvas2");
const ctx2 = canvas2.getContext("2d");
canvas2.width = window.innerWidth;
canvas2.height = 100;
در کد بالا می بینید که کل عرض صفحه را استفاده کردم ولی طول را خودم دادم.
ولی فکر کنم بهتر است اول طول صفحه را حساب کنم و بعد درصدی از اون را برای کانواس استفاده کنم. این جوری فکر کنم در دستگاههای کوچک مشکل کمتر ایجاد بشه.
در فایلهای دیگه کانتکست من یعنی ctx قابل دسترس بود. و راحت ازش استفاده می کردم.
من بقیه فایلها را include کردم. include از دستورات php است.
در کد زیر:
JavaScript:
var FPS = 50;
setInterval(function(){
updateGameArea();
}, 1000/FPS);
setInterval(function(){
updateGameArea2();
}, 1000/FPS);
دو تابع updateGameArea1 و updateGameArea2 را به شکل دوره ای فعال کردم.
در تابع استارت:
JavaScript:
function startGame() {
hero = new hero(73, 25 ,"red", 10,120);
hero2 = new hero2(36, 12 ,"red", 10,25);
}
که تابع استارت توسط رویداد onload از body فعال میشه ، قهرمان را ساختم.
قبلادر تابع استارت ، mygamearea صدا زده میشد...ولی من mygamearea را حذف کردم و کانواس که در mygamearea ساخته میشد را همان طور که در بالا می بینید ساختم. یعنی قالب را به هم زدم.
فعلا در تابع استارت فقط دو قهرمان خلق میشه.
اینکه همه چیز دوبل است ، مثل دو قهرمان و دو تابع updateGameArea به این خاطر است که من دو تا کانواس دارم و ترجیح دادم کارهاشون جدا انجام شود.
www.freecodecamp.org
maktabkhooneh.org
