js & php
This commit is contained in:
Evelyn Sucitro
parent
7c74ea08a5
commit
e4898388d1
339
2048.js
339
2048.js
@ -2,188 +2,243 @@ var board;
|
|||||||
var score = 0;
|
var score = 0;
|
||||||
var rows = 4;
|
var rows = 4;
|
||||||
var columns = 4;
|
var columns = 4;
|
||||||
|
var gameOver = false;
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function () {
|
||||||
setGame();
|
setGame();
|
||||||
}
|
document.getElementById("replayBtn").addEventListener("click", restartGame);
|
||||||
|
};
|
||||||
|
|
||||||
function setGame() {
|
function setGame() {
|
||||||
// board = [
|
board = [
|
||||||
// [2, 2, 2, 2],
|
[0, 0, 0, 0],
|
||||||
// [2, 2, 2, 2],
|
[0, 0, 0, 0],
|
||||||
// [4, 4, 8, 8],
|
[0, 0, 0, 0],
|
||||||
// [4, 4, 8, 8]
|
[0, 0, 0, 0],
|
||||||
// ];
|
];
|
||||||
|
|
||||||
board = [
|
score = 0;
|
||||||
[0, 0, 0, 0],
|
gameOver = false;
|
||||||
[0, 0, 0, 0],
|
document.getElementById("score").innerText = score;
|
||||||
[0, 0, 0, 0],
|
document.getElementById("board").innerHTML = "";
|
||||||
[0, 0, 0, 0]
|
|
||||||
]
|
|
||||||
|
|
||||||
for (let r = 0; r < rows; r++) {
|
for (let r = 0; r < rows; r++) {
|
||||||
for (let c = 0; c < columns; c++) {
|
for (let c = 0; c < columns; c++) {
|
||||||
let tile = document.createElement("div");
|
let tile = document.createElement("div");
|
||||||
tile.id = r.toString() + "-" + c.toString();
|
tile.id = r.toString() + "-" + c.toString();
|
||||||
let num = board[r][c];
|
let num = board[r][c];
|
||||||
updateTile(tile, num);
|
updateTile(tile, num);
|
||||||
document.getElementById("board").append(tile);
|
document.getElementById("board").append(tile);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
//create 2 to begin the game
|
}
|
||||||
setTwo();
|
|
||||||
setTwo();
|
|
||||||
|
|
||||||
|
setTwo();
|
||||||
|
setTwo();
|
||||||
|
}
|
||||||
|
|
||||||
|
function restartGame() {
|
||||||
|
document.getElementById("gameOverOverlay").style.display = "none";
|
||||||
|
setGame();
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTile(tile, num) {
|
function updateTile(tile, num) {
|
||||||
tile.innerText = "";
|
tile.innerText = "";
|
||||||
tile.classList.value = ""; //clear the classList
|
tile.classList.value = "";
|
||||||
tile.classList.add("tile");
|
tile.classList.add("tile");
|
||||||
if (num > 0) {
|
if (num > 0) {
|
||||||
tile.innerText = num.toString();
|
tile.innerText = num.toString();
|
||||||
if (num <= 4096) {
|
if (num <= 4096) {
|
||||||
tile.classList.add("x"+num.toString());
|
tile.classList.add("x" + num.toString());
|
||||||
} else {
|
} else {
|
||||||
tile.classList.add("x8192");
|
tile.classList.add("x8192");
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('keyup', (e) => {
|
document.addEventListener("keyup", (e) => {
|
||||||
if (e.code == "ArrowLeft") {
|
if (gameOver) return;
|
||||||
slideLeft();
|
|
||||||
setTwo();
|
|
||||||
}
|
|
||||||
else if (e.code == "ArrowRight") {
|
|
||||||
slideRight();
|
|
||||||
setTwo();
|
|
||||||
}
|
|
||||||
else if (e.code == "ArrowUp") {
|
|
||||||
slideUp();
|
|
||||||
setTwo();
|
|
||||||
|
|
||||||
}
|
let moved = false;
|
||||||
else if (e.code == "ArrowDown") {
|
|
||||||
slideDown();
|
if (e.code == "ArrowLeft") {
|
||||||
setTwo();
|
moved = slideLeft();
|
||||||
}
|
} else if (e.code == "ArrowRight") {
|
||||||
|
moved = slideRight();
|
||||||
|
} else if (e.code == "ArrowUp") {
|
||||||
|
moved = slideUp();
|
||||||
|
} else if (e.code == "ArrowDown") {
|
||||||
|
moved = slideDown();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only add new tile if board actually moved
|
||||||
|
if (moved) {
|
||||||
|
setTwo();
|
||||||
document.getElementById("score").innerText = score;
|
document.getElementById("score").innerText = score;
|
||||||
})
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function filterZero(row){
|
function filterZero(row) {
|
||||||
return row.filter(num => num != 0); //create new array of all nums != 0
|
return row.filter((num) => num != 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function slide(row) {
|
function slide(row) {
|
||||||
//[0, 2, 2, 2]
|
row = filterZero(row);
|
||||||
row = filterZero(row); //[2, 2, 2]
|
for (let i = 0; i < row.length - 1; i++) {
|
||||||
for (let i = 0; i < row.length-1; i++){
|
if (row[i] == row[i + 1]) {
|
||||||
if (row[i] == row[i+1]) {
|
row[i] *= 2;
|
||||||
row[i] *= 2;
|
row[i + 1] = 0;
|
||||||
row[i+1] = 0;
|
score += row[i];
|
||||||
score += row[i];
|
}
|
||||||
}
|
}
|
||||||
} //[4, 0, 2]
|
row = filterZero(row);
|
||||||
row = filterZero(row); //[4, 2]
|
while (row.length < columns) {
|
||||||
//add zeroes
|
row.push(0);
|
||||||
while (row.length < columns) {
|
}
|
||||||
row.push(0);
|
return row;
|
||||||
} //[4, 2, 0, 0]
|
|
||||||
return row;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function slideLeft() {
|
function slideLeft() {
|
||||||
for (let r = 0; r < rows; r++) {
|
let moved = false;
|
||||||
let row = board[r];
|
for (let r = 0; r < rows; r++) {
|
||||||
row = slide(row);
|
let row = board[r];
|
||||||
board[r] = row;
|
let original = [...row];
|
||||||
for (let c = 0; c < columns; c++){
|
row = slide(row);
|
||||||
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
board[r] = row;
|
||||||
let num = board[r][c];
|
|
||||||
updateTile(tile, num);
|
// Check if board changed
|
||||||
}
|
if (JSON.stringify(original) !== JSON.stringify(row)) {
|
||||||
|
moved = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for (let c = 0; c < columns; c++) {
|
||||||
|
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
||||||
|
let num = board[r][c];
|
||||||
|
updateTile(tile, num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return moved;
|
||||||
}
|
}
|
||||||
|
|
||||||
function slideRight() {
|
function slideRight() {
|
||||||
for (let r = 0; r < rows; r++) {
|
let moved = false;
|
||||||
let row = board[r]; //[0, 2, 2, 2]
|
for (let r = 0; r < rows; r++) {
|
||||||
row.reverse(); //[2, 2, 2, 0]
|
let row = board[r];
|
||||||
row = slide(row) //[4, 2, 0, 0]
|
let original = [...row];
|
||||||
board[r] = row.reverse(); //[0, 0, 2, 4];
|
row.reverse();
|
||||||
for (let c = 0; c < columns; c++){
|
row = slide(row);
|
||||||
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
board[r] = row.reverse();
|
||||||
let num = board[r][c];
|
|
||||||
updateTile(tile, num);
|
// Check if board changed
|
||||||
}
|
if (JSON.stringify(original) !== JSON.stringify(board[r])) {
|
||||||
|
moved = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for (let c = 0; c < columns; c++) {
|
||||||
|
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
||||||
|
let num = board[r][c];
|
||||||
|
updateTile(tile, num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return moved;
|
||||||
}
|
}
|
||||||
|
|
||||||
function slideUp() {
|
function slideUp() {
|
||||||
for (let c = 0; c < columns; c++) {
|
let moved = false;
|
||||||
let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
|
for (let c = 0; c < columns; c++) {
|
||||||
row = slide(row);
|
let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
|
||||||
// board[0][c] = row[0];
|
let original = [...row];
|
||||||
// board[1][c] = row[1];
|
row = slide(row);
|
||||||
// board[2][c] = row[2];
|
|
||||||
// board[3][c] = row[3];
|
// Check if board changed
|
||||||
for (let r = 0; r < rows; r++){
|
if (JSON.stringify(original) !== JSON.stringify(row)) {
|
||||||
board[r][c] = row[r];
|
moved = true;
|
||||||
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
|
||||||
let num = board[r][c];
|
|
||||||
updateTile(tile, num);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for (let r = 0; r < rows; r++) {
|
||||||
|
board[r][c] = row[r];
|
||||||
|
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
||||||
|
let num = board[r][c];
|
||||||
|
updateTile(tile, num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return moved;
|
||||||
}
|
}
|
||||||
|
|
||||||
function slideDown() {
|
function slideDown() {
|
||||||
for (let c = 0; c < columns; c++) {
|
let moved = false;
|
||||||
let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
|
for (let c = 0; c < columns; c++) {
|
||||||
row.reverse();
|
let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
|
||||||
row = slide(row);
|
let original = [...row];
|
||||||
row.reverse();
|
row.reverse();
|
||||||
// board[0][c] = row[0];
|
row = slide(row);
|
||||||
// board[1][c] = row[1];
|
row.reverse();
|
||||||
// board[2][c] = row[2];
|
|
||||||
// board[3][c] = row[3];
|
// Check if board changed
|
||||||
for (let r = 0; r < rows; r++){
|
if (JSON.stringify(original) !== JSON.stringify(row)) {
|
||||||
board[r][c] = row[r];
|
moved = true;
|
||||||
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
|
||||||
let num = board[r][c];
|
|
||||||
updateTile(tile, num);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for (let r = 0; r < rows; r++) {
|
||||||
|
board[r][c] = row[r];
|
||||||
|
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
||||||
|
let num = board[r][c];
|
||||||
|
updateTile(tile, num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return moved;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setTwo() {
|
function setTwo() {
|
||||||
if (!hasEmptyTile()) {
|
if (!hasEmptyTile()) {
|
||||||
return;
|
checkGameOver();
|
||||||
}
|
return;
|
||||||
let found = false;
|
}
|
||||||
while (!found) {
|
let found = false;
|
||||||
//find random row and column to place a 2 in
|
while (!found) {
|
||||||
let r = Math.floor(Math.random() * rows);
|
let r = Math.floor(Math.random() * rows);
|
||||||
let c = Math.floor(Math.random() * columns);
|
let c = Math.floor(Math.random() * columns);
|
||||||
if (board[r][c] == 0) {
|
if (board[r][c] == 0) {
|
||||||
board[r][c] = 2;
|
board[r][c] = 2;
|
||||||
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
let tile = document.getElementById(r.toString() + "-" + c.toString());
|
||||||
tile.innerText = "2";
|
tile.innerText = "2";
|
||||||
tile.classList.add("x2");
|
tile.classList.add("x2");
|
||||||
found = true;
|
found = true;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function hasEmptyTile() {
|
function hasEmptyTile() {
|
||||||
let count = 0;
|
for (let r = 0; r < rows; r++) {
|
||||||
for (let r = 0; r < rows; r++) {
|
for (let c = 0; c < columns; c++) {
|
||||||
for (let c = 0; c < columns; c++) {
|
if (board[r][c] == 0) {
|
||||||
if (board[r][c] == 0) { //at least one zero in the board
|
return true;
|
||||||
return true;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return false;
|
}
|
||||||
}
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkGameOver() {
|
||||||
|
// Check if any moves are possible
|
||||||
|
for (let r = 0; r < rows; r++) {
|
||||||
|
for (let c = 0; c < columns; c++) {
|
||||||
|
// Check right
|
||||||
|
if (c < columns - 1 && board[r][c] == board[r][c + 1]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Check down
|
||||||
|
if (r < rows - 1 && board[r][c] == board[r + 1][c]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// No moves available - game over
|
||||||
|
gameOver = true;
|
||||||
|
showGameOver();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showGameOver() {
|
||||||
|
document.getElementById("finalScore").innerText = score;
|
||||||
|
document.getElementById("gameOverOverlay").style.display = "flex";
|
||||||
|
}
|
||||||
|
|||||||
11
Database.php
Normal file
11
Database.php
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<?php
|
||||||
|
$host = "localhost";
|
||||||
|
$user = "root";
|
||||||
|
$pass = "";
|
||||||
|
$db = "game2048";
|
||||||
|
|
||||||
|
$conn = new mysqli($host, $user, $pass, $db);
|
||||||
|
if ($conn->connect_error) {
|
||||||
|
die("Koneksi gagal: " . $conn->connect_error);
|
||||||
|
}
|
||||||
|
?>
|
||||||
Loading…
x
Reference in New Issue
Block a user