本人从事java web后端开发,接触前段知识甚少,趁中秋闲来无事,写点前端代码自我陶醉下。
直接贴代码,简单粗暴:
html页面:
<!DOCTYPE html>
<html>
<head>
<title>html5版2048</title>
<meta charset="utf-8"/>
</head>
<body οnkeydοwn="onKeyDown();">
<!--提前载入所需图片-->
<img id="img_2" src="img/2.png" height="0"/>
<img id="img_4" src="img/4.png" height="0"/>
<img id="img_8" src="img/8.png" height="0"/>
<img id="img_16" src="img/16.png" height="0"/>
<img id="img_32" src="img/32.png" height="0"/>
<img id="img_64" src="img/64.png" height="0"/>
<img id="img_128" src="img/128.png" height="0"/>
<img id="img_256" src="img/256.png" height="0"/>
<img id="img_512" src="img/512.png" height="0"/>
<img id="img_1024" src="img/1024.png" height="0"/>
<img id="img_2048" src="img/2048.png" height="0"/>
<center>
<canvas id="can1" width="450px" height="450px"
style="border: 1px solid grey;background-color: #BBADA0">
您的浏览器不支持html5!
</canvas>
</center>
<script type="text/javascript" src="2048.js">
</script>
</body>
</html>
//常量
var canvas=document.getElementById("can1");
var cxt=canvas.getContext("2d");
cxt.fillStyle="#CCC0B3";
var table = new Array();
init();
drawTable();
/**
*初始化
*/
function init() {
for (var i = 0; i < 4; i++) {
table[i] = new Array();
for (var j = 0; j < 4; j++) {
table[i][j] = 0;
}
}
generate();
generate();
}
/**
*绘制
*/
function drawTable() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
var x = 10 * (j + 1) + j * 100;
var y = 10 * (i + 1) + i * 100;
cxt.fillRect(x, y, 100, 100);
if (table[i][j] != 0) {
var img = document.getElementById("img_" + table[i][j]);
cxt.drawImage(img, x, y, 100, 100);
}
}
}
}
/**
*判断游戏是否结束
*/
function gameOver() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (table[i][j] == 0) {
return false;
}
}
}
return true;
}
/**
*在空位置生成2或者4
*/
function generate() {
if (gameOver()){
alert("游戏结束,byebye");
return;
}
var indexs = new Array();
var len = 0;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (table[i][j] == 0) {
indexs[len++] = i * 4 + j;
}
}
}
var idx = Math.floor(Math.random() * len);
var r = Math.random() > 0.5 ? 2 : 4;
table[Math.floor(indexs[idx] / 4)][indexs[idx] % 4] = r;
}
/**
*键盘驱动事件
*/
function onKeyDown() {
var keyID = event.keyCode;
if(keyID === 38 || keyID === 87) { // up arrow and W
mergeUp();
}
if(keyID === 39 || keyID === 68) { // right arrow and D
mergeRight();
}
if(keyID === 40 || keyID === 83) { // down arrow and S
mergeDown();
}
if(keyID === 37 || keyID === 65) { // left arrow and A
mergeLeft();
}
//重绘
generate();
drawTable();
}
function mergeLeft() {
var eles = new Array();
for (var i = 0; i < 4; i++){
//1、平移
var len = 0;
for (var j = 0; j < 4; j++){
if (table[i][j] > 0){
eles[len++] = table[i][j];
table[i][j] = 0;
}
}
for (var j = 0; j < len; j++){
table[i][j] = eles[j];
}
//2、合并
for (var j = 1; j < len; j++){
if (table[i][j] == table[i][j-1]){
table[i][j-1] = 2 * table[i][j-1];
table[i][j] = 0;
}
}
//3、再次平移
len = 0;
for (var j = 0; j < 4; j++){
if (table[i][j] > 0){
eles[len++] = table[i][j];
table[i][j] = 0;
}
}
for (var j = 0; j < len; j++){
table[i][j] = eles[j];
}
}
}
function mergeRight() {
var eles = new Array();
for (var i = 0; i < 4; i++){
//1、平移
var len = 0;
for (var j = 3; j >= 0; j--){
if (table[i][j] > 0){
eles[len++] = table[i][j];
table[i][j] = 0;
}
}
for (var j = 3; j >= 4 - len; j--){
table[i][j] = eles[3-j];
}
//2、合并
for (var j = 2; j >= 4 - len; j--){
if (table[i][j] == table[i][j+1]){
table[i][j+1] = 2 * table[i][j+1];
table[i][j] = 0;
}
}
//3、再次平移
len = 0;
for (var j = 3; j >= 0; j--){
if (table[i][j] > 0){
eles[len++] = table[i][j];
table[i][j] = 0;
}
}
for (var j = 3; j >= 4 - len; j--){
table[i][j] = eles[3-j];
}
}
}
function mergeUp() {
var eles = new Array();
for (var j = 0; j < 4; j++){
//1、平移
var len = 0;
for (var i = 0; i < 4; i++){
if (table[i][j] > 0){
eles[len++] = table[i][j];
table[i][j] = 0;
}
}
for (var i = 0; i < len; i++){
table[i][j] = eles[i];
}
//2、合并
for (var i = 1; i < len; i++){
if (table[i][j] == table[i-1][j]){
table[i-1][j] = 2 * table[i-1][j];
table[i][j] = 0;
}
}
//3、再次平移
len = 0;
for (var i = 0; i < 4; i++){
if (table[i][j] > 0){
eles[len++] = table[i][j];
table[i][j] = 0;
}
}
for (var i = 0; i < len; i++){
table[i][j] = eles[i];
}
}
}
function mergeDown() {
var eles = new Array();
for (var j = 0; j < 4; j++){
//1、平移
var len = 0;
for (var i = 3; i >= 0; i--){
if (table[i][j] > 0){
eles[len++] = table[i][j];
table[i][j] = 0;
}
}
for (var i = 3; i >= 4 - len; i--){
table[i][j] = eles[3-i];
}
//2、合并
for (var i = 2; i >= 4 - len; i--){
if (table[i][j] == table[i+1][j]){
table[i+1][j] = 2 * table[i+1][j];
table[i][j] = 0;
}
}
//3、再次平移
len = 0;
for (var i = 3; i >= 0; i--){
if (table[i][j] > 0){
eles[len++] = table[i][j];
table[i][j] = 0;
}
}
for (var i = 3; i >= 4 - len; i--){
table[i][j] = eles[3-i];
}
}
}
不得不承认合并逻辑理得不清,所以代码太冗余了,谁有清晰的逻辑,求指点呀。
所需图片: