Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- window.onload=function() {
- let canvas = document.getElementById("2048");
- let g = canvas.getContext("2d");
- window.addEventListener("keydown", function(event) {
- switch(event.keyCode) {
- //left arrow
- case 37: {
- board.mergeLeft();
- break;
- }
- //up arrow
- case 38: {
- board.mergeUp();
- break;
- }
- //right arrow
- case 39: {
- board.mergeRight();
- break;
- }
- //down arrow
- case 40: {
- board.mergeDown();
- break;
- }
- }
- });
- class Tile {
- constructor(value) {
- this.color = '#EEE3DA';
- this.value = value || 2;
- this.moved = false;
- }
- doubleValue() {
- this.value *= 2;
- }
- render(x,y) {
- //update coordinates to proper location
- x = 15+x*115;
- y = 15+y*115;
- g.beginPath();
- g.fillStyle =this.color;
- g.fillRect(x,y,100,100);
- g.font = '50px Arial';
- g.fillStyle = "black";
- g.fillText(""+ this.value,x+35,y+68);
- g.closePath();
- }
- }
- class Board {
- constructor(){
- this.width = 4;
- this.height = 4;
- this.board = [
- [new Tile(), new Tile(), new Tile(), new Tile()],
- [new Tile(), new Tile(), new Tile(), null],
- [new Tile(), null , null , null],
- [null , null , null , null],];
- }
- input() { }
- mergeRight() {
- for (let x=0; x<this.board.length; x++) {
- let merge = 3;
- let tail = 0;
- while (tail < merge) {
- // if the two values looking to be merged are both numbers
- if (this.board[x][merge] !== null && this.board[x][merge-1] !== null) {
- // if the numbers are equal
- if (this.board[x][merge].value === this.board[x][merge-1].value) {
- this.board[x][merge].doubleValue();
- this.board[x][merge-1] = null;
- }
- merge -= 1;
- continue;
- }
- // move everything over to right up until the value just merged
- for (let i = (this.board[x][merge] !== null) ? merge-1 : merge; i>tail; i--) {
- this.board[x][i] = this.board[x][i-1];
- }
- this.board[x][tail] = null;
- tail += 1;
- }
- }
- }
- mergeLeft() {
- for(let x=0; x<this.board.length; x++) {
- let merge = 0;
- let tail = 3;
- while(merge < tail) {
- // if the two values looking to be merged are both numbers
- if (this.board[x][merge] !== null && this.board[x][merge+1] != null) {
- // if the numbers are equal
- if(this.board[x][merge].value === this.board[x][merge+1].value) {
- this.board[x][merge].doubleValue();
- this.board[x][merge+1] = null;
- }
- merge += 1;
- continue;
- }
- // move everything over to left up until the value just merged
- for (let i = (this.board[x][merge] != null) ? merge+1: merge; i<tail; i++) {
- this.board[x][i] = this.board[x][i+1];
- }
- this.board[x][tail] = null;
- tail -= 1;
- }
- }
- }
- mergeUp() {
- for(let x=0; x<this.board.length; x++) {
- let merge = 0;
- let tail = 3;
- while(merge < tail) {
- // if the two values looking to be merged are both numbers
- if (this.board[merge][x] !== null && this.board[merge+1][x] !== null) {
- // if the numbers are equal
- if(this.board[merge][x].value === this.board[merge+1][x].value) {
- this.board[merge][x].doubleValue();
- this.board[merge+1][x] = null;
- }
- merge += 1;
- continue;
- }
- // move everything over to left up until the value just merged
- for (let i = (this.board[merge][x] != null) ? merge+1: merge; i<tail; i++) {
- this.board[i][x] = this.board[i+1][x];
- }
- this.board[tail][x] = null;
- tail -= 1;
- }
- }
- }
- mergeDown() {
- for(let x=0; x<this.board.length; x++) {
- let merge = 3;
- let tail = 0;
- while(tail < merge) {
- // if the two values looking to be merged are both numbers
- if (this.board[merge][x] !== null && this.board[merge-1][x] != null) {
- // if the numbers are equal
- if(this.board[merge][x].value === this.board[merge-1][x].value) {
- this.board[merge][x].doubleValue();
- this.board[merge-1][x] = null;
- }
- merge -= 1;
- continue;
- }
- // move everything over to left up until the value just merged
- for (let i = (this.board[merge][x] != null) ? merge-1: merge; i>tail; i--) {
- this.board[i][x] = this.board[i-1][x];
- }
- this.board[tail][x] = null;
- tail += 1;
- }
- }
- }
- print() {
- let rows = [];
- for (let i=0; i<this.board.length; i++) {
- let rowStr = "";
- for (let j=0; j<this.board[i].length; j++) {
- if (this.board[i][j] !== null)
- rowStr += "[" + ""+this.board[i][j].value + "]";
- else
- rowStr += "[ ]";
- }
- rows.push(rowStr);
- }
- const label = 'board';
- console.group(label);
- rows.forEach(function(row) { console.log(row); });
- console.groupEnd(label);
- }
- render() {
- g.beginPath(); //start drawing
- //draw buffer rectangles
- g.fillStyle = "#BCAD9F";
- for (let i=0; i<=5;i++){
- g.fillRect(i*115,0,15,canvas.height);
- }
- for (let i=0; i<=5;i++){
- g.fillRect(0,i*115,canvas.width,15);
- }
- //draw tiles
- for (let i=0; i<this.board.length;i++) {
- for (let j=0; j<this.board[i].length; j++) {
- let tile = this.board[i][j];
- if (tile == null)
- continue;
- else
- tile.render(j, i);
- }
- }
- g.closePath(); //stop drawing
- }
- }
- let board = new Board();
- function render() {
- //clerar the window buffer
- g.clearRect(0,0, canvas.width, canvas.height)
- //update the frame
- //draw the next frame
- board.render();
- //loop
- setInterval(render,15);
- }
- //start running the program
- render();
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement