Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Align 4 Game #4739

Merged
merged 2 commits into from
Jul 9, 2024
Merged

Added Align 4 Game #4739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b76e55f
added Align 4 Game
DiwareNamrata23 Jul 4, 2024
1249c3b
updated Readme.md
DiwareNamrata23 Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions Games/Align_4_Game/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# **ALIEN_SHOOTERS**

---

<br>

## **Description 📃**
- The logic of the game is basically there is computer and player so we are the player the main task of the player is to stop computer to align 4 balls horizontally or vertically or zigzagcally straight order.


## **functionalities 🎮**
- Easy to play
- Scoring system so that you can compare points with computer.
- Responsive design for most of the monitors.
<br>

## **How to play? 🕹️**
- Start the game by clicking on start and then press the grid.
- Your aim is to stop the computer to making or aligning 4 balls in a line .
<br>

## **Screenshots 📸**

<br>

![Game image](../../assets/images/Align_4_Game.png)

<br>


81 changes: 81 additions & 0 deletions Games/Align_4_Game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>

<!-- Meta -->
<meta charset="UTF-8" />
<title>Align 4 Game</title>

<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Doppio+One" rel="stylesheet">
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h1>Align 4</h1>
<div class="panel dif">
<h2>Difficulty</h2>
<div class="dif-options">
<div>
<input id="dif1" type="radio" name="dif-options" value="1">
<label for="dif1">1</label>
</div>
<div>
<input id="dif2" type="radio" name="dif-options" value="2">
<label for="dif2">2</label>
</div>
<div>
<input id="dif3" type="radio" name="dif-options" value="3" checked>
<label for="dif3">3</label>
</div>
<div>
<input id="dif4" type="radio" name="dif-options" value="4">
<label for="dif4">4</label>
</div>
<div>
<input id="dif5" type="radio" name="dif-options" value="5">
<label for="dif5">5</label>
</div>
</div>
<div class="start">
<button>Start Game</button>
</div>
</div>
<div class="panel info">
<h2></h2>
<div class="blurb"></div>
<div class="outlook"></div>
</div>
</div>
<div class="board">
<div class="lit-columns">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="lit-cells"></div>
<div class="chips"></div>
<div class="click-columns">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>

<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
253 changes: 253 additions & 0 deletions Games/Align_4_Game/scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
// constants
const WEB_WORKER_URL = 'scripts/worker.js';
const BLURBS = {
'start': {
header: 'Get Ready',
blurb: 'Select your difficulty and start the game.'
},
'p1-turn': {
header: 'Your Turn',
blurb: 'Click on the board to drop your chip.'
},
'p2-turn': {
header: 'Computer\'s Turn',
blurb: 'The computer is trying to find the best way to make you lose.'
},
'p1-win': {
header: 'You Win',
blurb: 'You are a winner. Remember this moment. Carry it with you, forever.'
},
'p2-win': {
header: 'Computer Wins',
blurb: 'Try again when you\'re done wiping your tears of shame.'
},
'tie': {
header: 'Tie',
blurb: 'Everyone\'s a winner! Or loser. Depends on how you look at it.'
}
};
const OUTLOOKS = {
'win-imminent': 'Uh oh, computer is feeling saucy!',
'loss-imminent': 'Computer is unsure. Now\'s your chance!'
};

// global variables
var worker;
var currentGameState;

// document ready
$(function() {
$('.start button').on('click', startGame);
setBlurb('start');
setOutlook();

// create worker
worker = new Worker(WEB_WORKER_URL);
worker.addEventListener('message', function(e) {
switch(e.data.messageType) {
case 'reset-done':
startHumanTurn();
break;
case 'human-move-done':
endHumanTurn(e.data.coords, e.data.isWin, e.data.winningChips, e.data.isBoardFull);
break;
case 'progress':
updateComputerTurn(e.data.col);
break;
case 'computer-move-done':
endComputerTurn(e.data.coords, e.data.isWin, e.data.winningChips, e.data.isBoardFull,
e.data.isWinImminent, e.data.isLossImminent);
break;
}
}, false);
});

function setBlurb(key) {
$('.info h2').text(BLURBS[key].header);
$('.info .blurb').text(BLURBS[key].blurb);
}

