علیرضا طایفی

طراح وب برنامه نویس وب فریلنسر دامپزشک مدرس

علیرضا طایفی

طراح وب برنامه نویس وب فریلنسر توسعه وب طراح قالب

مختصری از من

در حال حاضر در حوزه طراحی و برنامه نویسی وب فعالیت دارم.هدفم تبدیل به fullstack شدن بوده و در تمامی فعالیت هایم سعی میکنم جزو بهترین ها باشم. از نظرم کسب مهارت های جدید و تجارب مختلف در راستای علایق و اهداف امری ضروری و لذت بخش بوده و پیشنهادم به تمامی دوستان و اطرافیانم دنبال نمودن علایقشان است.

سن :

24

ساکن :

ایران/تهران

وضعیت فریلنسر :

دردسترس

خدمات من

طراح/برنامه نویس/توسعه دهنده وب

طراحی و توسعه انواع وبسایت ها با استفاده از جدید ترین متد ها از html5 و css3 و برنامه نویسی و پیاده سازی جاوا اسکریپت

seo و بهینه سازی وبسایت

انجام پروژه های seo جهت انواع وبسایت با استفاده از جدید ترین روش ها (رپورتاژ/google analytics/link building/...)

مسلط به وردپرس

انجام انواع پروژه های وردپرس اعم از طراحی و ترجمه قالب/ ساخت انواع قالب شرکتی و فروشگاهی و ... / سئو و امنیت

پشتیبانی

انجام پشتیبانی و هاستینگ انواع وبسایت / به روز رسانی و بک آپ

چرا همکاری با من

همواره در حال مطالعه و حفظ به روز دانش خود

متعهد و مسولیت پذیر

احترام و برخورد حرفه ایی با طرف قرارداد

اماده سازی و انجام وظایف در زمان تعیین شده و به بهترین شکل ممکن

پشتیبانی رایگان ۲ هفته ایی از زمان تحویل

قیمت گذاری منصفانه

دانستنی های باحال در مورد خودم

علاقه مند به سینما

4 مرتبه اتمام بازی last of us

طرفدار دو اتیشه چاووشی

عاشق رانندگی در شب

مشتریان من

رزومه من

سوابق کاری

1398 - حال حاضر

فریلنسر

به صورت ازاد

طراحی ، ترجمه و توسعه انواع وبسایت و قالب ها بر روی انواع cms ها از جمله ورد پرس و دیتا لایف

1398 - 1398

html/css

شرکت آویسا

بررسی کد های HTML , CSS صفحات و خطا یابی و تصیح بود. کدنویسی صفحات فیدبک و ثبت نام وبسایت .

1398 - 1398

فرانت-اند

شرکت شیرین سافت

کارآموزی و یادگیری جاوا اسکریپت .فراگیری seo و بهینه سازی وبسایت

تحصیلات

1393 - 1399

دکترا

البرز(کرج)

تحصیل در دانشگاه ازاد کرج و دریافت مدرک دکترا

1398 - 1399

دوره های طراحی وب

تهران

گذراندن دوره های طراحی وب در اموزشگاه پرنیان زیر نظر استاد پارسا قربانیان و دریافت مدرک وزارت علوم

1398 - 1398

web1

مجتمع فنی

گذراندن دوره وب ۱ در مجتمع فنی تهران و دریافت مدرک مجتمع فنی با نمره کامل

مهارت ها

پروژه های اخیر

کد نویسی از غالب وردپرس

کدنویسی صفحه اول سایت بلاک چین

کد نویسی لندینگ پیج

کد نویسی مجدد غالب اوادا

کدنویسی مجدد غالب اوادا

بازگشت

طراحی بازی تاس با جاوااسکریپت

28 دی 1398
اموزش
توسط : A-TNASR

طراحی بازی تاس دونفره که در ان دو فرد پس از ورود نام هایشان وارد بازی شده و بازی به صورت رندوم نفر شروع کننده را انتخاب میکند.
سپس در هر نوبت افراد امتیازشان جمع شده تا در نهایت به سقف امتیازات برسند و برنده مشخص شود.
در این بازی تاس ۶ دارای جایزه بوده و بار دیگر میتوان تاس را ریخت.
کد ها در انتهای مطلب زیر ویدیو میباشد.

html & jаvascript part

<!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>dice game</title>
    <link rel="stylesheet" href="CSS/main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">

</head>
<body>
    <main>
        <section>
           <h1>desing & coding by tnasr</h1>
            <section id="box">
                    <section class="game" >
                        <section class="player1">
                            <h3><span id="name1"></span> score is: <span id="sum1">0</span></h3>
                            <div class="dice">
                                <div class="sum">1</div>
                                <div>2</div>
                                <div>3</div>
                                <div>4</div>
                                <div>5</div>
                                <div>6</div>
                            </div>
                            <label for="rolle" onclick="_rollp1()">rolle</label>
                        </section>
                        <section class="player2">
                            <h3><span id="name2"></span> score is: <span id="sum2">0</span></h3>
                            <div class="dice">
                                <div class="sum">1</div>
                                <div>2</div>
                                <div>3</div>
                                <div>4</div>
                                <div>5</div>
                                <div>6</div>
                            </div>
                            <label for="rolle" onclick="_rollp2()">rolle</label>
                        </section>
                    </section>
                    <section class="user" >
                        <h2>inter username1 :</h2>
                        <input type="text" id="user1">
                        <h2>inter username2 :</h2>
                        <input type="text" id="user2">
                        <label for="send" onclick="_start()">start game</label>
                    </section>
            </section>
        </section>
    </main>

    <script>
        var sum1 = 0
        var sum2 = 0
        var _users = []
        function _start(){
            if(document.getElementById('user1').value =="" ){
                alert('please inter user first')
                document.getElementById('user1').style.borderBottom='1px solid red'
            }else{
                _users[0] = document.getElementById('user1').value
                document.getElementById('name1').innerHTML= _users[0]
                document.getElementById('user1').style.borderBottom='1px solid green'
            }
            if(document.getElementById('user2').value =="" ){
                document.getElementById('user2').style.borderBottom='1px solid red'
            }else{
                _users[1] = document.getElementById('user2').value
                document.getElementById('name2').innerHTML= _users[1]
                document.getElementById('user2').style.borderBottom='1px solid green'
            }
            if(_users.length ==2){
                    document.getElementsByClassName('user')[0].setAttribute('class', 'user end')
                        if(Math.floor(Math.random() * 2)==1){
                document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player')
            }else{
                document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player')
 
            }
            }
    
        }
        function _rollp1(){
            var x = (Math.floor(Math.random() * 6)) + 1
            console.log(x)
            switch(x){
               case 1 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 2 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 3 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 4 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 5 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 6 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ;document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;


               
            }
            sum1+=x
            document.getElementById('sum1').innerHTML= sum1
            _win()
        }


        function _rollp2(){
            var x = (Math.floor(Math.random() * 6)) + 1
            console.log(x)
            switch(x){
               case 1 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 2 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 3 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 4 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 5 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 6 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ;document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;


               
            }
            sum2+=x
            document.getElementById('sum2').innerHTML= sum2
            _win()
        }

        function _win(){
            if(sum1>=30){
                alert(_users[0] + ' is winner')
                location.reload();
                return false
            }
            if(sum2>=30){
                alert(_users[1] + ' is winner')
                location.reload();
                return false
            }

        }
        

    
    
    </script>








</body>
</html>

css part

