您的位置：首页 > 其它

中秋闲来无事，自己写个2048玩玩

2014-09-08 19:33 344 查看
本人从事java web后端开发，接触前段知识甚少，趁中秋闲来无事，写点前端代码自我陶醉下

。

直接贴代码，简单粗暴：

html页面：

<!DOCTYPE html>
<html>
<head>
<title>html5版2048</title>
<meta charset="utf-8"/>
</head>
<body onkeydown="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>


js:

//常量

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];
}
}
}


不得不承认合并逻辑理得不清，所以代码太冗余了，谁有清晰的逻辑，求指点呀。
所需图片：

2048开发所需图片
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航