function setOutlook(key) {
var $outlook = $('.info .outlook');
if(key) {
$outlook
.text(OUTLOOKS[key])
.show();
} else {
$outlook.hide();
}
}

function startGame() {
$('.dif').addClass('freeze');
$('.dif input').prop('disabled', true);
$('.lit-cells, .chips').empty();

worker.postMessage({
messageType: 'reset',
});
}

function startHumanTurn() {
setBlurb('p1-turn');
$('.click-columns div').addClass('hover');

// if mouse is already over a column, show cursor chip there
var col = $('.click-columns div:hover').index();
if(col !== -1) {
createCursorChip(1, col);
}

$('.click-columns')
.on('mouseenter', function() {
var col = $('.click-columns div:hover').index();
createCursorChip(1, col);
})
.on('mouseleave', function() {
destroyCursorChip();
});

$('.click-columns div')
.on('mouseenter', function() {
var col = $(this).index();
moveCursorChip(col);
})
.on('click', function() {
$('.click-columns, .click-columns div').off();

var col = $(this).index();
worker.postMessage({
messageType: 'human-move',
col: col
});
});
}

function endHumanTurn(coords, isWin, winningChips, isBoardFull) {
$('.click-columns div').removeClass('hover');
if(!coords) {
// column was full, human goes again
startHumanTurn();
} else {
dropCursorChip(coords.row, function() {
if(isWin) {
endGame('p1-win', winningChips);
} else if(isBoardFull) {
endGame('tie');
} else {
// pass turn to computer
startComputerTurn();
}
});
}
}

function startComputerTurn() {
setBlurb('p2-turn');

// computer's cursor chip starts far left and moves right as it thinks
createCursorChip(2, 0);

var maxDepth = parseInt($('input[name=dif-options]:checked').val(), 10) + 1;
worker.postMessage({
messageType: 'computer-move',
maxDepth: maxDepth
});
}

function updateComputerTurn(col) {
moveCursorChip(col);
}

function endComputerTurn(coords, isWin, winningChips, isBoardFull, isWinImminent, isLossImminent) {
moveCursorChip(coords.col, function() {
dropCursorChip(coords.row, function() {
if (isWin) {
endGame('p2-win', winningChips);
} else if (isBoardFull) {
endGame('tie');
} else {
if(isWinImminent) {
setOutlook('win-imminent');
} else if (isLossImminent) {
setOutlook('loss-imminent');
} else {
setOutlook();
}

// pass turn to human
startHumanTurn();
}
});
});
}

function endGame(blurbKey, winningChips) {
$('.dif').removeClass('freeze');
$('.dif input').prop('disabled', false);
setBlurb(blurbKey);
setOutlook();

if(winningChips) {
// not a tie, highlight the chips in the winning run
for(var i = 0; i < winningChips.length; i++) {
createLitCell(winningChips[i].col, winningChips[i].row);
}
}
}

function createLitCell(col, row) {
$('<div>')
.css({
'left': indexToPixels(col),
'bottom': indexToPixels(row)
})
.appendTo('.lit-cells');
}

function createCursorChip(player, col) {
var playerClass = 'p' + player;
$('<div>', { 'class': 'cursor ' + playerClass })
.css('left', indexToPixels(col))
.appendTo('.chips');

// also highlight column
$('.lit-columns div').eq(col).addClass('lit');
}

function destroyCursorChip() {
$('.chips .cursor').remove();
$('.lit-columns .lit').removeClass('lit');
}

function moveCursorChip(col, callback) {
$('.chips .cursor').css('left', indexToPixels(col));
$('.lit-columns .lit').removeClass('lit');
$('.lit-columns div').eq(col).addClass('lit');

// callback is only used when the computer is about to drop a chip
// give it a slight delay for visual interest
setTimeout(callback, 300);
}

function dropCursorChip(row, callback) {
// speed of animation depends on how far the chip has to drop
var ms = (7 - row) * 40;
var duration = (ms / 1000) + 's';

$('.chips .cursor')
.removeClass('cursor')
.css({
'bottom': indexToPixels(row),
'transition-duration': duration,
'animation-delay': duration
})
.addClass('dropped');

$('.lit-columns .lit').removeClass('lit');
setTimeout(callback, ms);
}

function indexToPixels(index) {
return (index * 61 + 1) + 'px';
}
Loading
Loading