*{
    margin: 0;padding: 0;box-sizing: border-box;
}
body{
    cursor: default;
    font-size: 100%;
    color: whitesmoke;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
}
main>section>h1{
    width: 100%;
    height: 200px;
    font-size: 10vw;
    color: rgb(72, 15, 15);
    font-family: 'Dancing Script', cursive;
    transition: .7s;
    text-shadow: 1px 1px 10px whitesmoke;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    
}
main>section>h1:hover{
    color: whitesmoke;
}
main>section{
    width: 100%;
    height: 100vh;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-image:url(../IMG/bg.jpg);
    background-position:center;
    background-size: cover;
}
#box{
    width: 50%;
    height: 50%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background-color: rgba(14, 14, 14, 0.589);
    box-shadow: 0 0 100px 1px rgb(190, 190, 190);
    position: relative;
    overflow: hidden;
}
#box>section{
    width: 100%;
    height: 100%;
    position: absolute;
    transition: .4s;
    background-color: rgba(14, 14, 14, 0.589);
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}
.user{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    align-content: space-evenly;
    justify-content: space-evenly;
    top: 0;
    z-index: 3;

}
.user>h2{
    color: whitesmoke;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
    font-size: 18px;

}
.user>input{
    height: 25px;
    padding: 0 5px;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    border-bottom: 1px solid rgb(219, 219, 219);
    color: whitesmoke;
    text-transform: capitalize;
    font-size: 16px;
}
.user>label{
    width: 150px;
    height: 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background-color: rgb(77, 23, 23);
    text-transform: uppercase;
    color: whitesmoke;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .4s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}
.user>label:hover{
    background-color:whitesmoke;
    color:  rgb(77, 23, 23);

}
.end{
    top: 100%;
    opacity: 0;
}

/******************* end of box **********************/

/*********************** start game  **************/

.game{
    background-color: rgba(0, 0, 0, 0.699);
    display: flex;

}
.game>section{
    width: 50%;
    height: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.player1{
    border-right: 1px solid rgb(73, 17, 17);
}
.player::after{
    content: 'rival turn !';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.801);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 35px;
    font-size: 3.5vw;
}
.game>section>label{
    padding: 5px 15px;
    background-color: rgb(77, 23, 23);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    cursor: pointer;
}
.game>section>label:active{
    background-color: whitesmoke;
    color: rgb(77, 23, 23);
}
.game>section>h3>span{
    color: rgb(167, 0, 0);
}

.dice{
    width: 50%;
    height: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    z-index: 2;

}
/* 8***********************rolling part0**************** */
.roll{
    transform: rotate3d(1, 2, 3, 2160deg);
    transition: 3s;
    transition-timing-function: ease-in;
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    -webkit-transform: rotate3d(1, 2, 3, 2160deg);
    -moz-transform: rotate3d(1, 2, 3, 2160deg);
    -ms-transform: rotate3d(1, 2, 3, 2160deg);
    -o-transform: rotate3d(1, 2, 3, 2160deg);
}

/* *********************end of roliing******************* */

.dice>div{
    width: 60px;
    height: 60px;
    border-radius: 3px;
    background-color: rgb(77, 23, 23);
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    font-size: 30px;
    color: whitesmoke;
    

}
.dice>div:nth-of-type(1){
    transform:perspective(200px) translateZ(30px) ;
    -webkit-transform:perspective(200px) translateZ(30px) ;
    -moz-transform:perspective(200px) translateZ(30px) ;
    -ms-transform:perspective(200px) translateZ(30px) ;
    -o-transform:perspective(200px) translateZ(30px) ;
}
.dice>div:nth-of-type(2){
    transform:perspective(200px) translateZ(-30px) ;
    -webkit-transform:perspective(200px) translateZ(-30px) ;
    -moz-transform:perspective(200px) translateZ(-30px) ;
    -ms-transform:perspective(200px) translateZ(-30px) ;
    -o-transform:perspective(200px) translateZ(-30px) ;
}
.dice>div:nth-of-type(3){
    transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
    -webkit-transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
    -moz-transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
    -ms-transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
    -o-transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
}
.dice>div:nth-of-type(4){
    transform:perspective(200px) rotateY(90deg) translatez(30px) ;
    -webkit-transform:perspective(200px) rotateY(90deg) translatez(30px) ;
    -moz-transform:perspective(200px) rotateY(90deg) translatez(30px) ;
    -ms-transform:perspective(200px) rotateY(90deg) translatez(30px) ;
    -o-transform:perspective(200px) rotateY(90deg) translatez(30px) ;
}
.dice>div:nth-of-type(5){
    transform:perspective(200px) rotatex(90deg) translatez(30px) ;
    -webkit-transform:perspective(200px) rotatex(90deg) translatez(30px) ;
    -moz-transform:perspective(200px) rotatex(90deg) translatez(30px) ;
    -ms-transform:perspective(200px) rotatex(90deg) translatez(30px) ;
    -o-transform:perspective(200px) rotatex(90deg) translatez(30px) ;
}
.dice>div:nth-of-type(6){
    transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
    -webkit-transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
    -moz-transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
    -ms-transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
    -o-transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
}

