JavaScript 2048小游戏

最新推荐文章于 2024-04-17 08:04:29 发布
最新推荐文章于 2024-04-17 08:04:29 发布
阅读量732 收藏 3
点赞数
分类专栏： 编程语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012583095/article/details/46592925
版权 
<html>
<head>
<style type="text/css">
.haha {
	border-width: 2;
	font-size: 50;
	font-weight: bold;
	color: white;
	background-color: grey;
	text-align: center;
	overflow: hidden;
}
</style>
</head>
<script>
	var a = new Array(16);
	clear();
	produce();
	init();
	draw();
	onkeydown = keyDown;
	function clear(){
		for(var i=0;i<16;i++)a[i]=0;
	}
	function down() {
		turnClockwise();
		left();
		turnClockwise();
		turnClockwise();
		turnClockwise();
	}
	function up() {
		turnClockwise();
		turnClockwise();
		turnClockwise();
		left();
		turnClockwise();
	}
	function right() {
		turnClockwise();
		turnClockwise();
		left();
		turnClockwise();
		turnClockwise();
	}
	function left() {
		for (var i = 0; i < 4; i++) {
			var k = 0;
			var merge = false;
			for (var j = 0; j < 4; j++) {
				if (a[i * 4 + j] != 0) {
					if (k > 0 && !merge && a[i * 4 + j] == a[i * 4 + k - 1]) {
						a[i * 4 + k - 1] *= 2;
						merge = true;
					} else {
						a[i * 4 + k++] = a[i * 4 + j];
					}
				}
			}
			for (; k < 4; k++)
				a[i * 4 + k] = 0;
		}
	}
	function turnClockwise() {
		var b = new Array(16);
		for (var i = 0; i < 4; i++) {
			for (var j = 0; j < 4; j++) {
				b[j * 4 + 3 - i] = a[i * 4 + j];
			}
		}
		a = b;
	}
	function keyDown(e) {
		var save = a.slice(0, a.length);
		switch (e.keyCode) {
		case 37:
			left();
			break;
		case 38:
			up();
			break;
		case 39:
			right();
			break;
		case 40:
			down();
			break;
		}
		if (over()) {
			alert('you died!'); 
			clear();
			produce();
			draw();
		} else if (moved(save, a)) {
			produce();
			draw();
		}
	}
	function moved(a, b) {
		for (var i = 0; i < 16; i++)
			if (a[i] != b[i])
				return true;
		return false;
	}
	function over() {
		for (var i = 0; i < 16; i++) {
			if (a[i] == 0)
				return false;
		}
		for (var i = 0; i < 4; i++) {
			for (var j = 0; j < 3; j++) {
				if (a[i * 4 + j] == a[i * 4 + j + 1]
						|| a[j * 4 + i + 4] == a[j * 4 + i]) {
					return false;
				}
			}
		}
		return true;
	}
	function produce() {
		var x;
		do {
			x = Math.floor(Math.random() * 16);
		} while (a[x] != 0);
		a[x] = Math.random() > 0.2 ? 2 : 4;
	}
	function draw() {
		for (var i = 0; i < 4; i++) {
			for (var j = 0; j < 4; j++) {
				var img = document.getElementById('pic' + (i * 4 + j));
				img.innerHTML = a[i * 4 + j] == 0 ? "" : a[i * 4 + j];
				img.style.color = (a[i * 4 + j] * 120) & 0xffffff;
			}
		}
	}
	function cout(s) {
		document.write(s);
	}
	function init() {
		cout("<table align='center'>");
		for (var i = 0; i < 4; i++) {
			cout("<tr>");
			for (var j = 0; j < 4; j++) {
				cout("<td width=150 height=150  class='haha' id=pic"
						+ (i * 4 + j) + ">" + a[i * 4 + j] + "</td>");
			}
			cout("</tr>");
		}
		cout("</table>");
	}
</script>
<html>


C# 版

需要创建2,4,8,16 ......4096 等很多张png图片,当然也可以直接更改一下本程序

using System;
using System.Windows.Forms;
using System.Drawing; 
class form : Form
{
    public form()
    {
        ClientSize = new Size(640, 640);
        MaximizeBox = MinimizeBox = false;
        StartPosition = FormStartPosition.CenterScreen;
        FormBorderStyle = FormBorderStyle.None;
        Opacity = 0.8;
        Location = new Point(100, 0);
        KeyUp += press;
        Paint += init;
    }
    void press(object o, KeyEventArgs e)
    {
        e.Handled = true;
        switch (e.KeyCode)
        {
            case Keys.Up: up(); break;
            case Keys.Down: down(); break;
            case Keys.Left: left(); break;
            case Keys.Right: right(); break;
            case Keys.F1: text(); return;
            case Keys.Escape: lose(); break;
            default: return;
        }
        if (!moved && !over()) return;
        if (overflow())
        {
            win(); return;
        }
        if (!produce())
        {
            if (canMove()) return;
            lose(); return;
        }
        draw();
    }
    bool canMove()
    {
        int i, j;
        for (i = 0; i < 4; i++)
            for (j = 0; j < 3;j++ )
                if (a[i, j] == a[i, j + 1]||a[j,i]==a[j+1,i])
                    return true;
        return false;
    }
    void draw()
    {
        int i, j;
        int w = ClientSize.Width / 4, h = ClientSize.Height / 4;
        Bitmap bit = new Bitmap(ClientSize.Width, ClientSize.Height);
        Graphics.FromImage(bit).Clear(Color.AliceBlue);
        for (i = 0; i < 4; i++)
            for (j = 0; j < 4; j++)
                Graphics.FromImage(bit).DrawImage(Image.FromFile(a[i, j]+".png"), new Rectangle(j* w, i * h, w - 2, h - 2));
        CreateGraphics().DrawImage(bit,0,0);
    }

    static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new form());
    }
    int[,] a = new int[4, 4];
    bool moved;
    Random r = new Random();
    void init(object o, EventArgs e)//编程时能不调用别的函数就尽量不要调用
    //调用多了会忘记有没有调用,用许多个小函数累积起来更好
    //集中调用小函数,不要总是调用
    //一个函数一个功能
    {
        int i, j;
        for (i = 0; i < 4; i++)
            for (j = 0; j < 4; j++)
                a[i, j] = 0;
        produce();
        draw();
    }
    bool produce()
    {//每按一下键,就会产生一个新数字,这个新数字的位置是随机的
        int[,] b = new int[16, 2];//用来存储空位,这些空位可以产生新数字
        int i, j;
        int size = 0;
        for (i = 0; i < 4; i++)
            for (j = 0; j < 4; j++)
            {
                if (a[i, j] == 0)
                {
                    b[size, 0] = i;
                    b[size, 1] = j;
                    size++;
                }
            }
        if (size == 0) return false;//如果没有空位了,游戏就结束了
        i = r.Next() % size;
        if (r.Next() % 5 == 0) a[b[i, 0], b[i, 1]] = 4;
        else a[b[i, 0], b[i, 1]] = 2;
        return true;
    }
    void up()
    {//按下向上键时,需要对数字进行合并整理,这个函数是最重要的
        moved = false;
        int i, j, k; 
        for (i = 0; i < 4; i++)
        { 
            for (j = 0; j < 4; j++)
            {
                if(a[i,j]==0)continue;
                for (k = i; k > 0; k--)
                {
                    if (a[k-1, j] != 0) break;
                    a[k-1, j] = a[k, j];
                    a[k, j] = 0;
                    moved = true;
                }
            }
        }
        for (j = 0; j < 4;j++ )
            for (i = 3; i > 0; i--)
            {
                if (a[i, j] != 0 && a[i, j] == a[i - 1, j])
                {
                    a[i - 1, j] *= 2;
                    a[i, j] = 0;
                    moved = true;
                    break;
                }
            }
    }
    void clockwise()
    {//将数组表示的4*4方格顺时针转90度.一会儿会有大用.
        int i, j;
        int[,] b = new int[4, 4];
        for (i = 0; i < 4; i++)
            for (j = 0; j < 4; j++)
                b[i, j] = a[i, j];
        for (i = 0; i < 4; i++)
            for (j = 0; j < 4; j++)
                a[i, j] = b[3 - j, i];
    }
    void counterclockwise()
    {//将4*4方格逆时针转90度
        clockwise();
        clockwise();
        clockwise();
    }
    void upsidedown()
    {//将4*4方格旋转180度
        clockwise();
        clockwise();
    }
    void down()
    {//向下调整可以转化为向上调整,这样做是以牺牲效率为代价去换取编程的简洁清晰
        upsidedown();
        up();
        upsidedown();
    }
    void left() 
    {
        clockwise();
        up();
        counterclockwise();
    }
    void right()
    {
        counterclockwise();
        up();
        clockwise();
    }
    void win()
    {
        DialogResult o = new DialogResult();
        o = MessageBox.Show("您胜利了,不用再玩了!", "result", MessageBoxButtons.RetryCancel);
        if (o == DialogResult.Retry)
            init(null, null);
        else Application.Exit();
    }
    void lose()
    {//输了
        DialogResult o = new DialogResult();
        o = MessageBox.Show("您输了!", "result", MessageBoxButtons.RetryCancel);
        if (o == DialogResult.Retry)
            init(null, null);
        else Application.Exit();
    }
    void text()
    {
        MessageBox.Show("The arrow represent up,down,left and right\n"
            + "Esc is quit\n"
            + "F1 is reading description text"
            + "\n\t\tmade by weidiao.neu", "help"
            );
    }
    bool over()
    {
        int i, j;
        for (i = 0; i < 4; i++)
            for (j = 0; j < 4; j++)
                if (a[i, j] == 0) return false;
        return true;
    }
    bool overflow()
    {
        int i, j;
        for (i = 0; i < 4; i++)
            for (j = 0; j < 4; j++)
                if (a[i, j] > 4096)
                    return true;
        return false;
    }
}


wei.yinfu
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2023-04-14 使用纯JS实现一个2048小游戏
GAARA
04-14 1798
一.实现思路 1.2048的逻辑 2.移动操作的过程中会有三种情况 二.代码部分:分为初始化部分和移动部分 1.初始化部分 1.1.生成第一个方块: 1.2.生成第二个方块: 2.移动过程部分: 三.实现代码 1.HTML部分 2.CSS部分 3.JS部分 3.1.game对象的属性 3.2.game对象的start方法 3.3.game对象的randomNum方法 3.4.game对象的dataView方法 3.5.game对象的isGameOver方法 3.6.game对象中设置移动的方法(以左移动为例
javascript 2048小游戏
04-30
JavaScript 2048小游戏是一款基于网页的数字合成游戏，灵感来源于2014年流行的“2048”游戏。这个游戏的目标是通过滑动屏幕上的数字方块，让相同数值的方块相撞合并，最终达到2048这个数字。在这个项目中，源代码是...
【javascript】2048小游戏
qq_63806300的博客
06-27 1854
2048是一款风靡全球的小游戏，具体的玩法就不多说了，最早于2014年Gabriele Cirulli在github发表的版本。不过此项目依赖于GULP。本文就用javascript写出一个较为完整的2048游戏。以下是本文实现的游戏界面：2048的实现可以分为3个部分：游戏界面绘制、分数逻辑和方向控制逻辑。
JavaScript实现2048小游戏，我终于赢了一把，高级程序员面试题及答案
最新发布
m0_60707263的博客
04-17 923
资料过多，篇幅有限自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！case 38://上dir=1;
JavaScript之2048 JS css
diaodaya5842的博客
09-16 172
/*game2048*/ //事件处理对象 varEventUtil={ //添加事件 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,ha...
用javascript实现简版2048小游戏
bs775926015的博客
04-05 1792
** 1、2048小游戏玩法和规则 ** 2048是一款休闲小游戏。 2048界面有16宫格，可以用键盘方向键选择上下左右四个方向进行操作，如果有相邻的两个数字相同就会合并，相加组成新数字，并且每次移动或合并后界面会自动增加一个数字。 当16宫格中没有空格子，且四个方向都无法操作时，游戏会结束。目的是合并出2048这个数字，获得更高分数。 2、游戏界面截图 3、2048游戏实现原理 1、游戏界面由16宫格组成，可以看成是矩阵的形式。 2、在HTML中给每个格子添加类名以及属性，来记录每个格子的位置。 3、
Javascript-小游戏2048 超详细教学说明
qq_41045128的博客
06-16 1983
最近在学前端，趁热找几个小游戏练练手，这里主要用到了html，css，JavaScript
Javascript编写2048小游戏
10-23
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码，有需要的小伙伴可以参考下。
javascript版2048小游戏
10-24
本文给大家分享的是使用javascript制作的2048小游戏的代码，仅仅是想锻炼下自己的编程代码风格，尽量做的规范些，小伙伴们多多给些建议。
JavaScript 实现 2048 小游戏
11-30
本项目为使用JavaScript实现2048小游戏。游戏玩法：在 4*4 的16宫格中，您可以选择上、下、左、右四个方向进行操作，数字会按方向移动，相邻的两个数字相同就会合并，组成更大的数字，每次移动或合并后会自动增加一...
JavaScript实现2048小游戏
03-25
JavaScript实现的2048小游戏是一款基于HTML5、CSS3和原生JavaScript的轻量级游戏，它通过简单的数字合并规则提供了一种富有挑战性的娱乐方式。在这个项目中，我们将探讨JavaScript的核心概念以及如何利用它们来创建...
Javascript实现的2048游戏
12-16
2048的JS版，能够实现2048的全部功能，可以根据自己需要做更改
Javascript小游戏2048
12-14
JavaScript小游戏，网页版2048，支持键盘事件和鼠标事件。
javascript实现2048小游戏
热门推荐
funwj的博客
08-01 3万+
最近打算系统的学习一下javascript，想做点项目练手，就选择用javascript实现我比较喜欢玩的2048游戏，大体完成以后还是蛮有成就感的。 游戏相关截图：
JavaScript--2048游戏（一）
带翅膀的猫的博客
05-24 4304
2048游戏项目第一天实现效果： 第一天完成项目内容和样式的制作 项目界面结构分析： 对应html和css样式如下<!--HTML内容--> <p>Score:<span id="score"></span></p> <div id="back"> <!--背景--> <!--第一行-->
javascript写的2048游戏
Allenzc的博客
12-08 2776
原生JS写的2048游戏，后又对js代码进行了精简，写了左移逻辑，其他方向采用转置矩阵后左移代码复用。代码如下： 2048小游戏 0--> SCORE:0
用javascript实现一个2048游戏
weixin_34418883的博客
05-01 125
早就想自己写一个2048游戏了，昨晚闲着没事，终于写了一个 如下图，按方向键开始玩吧。 如果觉得操作不方便，请直接打开链接玩吧： http://gujianbo.1kapp.com/2048/2048.html 附上源代码链接：https://github.com/gujianbo/js2048 个人博客地址：http://gujianbo.1kapp.com/ 新浪微...
javascript2048小游戏实现
06-28
JavaScript2048小游戏的实现是通过使用JavaScript编写代码来创建一个2048游戏的网页应用程序。该游戏的核心逻辑是通过将相同数字的方块合并来达到2048的目标。在实现过程中，需要使用HTML和CSS来创建游戏的界面，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值