شیئی قرمز در حال سقوط !
این یک شبیه سازی فیزیکه ، کاری که موتور های بازی سازی انجام میدن ؛ با این تفاوت که اونا با c++ انجام میدن ، ولی این با جاواسکریپته 🗿
یه تابع توشه به اسم فیزیک ؛ که هر صدم ثانیه آپدیت میشه و حرکت ها رو کنترل میکنه . اگه کدش رو هم خواستید توی ادامه مطلب گذاشتم 🗿
اگه به هوش مصنوعی بگید همچین چیزی براتون بنویسه ، کلی طولش میده و یه چیز عجیب غریبی در میاره که اصلا خوانا نیست 🗿 صد و پنجاه تا متغیر تعریف میکنه و پنجاه خط کامنت های غیرضروری ، و بعضا به زبان چینی یا روسی مینویسه ! 🗿🥀
<!DOCTYPE html>
<style>
.view {
width: 95%;
height: 95%;
background-image: linear-gradient(180deg,#0f82ff,#68e1ff);
overflow: hidden;
border-radius: 90px;
display: flex;
}
.player{
display: block;
background-color: red;
height: 40px;
width: 400px;
border-radius: 30px;
}
.controle{
height: 10%;
width : 90%;
margin: 0 auto;
display: block;
background-color: #e9fbff;
border-radius: 60px;
align-items: center;
margin-top: -8%;
}
.inp {
width : 10vh;
height: 95%;
background-image: radial-gradient(circle , white , gray);
display:block;
border-radius: 10px;
}
.floor {
height: 100px;
width: 4500px;
background-color: green;
display: block;
bottom: 20px;
transform: translate(-1px,500px);
}
</style>
<body>
<div class="view">
<div id="play" class="player"></div>
<div id ="flr" class="floor"></div>
</div>
<script>
const pla = document.getElementById("play");
const flor = document.getElementById("flr")
var moveY = 0
var moveX = 0
var left_click = false
var right_click = false
physics()
function physics () {
pla.style.transform = `translate(${moveX}px,${moveY}px)`
if (pla.getBoundingClientRect().bottom < flor.getBoundingClientRect().top) {
moveY++
}
if (left_click) {
moveX --
}
if (right_click){
moveX ++
}
setTimeout(physics,10)
}
</script>
<div class="controle"><button onpointerdown="left_click=true" onpointerup="left_click=false" class="inp" style="float:left;"><=</button><button class="inp" style="float : right;" onpointerdown="right_click=true" onpointerup="right_click=false">=></button></div>
</body>