صناعة لعبة الثعبان بنسخة جديدة ب لغة JavaScripاللعبة مكونة من عدة مراحل الوضع السهل و الصعب والصعب جدا قبل نسخ الكود انقر زر لايك رجاءا وليس امرا لكي لايتم حظرنا من النشر ، الكود سورس هنا👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exemple title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="board">
</div>
<div id="joystick">
<div id="up">
△
</div>
<div id="right">
▷
</div>
<div id="down">
▽
</div>
<div id="left">
◁
</div>
<div id="move">
〇
</div>
</div>
<div id="score">
Score : 0
</div>
<div id="start">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShz0dvZYeISIugfasNpCOEvlUKEsDBU3MtDQ&usqp=CAU" alt="img" id="img" />
<div id="lvl">
<input type="radio" name="a" id="c1" checked/>
<label for="c1">سهل</label>
<input type="radio" name="a" id="c2" />
<label for="c2">متوسط</label>
<input type="radio" name="a" id="c3" />
<label for="c3">صعب</label>
<input type="radio" name="a" id="c4" />
<label for="c4">صعب جذا</label>
</div>
<div id="strt">
ابدأ الان
</div>
</div>
<div id="end">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShz0dvZYeISIugfasNpCOEvlUKEsDBU3MtDQ&usqp=CAU" alt="img" id="img"/>
<div id="final">
Score : 0
</div>
<div id="restart">
اعادة التعيين
</div>
</div>
<script src="main.js"></script>
<style>
*{
box-sizing: border-box;
}
html{
user-select: none;
}
body {
font-size: 15pt;
margin: 0;
padding: 0;
background-color: black;
}
#board{
width: 100vw;
height: 100vw;
background-color: red;
display: grid;
grid-template-rows: repeat(25, 1fr);
grid-template-columns: repeat(25, 1fr);
transition-duration: 0.5s;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNKbzi8pMskhnLdujWhN1guGl7P851JpEL1A&usqp=CAU");
background-size: cover;
}
.body{
background-color: rgb(288, 288, 124);
border-radius: 20%;
border: solid gray 1px;
}
.body:nth-child(1){
background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129));
}
#joystick{
position: fixed;
bottom: 20px;
left: 20px;
width: 150px;
height: 150px;
background-color: none;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
opacity: 0.7;
border-radius: 20px;
}
#joystick > div{
background-color: gray;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: red;
font-weight: bold;
}
#joystick > div:active{
transform: scale(1.2);
transition-duration: 0.1s;
background-color: orange;
opacity: 1;
}
#left{
grid-row-start: 2;
grid-column-start: 0;
border-radius: 10px 0 0 10px;
}
#up{
grid-row-start: 1;
grid-column-start: 2;
border-radius: 10px 10px 0 0;
}
#right{
grid-row-start: 2;
grid-column-start: 3;
border-radius: 0 10px 10px 0;
}
#down{
grid-row-start: 3;
grid-column-start: 2;
border-radius: 0 0 10px 10px;
}
#move{
grid-row-start: 2;
grid-column-start: 2;
}
#speed_up{
grid-row-start: 1;
grid-column-start: 3;
}
#speed_down{
grid-row-start: 1;
grid-column-start: 1;
}
.food{
background-color: red;
border-radius: 50%;
animation: fd 1s infinite;
border: solid;
background: linear-gradient(red, purple);
}
@keyframes fd{
0%{
transform: scale(50%);
}
50%{
transform: scale(150%);
}
100%{
transform: scale(50%);
}
}
#score{
padding: 5px;
background-color: gray;
position: fixed;
top: 5px;
left: 5px;
opacity: 0.5;
border-style: solid;
border-radius: 10px;
}
#start, #end{
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: whitesmoke;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8XxyPSs6zaKi13rWCCSjmmu9Y2EWqqeXUXg&usqp=CAU");
background-size: cover;
overflow-y: scroll;
}
#img{
width: 80vw;
display: block;
margin: 100px 0 0 10vw;
border-style: solid;
color: #57E567;
border-radius: 10px;
}
#final, #strt, #restart{
font-size: 30px;
text-align: center;
margin: 30px;
color: wheat;
border-style: solid;
padding: 10px;
border-radius: 10px;
}
#end{
display: none;
}
#strt, #restart{
width: 80%;
background-color: #62D42D;
border-radius: 5px;
color: red;
border-style: solid;
margin: 25px auto;
left: calc(50vw - 50px);
}
#lvl{
color: white;
text-align: center;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 3fr 1fr 3fr;
padding: 15px;
grid-gap: 10px;
border: double;
border-radius: 5px;
width: 80%;
margin: 15px auto;
}
label{
background-color: none;
text-align: left;
}
</style>
<script>
window.onload = function() {
alert(`
• Use △ زر توجيه للأعلى.
• Use ▷ زر توجيه اليمين.
• Use ▽ زر توجيه للأسفل.
• Use ◁ زر توجيه لليسار.
• press 〇 زر وقم بالتمرير لتحريك عصا التحكم في أي مكان على الشاشة.
`);
let audio = new Audio('https://github.com/ayushkumarsingh2422005/snake-grid-game/blob/main/music?raw=true');
audio.autoplay = true;
audio.volume = 0.5;
let food = new Audio('https://github.com/ayushkumarsingh2422005/snake-grid-game/blob/main/food?raw=true');
let gameovers = new Audio('https://github.com/ayushkumarsingh2422005/snake-grid-game/blob/main/gameover?raw=true');
let moves = new Audio('https://github.com/ayushkumarsingh2422005/snake-grid-game/blob/main/move?raw=true')
const up_btn = document.querySelector('#up');
const right_btn = document.querySelector('#right');
const down_btn = document.querySelector('#down');
const left_btn = document.querySelector('#left');
const board = document.querySelector('#board');
const move = document.querySelector('#move');
const joystick = document.querySelector('#joystick');
const score_board = document.querySelector('#score');
var score = 0;
var direction = 0;
var sped = null;
var snake_pos = [
{ x: 12, y: 12 }
];
var food_pos = {
x : 12,
y : 13
}
var inteval;
document.querySelector('#strt').onclick = function() {
audio.play();
var inp = document.querySelectorAll('input');
document.querySelector('#start').style.display = 'none';
if (inp[0].checked == true) {
sped = 350;
}
if (inp[1].checked == true) {
sped = 200;
}
if (inp[2].checked == true) {
sped = 120;
}
if (inp[3].checked == true) {
sped = 70;
}
inteval = setInterval(run_snake, sped);
}
document.querySelector("#restart").onclick = function(){
document.querySelector('#start').style.display = 'block';
document.querySelector('#end').style.display = 'none';
score = 0;
snake_pos = [
{ x: 12, y: 12 }
];
food_pos = {
x: 12,
y: 13
}
clearInterval(inteval);
direction = 0;
}
function getRandom() { // min and max included
return Math.floor(Math.random() * (25 - 1 + 1) + 1);
}
function gameover(){
document.querySelector('#end').style.display = 'block';
document.querySelector('#final').innerHTML = 'Score : '+score;
gameovers.play();
}
function run_snake() {
var new_x = snake_pos[0].x;
var new_y = snake_pos[0].y;
switch (direction) {
case 1:
new_y = snake_pos[0].y + 1;
if (new_y > 25) {
clearInterval(inteval);
gameover();
return;
}
break;
case -2:
new_x = snake_pos[0].x + 1;
if (new_x > 25) {
clearInterval(inteval);
gameover();
return;
}
break;
case -1:
new_y = snake_pos[0].y - 1;
if (new_y < 0) {
clearInterval(inteval);
gameover();
return;
}
break;
case 2:
new_x = snake_pos[0].x - 1;
if (new_x < 0) {
clearInterval(inteval);
gameover();
return;
}
break;
}
if(snake_pos[0].x == food_pos.x && snake_pos[0].y == food_pos.y){
food.play();
score_board.innerHTML = 'Score : '+(++score);
food_pos.x = getRandom();
food_pos.y = getRandom();
snake_pos.unshift({x : new_x, y : new_y});
}
else{
snake_pos.unshift({x : new_x, y : new_y});
snake_pos.pop();
}
board.innerHTML = '';
for (i in snake_pos) {
let element = document.createElement('div');
element.style.gridRowStart = snake_pos[i].x;
element.style.gridColumnStart = snake_pos[i].y;
element.classList.add('body');
board.appendChild(element);
}
let element_f = document.createElement('div');
element_f.style.gridRowStart = food_pos.x;
element_f.style.gridColumnStart = food_pos.y;
element_f.classList.add('food');
board.appendChild(element_f);
}
function confirm_direction(direction_new) {
if(direction == (- direction_new)){
return;
}
else{
direction = direction_new;
moves.play();
}
}
up_btn.onclick = function(){
confirm_direction(2);
}
right_btn.onclick = function() {
confirm_direction(1);
}
down_btn.onclick = function() {
confirm_direction(-2);
}
left_btn.onclick = function() {
confirm_direction(-1);
}
move.ontouchstart = function(){
clearInterval(inteval);
}
move.ontouchmove = function(event){
joystick.style.left = event.touches[0].clientX - 75 +'px'
joystick.style.top = event.touches[0].clientY - 75+'px'
}
move.ontouchend = function(){
inteval = setInterval(run_snake, sped);
}
}
</script>
</body>
</html>
تعليقات :
إرسال تعليق