<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cwl's 2048</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #5ad9ff;
}
</style>
</head>
<body>
<script> function canvas_node() {
/**
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50); ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill(); */
} function rand_num(l,r) {
l = Math.min(l,r);
r = Math.max(l,r);
return Math.floor(Math.random()*(r-l+1)+l);
} function draw_num(num,x,y,x0,y0) {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "black";
ctx.font = "30px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle"
ctx.fillText(num.toString(),x0+x*100+40,y0+y*100+40,100);
} function show_map(arr) {
var ctx = document.getElementById('canvas').getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
var x0 = width/2 - 200;
var y0 = window.innerHeight/5;
ctx.fillStyle = "#8ece44";
ctx.fillRect(x0-25,y0-25,430,430);
ctx.fillStyle = "#ffe945";
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
ctx.fillRect(x0+i*100,y0+j*100,80,80);
}
}
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(arr[i][j]!=0) {
draw_num(arr[i][j],i,j,x0,y0);
}
}
}
} function init_game() {
var arr = new Array(4);
for(var i = 0; i < 4; i ++ ) {
arr[i] = new Array(4);
}
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
arr[i][j] = 0;
}
}
new_num(arr);
new_num(arr);
show_map(arr);
return arr;
} function new_num(arr) {
var ok = 0;
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(!arr[i][j]) {
ok = 1;
}
}
if(ok) {
break;
}
}
while(ok) {
var x = rand_num(0,3);
var y = rand_num(0,3);
var t = rand_num(1,2);
if(arr[x][y] == 0) {
arr[x][y] = t*2;
break;
}
}
} function is_end(arr) {
var xx = [-1, 1, 0, 0];
var yy = [ 0, 0,-1, 1];
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
if(arr[i][j] == 0) {
return false;
}
else {
for(var k = 0; k < 4; k ++ ) {
var next_x = i + xx[k];
var next_y = j + yy[k];
if(is_in(next_x,next_y) && arr[next_x][next_y] == arr[i][j]) {
return false;
}
}
}
}
}
return true;
} function is_in(x,y) {
return x >= 0 && y >= 0 && x < 4 && y < 4;
} function join(arr,dir,x,y) {
var xx = [-1, 1, 0, 0];
var yy = [ 0, 0,-1, 1];
var flag = 0;//判断是否能继续合并
while(is_in(x,y)) {
var next_x = x+xx[dir];
var next_y = y+yy[dir];
if(!is_in(next_x,next_y)) {
break;
}
if(arr[next_x][next_y] == 0) {
arr[next_x][next_y] = arr[x][y];
arr[x][y] = 0;
}
else if(arr[next_x][next_y] == arr[x][y] && !flag) {
arr[next_x][next_y] *= 2;
arr[x][y] = 0;
flag = 1;
}
else break;
x = next_x;
y = next_y;
} } function change(arr,dir) {
if(dir == 2) { // up
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 3) { //down
for(var i = 0; i < 4; i ++ ) {
for(var j = 3; j >= 0; j -- ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 0) {
for(var i = 0; i < 4; i ++ ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
else if(dir == 1) {
for(var i = 3; i >= 0; i -- ) {
for(var j = 0; j < 4; j ++ ) {
join(arr,dir,i,j);
}
}
}
//console.log(arr);
if(is_end(arr)) {
alert("end");
return 1;
}
new_num(arr);
show_map(arr);
return 0;
} function main() {
document.body.style.overflow="hidden";
var can = document.createElement('canvas');
can.id = "canvas";
can.width = window.innerWidth;
can.height = window.innerHeight;
document.body.appendChild(can);
var arr = init_game(); var keyIsDown = 0; window.addEventListener('mousemove', function(event) {
console.log(event)
}) window.addEventListener('keydown',function(event){
var key = event.keyCode;
var ret = 0;
if(keyIsDown == 0) {
keyIsDown = 1;
if(key == 38) {//up
ret = change(arr,2);
}
else if(key == 40) {//down
ret = change(arr,3);
}
else if(key == 37) {//left
ret = change(arr,0);
}
else if(key == 39) {//right
ret = change(arr,1);
}
if(ret) {
arr = init_game();
show_map(arr);
}
}
}) window.addEventListener('keyup',function(){
keyIsDown = 0;
}) window.onresize = function()
{
var can = document.getElementById("canvas");
var height = window.innerHeight;
var width = window.innerWidth;
can.height = height;
can.width = width;
show_map(arr);
}
}
main();
</script>
</body>
</html>
2048