بازگشت

نظرات (0)

مسیر های ارتباطی

تلفن :

ایمیل :

فرم تماس

بازگشت

طراحی بازی تاس با جاوااسکریپت

28 دی 1398
اموزش
توسط : A-TNASR

html & jаvascript part

<!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>dice game</title>
    <link rel="stylesheet" href="CSS/main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">

</head>
<body>
    <main>
        <section>
           <h1>desing & coding by tnasr</h1>
            <section id="box">
                    <section class="game" >
                        <section class="player1">
                            <h3><span id="name1"></span> score is: <span id="sum1">0</span></h3>
                            <div class="dice">
                                <div class="sum">1</div>
                                <div>2</div>
                                <div>3</div>
                                <div>4</div>
                                <div>5</div>
                                <div>6</div>
                            </div>
                            <label for="rolle" onclick="_rollp1()">rolle</label>
                        </section>
                        <section class="player2">
                            <h3><span id="name2"></span> score is: <span id="sum2">0</span></h3>
                            <div class="dice">
                                <div class="sum">1</div>
                                <div>2</div>
                                <div>3</div>
                                <div>4</div>
                                <div>5</div>
                                <div>6</div>
                            </div>
                            <label for="rolle" onclick="_rollp2()">rolle</label>
                        </section>
                    </section>
                    <section class="user" >
                        <h2>inter username1 :</h2>
                        <input type="text" id="user1">
                        <h2>inter username2 :</h2>
                        <input type="text" id="user2">
                        <label for="send" onclick="_start()">start game</label>
                    </section>
            </section>
        </section>
    </main>

    <script>
        var sum1 = 0
        var sum2 = 0
        var _users = []
        function _start(){
            if(document.getElementById('user1').value =="" ){
                alert('please inter user first')
                document.getElementById('user1').style.borderBottom='1px solid red'
            }else{
                _users[0] = document.getElementById('user1').value
                document.getElementById('name1').innerHTML= _users[0]
                document.getElementById('user1').style.borderBottom='1px solid green'
            }
            if(document.getElementById('user2').value =="" ){
                document.getElementById('user2').style.borderBottom='1px solid red'
            }else{
                _users[1] = document.getElementById('user2').value
                document.getElementById('name2').innerHTML= _users[1]
                document.getElementById('user2').style.borderBottom='1px solid green'
            }
            if(_users.length ==2){
                    document.getElementsByClassName('user')[0].setAttribute('class', 'user end')
                        if(Math.floor(Math.random() * 2)==1){
                document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player')
            }else{
                document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player')
 
            }
            }
    
        }
        function _rollp1(){
            var x = (Math.floor(Math.random() * 6)) + 1
            console.log(x)
            switch(x){
               case 1 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 2 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 3 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 4 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 5 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ; document.getElementsByClassName('player1')[0].setAttribute('class', 'player1 player');document.getElementsByClassName('player2')[0].setAttribute('class', 'player2');document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;
               case 6 : document.getElementsByClassName('dice')[0].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[0].innerHTML=x ;document.getElementsByClassName('dice')[1].setAttribute('class', 'dice');break;


               
            }
            sum1+=x
            document.getElementById('sum1').innerHTML= sum1
            _win()
        }


        function _rollp2(){
            var x = (Math.floor(Math.random() * 6)) + 1
            console.log(x)
            switch(x){
               case 1 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 2 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 3 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 4 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 5 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ; document.getElementsByClassName('player2')[0].setAttribute('class', 'player2 player');document.getElementsByClassName('player1')[0].setAttribute('class', 'player1');document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;
               case 6 : document.getElementsByClassName('dice')[1].setAttribute('class', 'dice roll');document.getElementsByClassName('sum')[1].innerHTML=x ;document.getElementsByClassName('dice')[0].setAttribute('class', 'dice');break;


               
            }
            sum2+=x
            document.getElementById('sum2').innerHTML= sum2
            _win()
        }

        function _win(){
            if(sum1>=30){
                alert(_users[0] + ' is winner')
                location.reload();
                return false
            }
            if(sum2>=30){
                alert(_users[1] + ' is winner')
                location.reload();
                return false
            }

        }
        

    
    
    </script>








