2048 game (html,css, and javasript)
ABOUT 2048 GAME (using html, css and javascript)
**2048** is a **game** where you combine numbered tiles in order to gain a higher numbered tile. In this game you start with two tiles, the lowest possible number available is two. Then you will **play** by combining the tiles with the same number to have a tile with the sum of the number on the two tiles.
**How to move the numbers on the board:**
Use your keypad’s direction arrows to slide the number on the board
Moving left = left arrow
Moving right = right arrow
Moving up = up arrow
Moving down = down arrow
**The object of the game**
There are two objectives of this game. However, the main aim is to keep doubling tiles until you finally reach 2048. The second objective is to keep bettering your score.
**How do you better your score?**
The higher the doubled number, the better your score will be. For example, if you reach a 2048 tile with only one 256 or lower additional tile, your score will be lower than if you have a higher doubled tile like 1024. Aiming for a higher score adds a whole new dimension to the game and it can become a positive challenge trying to move past your previous high score.
SOURCE CODE
**html code**
you have to create a separate file for css and javascript and link it to the html file
The codes below allow you to create the markup or skeleton of the 2048 game and also the link to the other source file for css and javascript.
<!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">
<link rel="stylesheet" href="styles.css">
<script src="./index.js"></script>
<script src="./js/Game.js"></script>
<script src="./js/Board.js"></script>
<script src="./js/Handler.js"></script>
<script src="./js/Tile.js"></script>
<title>2048</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>2048-CED</h1>
<div class="score"><strong>score</strong><br />
<span id="score">0</span>
</div>
</div>
<div class="grid-container">
<div id="0-0" class="grid-tile"></div>
<div id="1-0" class="grid-tile"></div>
<div id="2-0" class="grid-tile"></div>
<div id="3-0" class="grid-tile"></div>
<div id="0-1" class="grid-tile"></div>
<div id="1-1" class="grid-tile"></div>
<div id="2-1" class="grid-tile"></div>
<div id="3-1" class="grid-tile"></div>
<div id="0-2" class="grid-tile"></div>
<div id="1-2" class="grid-tile"></div>
<div id="2-2" class="grid-tile"></div>
<div id="3-2" class="grid-tile"></div>
<div id="0-3" class="grid-tile"></div>
<div id="1-3" class="grid-tile"></div>
<div id="2-3" class="grid-tile"></div>
<div id="3-3" class="grid-tile"></div>
</div>
<!-- Add winner text in below div -->
<div id="winner"></div>
</div>
</body>
</html>
css code
you can modify the css codes and change images.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: url("chip.gif") no-repeat center;
background-size: cover;
}
h1 {
font-size: 3em;
background: #000;
color: aqua;
float:left;
}
.score {
float: right;
width: 150px;
height: 70px;
background-color: #000;
color: aqua;
border-radius: 5px;
text-align: center;
}
.score span {
font-size: 2.5em;
font-weight: bolder;
color: white;
justify-content: center;
align-items: center;
}
.header {
overflow: hidden;
}
.container {
margin: auto;
width: 450px;
}
.grid-container {
width:430px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 98px);
grid-template-rows: repeat(4, 98px);
grid-auto-flow: column;
background: #000;
border-radius: 10px;
padding: 10px;
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.grid-tile {
font-size: 3em;
color: #776E65;
font-weight: bolder;
display: flex;
background-color: gray;
border-radius: 5px;
float: left;
justify-content: center;
align-items: center;
}
/* Colors for tiles */
.tile-2 {
background-color: #eee4da;
}
.tile-4 {
background-color: #eee1c9;
}
.tile-8 {
background-color: #f3b27a;
color: white;
}
.tile-16 {
background-color: #f69664;
color: white;
}
.tile-32 {
background-color: #f77c5f;
color: white;
}
.tile-64 {
background-color: #f75f3b;
color: white;
}
.tile-128 {
background-color: #edd073;
color: white;
}
.tile-256 {
background-color: #edcc62;
color: white;
}
.tile-512 {
background-color: #edc950;
color: white;
}
.tile-1024 {
background-color: #edc53f;
color: white;
font-size: 2em;
}
.tile-2048 {
background-color: #edc22e;
color: white;
font-size: 2em;
}
.tile-max {
background-color: darkslategray;
color: white;
font-size: 2em;
}
**javascript code (file name- index.js)**
this javascript code allows to call the other function
also serves as the main function.
window.onload = () => {
Game = new Game()
Board = new Board()
Tile = new Tile()
Handler = new Handler()
Game.startGame()
document.onkeydown = (e) => {
Handler.keyInput(e.keyCode)
const newTile = Tile.get()
Tile.set(newTile.x,newTile.y)
Game.drawUpdate()
}
}
JAVASCRIPT CODE ( Title.js)
For creating tiles
class Tile extends Board{
constructor (props) {
super(props)
this.tileValue = 2
this.board = Board.getBoard()
}
isValid(x,y) { return !this.board[x][y] }
random(){
let tile = {
x:Math.floor(Math.random()* (Game.size)),
y:Math.floor(Math.random()* (Game.size))
}
return tile
}
get(){
let tile = this.random()
if (this.isValid(tile.x, tile.y)) {
return tile
} else {
return this.get()
}
}
set(x,y){
if (!this.board[x][y]){
this.board[x][y] = this.tileValue
}
}
clear(x,y){ this.board[x][y] = null }
hasEmpty(row,col, toCheckRow, toCheckColumn){
return !(this.board[row + toCheckRow][col + toCheckColumn])
}
hasSameValue(row, col, toCheckRow, toCheckColumn){
return (this.board[row][col] === this.board[row + toCheckRow][col + toCheckColumn])
}
}
JAVASCRIPT CODE (Handler.js)
class Handler extends Game{
constructor(props){
super(props)
this.board = Board.getBoard()
}
keyInput(input) {
switch (input) {
case 37: // left
case 72: // H -- vim binding left
return this.moveLeft()
case 38: // up
case 74: // J -- vim binding up
return this.moveUp()
case 39: // right
case 76: // L -- vim binding right
return this.moveRight()
case 40: // down
case 75: // K -- vim binding down
return this.moveDown()
default:
return
}
}
moveLeft(){
this.board.map((column, row) => {
for (let i = 1; i < column.length; i++){
if (this.board[row][i]){
while (i > 0 && Tile.hasEmpty(row, i, 0, -1)){
this.board[row][i-1] = this.board[row][i]
Tile.clear(row, i)
i--
}
if (Tile.hasSameValue(row, i, 0, -1)){
this.board[row][i-1] += this.board[row][i]
Tile.clear(row, i)
}
}
}
})
}
moveUp(){
this.board.map((row, column) => {
for (let i = 1; i < row.length; i++){
if (this.board[i][column]){
while (i > 0 && Tile.hasEmpty(i, column, -1, 0)){
this.board[i-1][column] = this.board[i][column]
Tile.clear(i, column)
i--
}
if (i > 0 && Tile.hasSameValue(i, column, -1, 0)){
this.board[i-1][column] += this.board[i][column]
Tile.clear(i, column)
}
}
}
})
}
moveRight(){
this.board.map((column, row) => {
for (let i = column.length -1; i >= 0; i--){
if (this.board[row][i]){
while (i < column.length -1 && Tile.hasEmpty(row, i,0, 1)){
this.board[row][i+1] = this.board[row][i]
Tile.clear(row, i)
i++
}
if (Tile.hasSameValue(row, i,0, 1)){
this.board[row][i+1] += this.board[row][i]
Tile.clear(row, i)
}
}
}
})
}
moveDown(){
for (let x = this.board.length -1; x >=0; x--){
let column = x
for (let i = this.board[0].length -1; i >= 0; i--){
if (this.board[i][column]){
while (i < this.board[0].length -1 && Tile.hasEmpty(i, column, 1, 0)){
this.board[i+1][column] = this.board[i][column]
Tile.clear(i, column)
i++
}
if (i < this.board[0].length -1 && Tile.hasSameValue(i, column, 1, 0)){
this.board[i+1][column] += this.board[i][column]
Tile.clear(i, column)
}
}
}
}
}
}
JAVASCRIPT CODE (Game.html)
class Game {
constructor(){
this.size = 4
}
startGame(){
for (let i=0;i<2;i++){
const tile = Tile.get()
Tile.set(tile.x, tile.y)
}
this.drawUpdate()
}
drawUpdate(){
this.board = Board.getBoard()
let score = 0
this.board.map((column, row) => {
column.map((tile, col) =>{
tile = document.getElementById(row + '-' + col)
tile.innerText = this.board[row][col]
tile.value = parseInt(tile.innerText) || null
if (!tile.value) {
tile.className = "grid-tile"
} else if (tile.value <= 2048) {
tile.className = "grid-tile tile-"+tile.value
} else {
tile.className = "grid-tile tile-max"
}
score += this.board[row][col]
document.getElementById("score")
.innerText = score
})
})
}
}
javascript code (Board.js)
class Board extends Game{
constructor(props){
super(props)
this.board = this.grid()
}
grid() {
let x = []
for (let i = 0; i < this.size; i++){
let row = []
for(let j=0;j < this.size; j++){
row.push(null)
}
x.push(row)
}
return x
}
getBoard() { return this.board }
}
You can use notepad for creating web page but I recommend you to use IDE (Integrated Environment Development) for editing your program.
EDITOR THAT I USED FOR CREATING PROGRAMS
-**Visual Studio Code** for creating web pages and you can also install extension for other programming languages like c++, c#, c, java, php and many more.
For creating layout of web pages
**Adobe xd** *perfect for creating layouts for your web blogs, e-commerce and many more. It can help you to create a harmonous , neat and clean User interface.*
*credit for logo of xd*
That's for today I hope that this article help you in practicing Web development and designing. For more project just leave a comment or yo can contact me.
this is my fb account: (2) Mekuti Kodotukizomufo | Facebook https://www.facebook.com/Ceddy81021/
Guide and tips to become a great programmer!
How I started
I learn how to program C++ programming language when I was 15 years old but I didn't create any sophisticated program, I just learn the basic fundamental of C++ that time that's why I can only create a simple program. I didn't expect that I will take the path of being a programmer because computer is my weakness. I don't know how to use computer, I don't know how to program that time and I really don't know how does computer works. When I entered high school they offers ICT strand to me and said that I will be included to those student who create programs that's why I learned the basics concept of computer and programming language.
I started to learn new things from the school especially to my teacher in programming his name is Alberto Juntado. He is the one who teach me the fundamentals of C++ and later on I started to learn C++ on my own, I borrow books from the library and to my classmate who has a c++ programming books. When I have a free time I always scan the books and write down all of the unfamiliar words or terminology and search it on google and study it.
I also learn how to program with the help of youtube tutorial, especial mention to my favorite youtube channel TRAVERSY MEDIA, CSS KING -KEVIN POWELL, and GIRAFFE ACADEMY. They are the one who teach me how to dream big and think like a programmer.
**MOTIVATION FOR LEARNING PROGRAMMING !!**
When I started to learn programming, I don't have enough strength and motivation to continue what I am doing I'm just thinking that I like programming. I'm just happy that I am learning programming and that's all, then the next day when I don't like to read programming books then I'm not forcing myself to study just because I don't like. Then I realized that I have to discipline myself and force myself to study even if I don't like, I started to look for a motivation and inspiration . Then I remember my mother, she was sick and my family need money because we are suffering from financial problem. So my family became my inspiration and motivation in life to keep going. I don't want to suffer my family because I didn't do anything just because I'm still young ,helping family is not determine by age it's all about your skills, and capability to do something useful for your family and society.
When I lost motivation then the things that comes to my minds is "If I will stop now then I will no longer become the person that I want, I will no longer help my family for financial problem and I will no longer become the best version of myself". There's no reason for me stop now because I have a lot to do in life and that's make me stronger to keep going in life. Poverty is not enough to drag you down, If you really want to become the best version of yourself then you must keep going and don't forget to seek guidance to the lord.
**LET'S START**
*****WHAT ARE THE THINGS NEEDED FOR LEARNING PROGRAMMING?*****
you need laptop or personal computer
flashdrive
notebook and ball pen or pencil
books for programming or pdf
internet or data.
**Why do we need laptop or personal computer?**
-we need this things for creating algorithm, program and also for documentation plus for creating graphical representation and many more.
**flashdrive**
-for backing up all of the important files that you need for programming. I remember when I was robbed by an unknown guy, he took everything from me starting from laptop, cellular phone, wallet and also pictures (it's very important to me because it's a gift for me huhu) but he forgot my flashdrive and that's makes me happy because all of my files are inside to my 32 GB flashdrive .
**Notebook and Ball pen**
-When I started in programming, I don't have any thing that mention above. I don't have laptop to work with the codes so I only using notebook and ball pen. I am creating the algorithm using notebook and write the program on it and since I don't have IDE or Integrated Development Environment then I will be the one who will compile the codes.. By simulating the program then I can able to determine the outcomes of the program.
Also this two things can help us to retain the things that we learned from somewhere especially in programming, writing down the important notes can help us to become a better programmer.
**programming books and pdf**
-this only optional because there are people who prefer watching tutorials tha reading books, but in my case I love books I love reading books especially in programming. Books is the one who help me to become who I am, many information is inside the books that's why it can assure to you that you will become a great programmer!.
**INTERNET**
-of course it is very important especially if you have a problem in your program and do you want to fix it but there's no one around to help you then GOOGLE is there for you!. Google is your bestfriend and it will never let you down!!
**TIPS**
If you read my previous article then you will know what are the things that I will going to give to you now but in depth.
It is very important that If you want to become a great programmer then you must ready to create a big changes in your life like creating a **good habits** and **avoid vices .** *I remember my golden time with programming when I'm still in progress of accepting the changes in my life, I'm still procastinating and doing unnecessary things and that's normal because I'm still in progress so I don't need to force my self to avoid that things. So I created a plan, I decided to make a schedule for learning programming . I created a big illustration and write down my schedule and post it on my wall so that I will remember what are the things that I promised to myself.*
So every morning when I wake up around 6 then I will have a breakfast then after I ate I will get my C++ book and Read for about an hour, then after that I will open my laptop then create a layout for web page using adobe xd and If have extra time then I am practicing photo manipulation using adobe photoshop for creating original images for web designing.
IMPORTANCE OF GOOD HABIT
Almost half of the actions you perform each day are habits.
Habits are powerful because of neurological cravings.
Habits works through the habit loop: 1: Cue, 2: Routine, 3: Reward.
When a habit emerges, the brain stops fully participating in decision making
The automatization of your actions free up energy that can be used focus to other tasks.
Take control over your habits: Your brain can’t tell the difference between bad and good habits.
**Use The Golden Rule to produce the right changes:**
1: Use the same cue
2: CHANGE THE ROUTINE!
3: Provide the same reward.
Having a good habit can help you to stay motivated and stay focus on the things that you want to achieve. You can become the person you wanted to be, and it can also help you to learn fast and retain all of the things that you've learned . No matter how hard it is , you must follow the rules and regulation of studying!
**Sample Web page that I created:**
programming Language that I used is javascript and for markup I used html and for designing is css (castcading Style Sheet)
for my next article I will show you all of my projects and how did I make it.
I have a lot of programming projects and web development project using html, css, and javascript . SEE YOU AT MY NEXT ARTICLE!
credits to unplash for images..
Thanks to pandemic I developed my programming skills!.
We all know that the pandemic has had many devastating effects on our society, on schools, on businesses, nations and around the world. It is difficult to accept but we have no choice but to stay indoors and ensure the safety of everyone especially the health of every family member.
As time went on, the virus got worse around the world so many businesses went bankrupt and eventually closed down.
The schools also continued to close and created a new method of learning where even if the schools closed, the children would continue to study at home with the help of their teachers and parents.
But even if the children continue to study, there are difficulties because no one teaches them or they become addicted to social media so their education is neglected.
If others struggled during the pandemic due to lack of attention to learning, I being an aspiring programmer the pandemic became a way for me to open my mind to the world of programming.
The pandemic helps me the way to develop my skills and because of this I learned to program simple systems, make console games, web games, web blogs, e-commerce and I also learned to photoshop and use adobe xd for web page layout.
The pandemic did not stop me from discovering hidden talents and helping my fellow students who wanted to become professional programmers.
I started making vlogs/blogs, programming tutorials for c++ programming language and web development but the problem is I don't have enough equipment and I also don't have a stable internet so everything wasn't easy so whenever I am solving any programming problems then I only use ballpen and notebook.
I am also creating a notes for myself about the things that I must study and write down all of the unfamiliar words or terminologies so that if I encounter that word again then I can easily understand it.
Sometimes I am losing interest and motivation in learning programing because I don't have enough equipment just like what I said earlier and but eventually my enthusiasm for learning programming returned and I continued with what I started even though I don't have laptop that time so I used my book to feed myself with knowledge and continue to share knowledge for other students who are studying programming.
Tips for learning programming language.
Create a Good habit.
Focus in one programming language and master it before you jump to another programming language.
Practice every day.
Read books
Pray, wait and trust!.
Very important note!
PLEASE DON'T FORGET TO TAKE CARE OF YOURSELF!.
After you study or practice then give yourself a quality time like having a walk outside or treat yourself so that you can enjoy and relax.
And don't forget to talk to God.
Thank you for reading! Happy coding ☺.
The journey of a young programmer.
Hi I'm Ced! not my real name, in this article you will know more about me and how did I begin in programming career. When I was a kid my dream is to become a dentist but when I enter in highschool, my whole life change because I want to become a chef so I enroll myself in Tech Voc - Bread and pastry but the problem is my sister didn't agree so she ask me to change my decision and choose ICT.
I don't have a choice that time because my grades are not qualified for bread and pastry that's why I change my mind and chose ICT strand. Computer is my weakness that's why I don't want to enter ICT strand. I never tried to open a computer or laptop because I don't know how to operate and how to use it.
Technology is my biggest fear of my life to the point that I want to curse it because I don't want to make myself horrible infront of many people just because I don't know how to open it. So whenever there's an activity in school that involves technology, I will hide myself or sometimes I always make myself busy so that I will not notice especially when there's a group activity.
How did I start in programming?
I didn't expected that my weakness is now become my strengh, I started to learn the very basic concept of computer and how to operate it that's why I started liking the technology. My teacher in ICT teach me the basic fundamental of programming, flowcharting and writing pseudocodes in a piece of paper.
When I started to learn the very basic of programming then I started to keep going and teach myself with the help of my book in programming. The very first programming language that I learned is C++, everyday I push myself to read the book that my classmate gave to me. I didn't practice on hands coding that time because I don't have any gadgets like cellular phones, laptop or personal computer.
So I only use ballpen, notebook and programming books. I discipline myself when it comes to studying programming, I always give time, effort, and dedication when doing programs and solving programming problems.
At the age of 17 I already know how to create a system and games using c++ and also creating a web sites for e-commerce, personal blogs etc. using html, css, javascript, and php.
I also know how to read and program other programming languages like java, visual basic, pascal, python and a little bit in assembly language but I didn't create any sophisticated program using that languages. I only create sophisticated program in c++ and web development.
For my next article I will show you my projects and give you some tips and motivation in learning programming.
I hope you enjoy reading my blog! Thank you and God Bless!
Credits to unplash for images..
@Ceddy-lim
