Sudden Death! is a fighting game made with HTML Canvas & JavaScript - thomasjvu/sudden-death
github.com
سبک بازی مورتال کامبت یا taken.
با کلیدهای کیبورد در کامپیوتر بازی میشه. نمی دونم کار می کنه یا نه.
کدهایش را خوندم. فایل اصلی جاوا اسکریپتش ۴۰۰ خط داره. کلی از کدها در مورد کلیدهای زده شده از دو بازیکن است.
یک کلاس اسپریت دارد و یک کلاس fighter از اون کلاس به ارث رسیده. به ارث رسیده یعنی مشخصات اون کلاس را داره و یک چیزهای دیگه بهش افزوده می تونه بشه.
نمی دونم در حال حاضر توانایی این را دارم که دکمه هایی بهش اضافه کنم تا بشه در گوشی باهاش بازی کرد.
اگر کسی بخواهد بازی به سبک مورتال کامبت بسازد ، یا سبک taken ... خوب شاید این سورس بهش ایده بدهد.
نمی تونم بگم این بازی در حد سطح این صفحه این تاپیک هست یا نه. برای بعضی خوانندگان این تاپیک شاید خیلی سورس ساده ای باشد.
دوست دارم بعدا بتونم یک بازی در این سبک بسازم.
Football video game project. Technologies and languages used: HTML, CSS and JS. Own learning. - Dev-Zisko/MaskBallGame-Jun21-2020
github.com
این بازی ، روش کدهایش خیلی خیلی شبیه اون بازی اسپانیایی زبان کاکتوس است
که در اون تاپیک رویش بحث کردیم ولی کلمات انگلیسی است.
نویسنده اش ، نویسنده همان بازی است. یعنی با یک قالب دو بازی ساخته ، یکی با کلمات اسپانیایی و یکی با کلمات انگلیسی.
جهت اطلاع بگم که در قاره آمریکا ، به جز کانادا و ایالات متحده ، خیلی از کشورها زبانشان اسپانیایی است. به جز برزیل که زبانش پرتقالی است.
در آمریکای جنوبی ، به جز برزیل ، اکثرا زبانشان اسپانیایی است.
بازی زیر هم سورس خوبی دارد برای کار. افراد علاقه مند می توانند روی این سورس کار کنند.
صفحه بالا ، سایت بازیها است
فعلا لیست بازیها را دارد.
بعدا قابلیت های دیگری ممکن است افزوده شود.
ثبت نامش امروز که ۲۴ اسفند ۱۴۰۲ است خرابه. ممکنه بعدا درستش کنم.
شاید بعدا سیستم ثبت امتیاز روی بازیها اضافه کنم اگر خدا یاری کند.
این پست تاریخش قدیمی تر از ۲۴ اسفند ۱۴۰۲ بود و لینک یک سایت دیگر در این پست بود. اون سایت بالا نمی آید ، اون سایت را به لینک بالا منتقل کردم امروز. و در حال کار بر سایت جدید هستم.
این پست حکم تابلو اعلانات برای کسانی است که هنوز به صفحات بعدی نرسیده اند.
I'm creating a simple web based game using the HTML5 canvas and JavaScript. I currently have some images displayed on the canvas, each representing items found in a fast food restaurant. I also hav...
من اومدم شبیه score یک type برای قهرمان قائل شدم به نام hero و در کلاس componentدر قسمت update یک if باز کردم ، گفتم اگر type از نوع hero بود عکس نمایش بده.
JavaScript:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
#the_heart {
border:3px solid #fff733;
border-radius:25px;
font-size:20px;
margin-right:150px;
margin-left:150px;
padding-top:3px;
padding-bottom:3px;
padding-left:30px;
background-color:rgba(250,130,30,1);
}
</style>
</head>
<body onload="startGame()">
<img id="plane" src="images/plane33.jpg" alt="plane" width="10" height="10">
<script type='text/javascript'>
var myGamePiece;
var myObstacles = [];
var myScore;
let heart=1000;
function startGame() {
myGamePiece = new component(2, 2, "red", 10, 120 , "hero");
myGamePiece.gravity = 0.05;
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.score = 0;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.gravity = 0;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else if(this.type=="hero")
{
var img = document.getElementById("plane");
ctx.drawImage(img,this.x,this.y);
}
else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
heart--;
if (heart<0)
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 100
maxGap = 150;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap)+50;
if (height>120)
{
myObstacles.push(new component(40, height, "red", x, 0));
myObstacles.push(new component(40, x - height - gap, "red", x, height + gap));
}//height>120
if (height<=120)
{
myObstacles.push(new component(40, height, "green", x, 0));
myObstacles.push(new component(40, x - height - gap, "green", x, height + gap));
}// height<=120
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myScore.text="SCORE: " + myGameArea.frameNo;
// heart.text="heart= "; //+heart.toString();
myScore.update();
//heart.update();
document.getElementById("the_heart").innerHTML="heart= " + JSON.stringify(heart);
myGamePiece.newPos();
myGamePiece.update();
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
<br>
<br>
<br>
<center>
<p id="the_heart"></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.5)">ground</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>
</body>
</html>
<img id="plane" src="images/plane33.jpg" alt="plane" width="10" height="10">
var img = document.getElementById("plane");
var width = img.naturalWidth;
var height = img.naturalHeight;
خط اول در قسمت html است و باقی خط ها در قسمت جا ا اسکریپت.
خط اول یک id داره ، که اون id در کدهای جاوا اسکریپت استفاده شده. که id اینجا plane است.
البته کد بالاجایی استفاده نشده فعلا. چون من می گفتم با سایز ۱۰۰ و ۳۰ رسم کن و سایز واقعی اهمیتی نداشت.
از این جهت کدش را اینجا گذاشتم ، گفتم شایو بعدا به کار بیاید.
البته نباید همین جوری ۱۰۰ و ۳۰ می دادم. باید اول طول و عرض عکس را بدست می آوردم و بعد به نسبت طول و عرض واقعی عکس ، سایزها را می دادم.
github.com
bitmidi.com
stackoverflow.com