</body>
</html>

css part

*{
    margin: 0;padding: 0;box-sizing: border-box;
}
body{
    cursor: default;
    font-size: 100%;
    color: whitesmoke;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
}
main>section>h1{
    width: 100%;
    height: 200px;
    font-size: 10vw;
    color: rgb(72, 15, 15);
    font-family: 'Dancing Script', cursive;
    transition: .7s;
    text-shadow: 1px 1px 10px whitesmoke;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    
}
main>section>h1:hover{
    color: whitesmoke;
}
main>section{
    width: 100%;
    height: 100vh;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-image:url(../IMG/bg.jpg);
    background-position:center;
    background-size: cover;
}
#box{
    width: 50%;
    height: 50%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background-color: rgba(14, 14, 14, 0.589);
    box-shadow: 0 0 100px 1px rgb(190, 190, 190);
    position: relative;
    overflow: hidden;
}
#box>section{
    width: 100%;
    height: 100%;
    position: absolute;
    transition: .4s;
    background-color: rgba(14, 14, 14, 0.589);
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}
.user{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    align-content: space-evenly;
    justify-content: space-evenly;
    top: 0;
    z-index: 3;

}
.user>h2{
    color: whitesmoke;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
    font-size: 18px;

}
.user>input{
    height: 25px;
    padding: 0 5px;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    border-bottom: 1px solid rgb(219, 219, 219);
    color: whitesmoke;
    text-transform: capitalize;
    font-size: 16px;
}
.user>label{
    width: 150px;
    height: 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background-color: rgb(77, 23, 23);
    text-transform: uppercase;
    color: whitesmoke;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .4s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}
.user>label:hover{
    background-color:whitesmoke;
    color:  rgb(77, 23, 23);

}
.end{
    top: 100%;
    opacity: 0;
}

/******************* end of box **********************/

/*********************** start game  **************/

.game{
    background-color: rgba(0, 0, 0, 0.699);
    display: flex;

}
.game>section{
    width: 50%;
    height: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.player1{
    border-right: 1px solid rgb(73, 17, 17);
}
.player::after{
    content: 'rival turn !';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.801);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 35px;
    font-size: 3.5vw;
}
.game>section>label{
    padding: 5px 15px;
    background-color: rgb(77, 23, 23);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    cursor: pointer;
}
.game>section>label:active{
    background-color: whitesmoke;
    color: rgb(77, 23, 23);
}
.game>section>h3>span{
    color: rgb(167, 0, 0);
}

.dice{
    width: 50%;
    height: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    z-index: 2;

}
/* 8***********************rolling part0**************** */
.roll{
    transform: rotate3d(1, 2, 3, 2160deg);
    transition: 3s;
    transition-timing-function: ease-in;
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    -webkit-transform: rotate3d(1, 2, 3, 2160deg);
    -moz-transform: rotate3d(1, 2, 3, 2160deg);
    -ms-transform: rotate3d(1, 2, 3, 2160deg);
    -o-transform: rotate3d(1, 2, 3, 2160deg);
}

/* *********************end of roliing******************* */

.dice>div{
    width: 60px;
    height: 60px;
    border-radius: 3px;
    background-color: rgb(77, 23, 23);
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    font-size: 30px;
    color: whitesmoke;
    

}
.dice>div:nth-of-type(1){
    transform:perspective(200px) translateZ(30px) ;
    -webkit-transform:perspective(200px) translateZ(30px) ;
    -moz-transform:perspective(200px) translateZ(30px) ;
    -ms-transform:perspective(200px) translateZ(30px) ;
    -o-transform:perspective(200px) translateZ(30px) ;
}
.dice>div:nth-of-type(2){
    transform:perspective(200px) translateZ(-30px) ;
    -webkit-transform:perspective(200px) translateZ(-30px) ;
    -moz-transform:perspective(200px) translateZ(-30px) ;
    -ms-transform:perspective(200px) translateZ(-30px) ;
    -o-transform:perspective(200px) translateZ(-30px) ;
}
.dice>div:nth-of-type(3){
    transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
    -webkit-transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
    -moz-transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
    -ms-transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
    -o-transform:perspective(200px) rotateY(90deg) translatez(-30px) ;
}
.dice>div:nth-of-type(4){
    transform:perspective(200px) rotateY(90deg) translatez(30px) ;
    -webkit-transform:perspective(200px) rotateY(90deg) translatez(30px) ;
    -moz-transform:perspective(200px) rotateY(90deg) translatez(30px) ;
    -ms-transform:perspective(200px) rotateY(90deg) translatez(30px) ;
    -o-transform:perspective(200px) rotateY(90deg) translatez(30px) ;
}
.dice>div:nth-of-type(5){
    transform:perspective(200px) rotatex(90deg) translatez(30px) ;
    -webkit-transform:perspective(200px) rotatex(90deg) translatez(30px) ;
    -moz-transform:perspective(200px) rotatex(90deg) translatez(30px) ;
    -ms-transform:perspective(200px) rotatex(90deg) translatez(30px) ;
    -o-transform:perspective(200px) rotatex(90deg) translatez(30px) ;
}
.dice>div:nth-of-type(6){
    transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
    -webkit-transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
    -moz-transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
    -ms-transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
    -o-transform:perspective(200px) rotatex(90deg) translatez(-30px) ;
}

بازگشت

علیرضا طایفی

طراح وب برنامه نویس وب فریلنسر توسعه وب طراح قالب

مختصری از من

24

ایران/تهران

دردسترس

خدمات من

طراح/برنامه نویس/توسعه دهنده وب

seo و بهینه سازی وبسایت

مسلط به وردپرس

پشتیبانی

چرا همکاری با من

همواره در حال مطالعه و حفظ به روز دانش خود

متعهد و مسولیت پذیر

احترام و برخورد حرفه ایی با طرف قرارداد

اماده سازی و انجام وظایف در زمان تعیین شده و به بهترین شکل ممکن

پشتیبانی رایگان ۲ هفته ایی از زمان تحویل

قیمت گذاری منصفانه

دانستنی های باحال در مورد خودم

مشتریان من

رزومه من

سوابق کاری

فریلنسر

به صورت ازاد

html/css

شرکت آویسا

فرانت-اند

شرکت شیرین سافت

تحصیلات

دکترا

البرز(کرج)

دوره های طراحی وب

تهران

web1

مجتمع فنی

مهارت ها

پروژه های اخیر

نظرات (0)

ارسال دیدگاه

مسیر های ارتباطی

تلفن :

ایمیل :

فرم تماس

نظرات (0)

ارسال دیدگاه