2048游戏简单实现

最新推荐文章于 2024-04-27 21:34:56 发布
最新推荐文章于 2024-04-27 21:34:56 发布
阅读量7k 收藏 47
点赞数 8
分类专栏： 前端学习笔记 文章标签： 2048 网页小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aimee_ice/article/details/89021673
版权

前言

最近突然心血来潮想写一个网页小游戏，我看网上有很多人推荐写2048来练练手，遂开始写。目前为止，基本功能已经实现，只是没有添加相应的动画效果，待以后有机会补上（其实我就是动画这块太菜了 T_T）

前方长文预警！！！

游戏截图

    

项目结构

这个项目结构挺简单的，应该也都看得懂，在此仅对js文件夹进行描述，其余的就不再赘述啦

（main.js是入口文件，move.js主要就是一些移动的处理，support.js里是对移动块背景颜色和文字颜色的处理，后面要添加的动画效果也准备写在这个文件里）

主要功能

1.游戏初始化：新建游戏4×4的16宫格画布，随机格子上生成2或者4两个数字

2.格子的移动：先判断能否移动，移动后判断能否合并，合并后改变格子颜色和数字

3.新格子的生成：移动一次，就在剩余的空格子中随机生成一个2或者4

4.判赢：16宫格中合并出了“2048”则为游戏胜利

5.判输：16宫格中没有剩余空格子且不能再向任何方向移动则为游戏失败

分步代码

一、HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>2048</title>
  <script
  src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <header>
    <div class="left">
      <span class="title">2048</span>
      <p class="slogan_1">Play 2048 Game Online</p>
      <p class="slogan_2">Join the numbers and get to the 2048 tile!</p>
    </div>
    <div class="right">
      <p class="score-box">score<br /> 
        <span id="score">669</span>
      </p>
      <button type="button" id="new-game">New Game</button>
    </div>
  </header>
  <div id="grid-con">
    <!-- 第一行 -->
    <div class="grid-cell" id="grid-cell-0-0"></div>
    <div class="grid-cell" id="grid-cell-0-1"></div>
    <div class="grid-cell" id="grid-cell-0-2"></div>
    <div class="grid-cell" id="grid-cell-0-3"></div>

    <!-- 第二行 -->
    <div class="grid-cell" id="grid-cell-1-0"></div>
    <div class="grid-cell" id="grid-cell-1-1"></div>
    <div class="grid-cell" id="grid-cell-1-2"></div>
    <div class="grid-cell" id="grid-cell-1-3"></div>
    
    <!-- 第三行 -->
    <div class="grid-cell" id="grid-cell-2-0"></div>
    <div class="grid-cell" id="grid-cell-2-1"></div>
    <div class="grid-cell" id="grid-cell-2-2"></div>
    <div class="grid-cell" id="grid-cell-2-3"></div>
    
    <!-- 第四行 -->
    <div class="grid-cell" id="grid-cell-3-0"></div>
    <div class="grid-cell" id="grid-cell-3-1"></div>
    <div class="grid-cell" id="grid-cell-3-2"></div>
    <div class="grid-cell" id="grid-cell-3-3"></div>
  </div>
  <div class="mask"></div>    <!-- 灰色遮罩层：游戏结束时随gameover框一并出现 -->
  <div id="game-over">
    Game Over!
  </div>
  <div id="game-win">
    Congradulation!
  </div>
  <script src="js/main.js"></script>
  <script src="js/move.js"></script>
  <script src="js/support.js"></script>
</body>
</html>

HTML结构的主要思路为：利用网格布局将游戏画布的16宫格绘制出来，通过class定制样式，id定位到具体的格子以重绘格子样式。

网格布局的详细

最低0.47元/天 解锁文章
Zoey Chou
关注
  • 8
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Python 实战】---- 小游戏2048实现
止于至善
05-13 659
1. 预览 2. 实现思路 3. 依赖引入 import tkinter as tk import numpy as np import random 4. 代码解析 4.1 初始化参数 初始化画布得宽高和网格数量boardNum*boardNum 计算每个格子得宽高 初始化游戏是否结束和记分器归0 初始化网格列表init_board def __init__(self, width=340, height=340, boardNum = 4): # 初始化参数 self.wi
基于Python的2048(GUI版)
Tu_Junkai的博客
02-07 102
【代码】基于Python的2048(GUI版)
网页版2048实战--简介及构建页面
知世俗而不世俗
08-04 3282
引言       《2048》是比较流行的一款数字游戏。原版2048首先在GitHub上发布，原作者是Gabriele Cirulli。它是基于《1024》和《小3传奇》的玩法开发而成的新型数字游戏 简介        1、此次实战主要用的技术有：HTML、CSS、JavaScript、JQuery
python编程游戏代码大全,python超简单小游戏代码
Oona_01的博客
04-27 598
37、 people = int(input('请输入{}到{}之间的数:'.format(start, end)))47、 print('等待电脑了输入{}到{}之间的数:'.format(start, end))10、 user = int(input('请出拳 0（石头） 1（剪刀） 2（布）'))50、 print('电脑输入：{}'.format(com))14、 data = ['石头', '剪刀', '布']42、 print('小了')55、 print('小了')
2048小游戏 vue+uni-app 简单实现了一下
m0_57533694的博客
04-19 3777
做的一个 挺有意思的小游戏
2048小游戏思路
Linzsong的博客
03-17 1168
在面试的时候被面试官问道2048的实现思路，以下是总结。 2048小游戏思路 1、初始化，在空格子中产生两个2,4的随机数。 (1)封装生成随机数方法，将min + Math.round((max-min) * Math.random())封装为getRandom(min,max)方法，该方法接受两个值，最大值max和最小值min，getRandom方法是获取[min,max]之间的一个随机数； ...
(C语言)2048游戏实现
qq_24830869的博客
06-25 1549
C语言完美实现游戏2048，源代码详解，界面美化。
2048小游戏C语言实现代码
08-27
C语言实现2048小游戏代码解析 本资源总结了使用C语言实现2048小游戏的代码，涉及到游戏的基本结构、游戏逻辑、随机数生成、游戏界面设计等多个方面。 一、游戏结构 游戏的结构主要包括游戏的初始化、游戏的循环、...
简单实现C语言2048游戏
08-27
本文将详细介绍如何使用C语言来实现2048游戏。该游戏是一种流行的数字游戏，玩家通过滑动方块来合并数字，最终目标是获取2048的数字。 游戏原理 游戏的核心是使用二维数组来存储游戏板上的数字，每个数字可以是2的...
2048_2048实现_2048小游戏_
10-04
本文将深入探讨如何在Linux环境下实现2048小游戏，包括游戏的基本规则、程序设计思路以及具体的代码实现。 首先，2048的游戏规则是：在一个4x4的格子棋盘上，每次可以选择上下左右四个方向之一进行滑动，棋盘上的...
H5实现的2048小游戏
07-10
游戏规则非常简单：您需要通过滑动屏幕上的数字方块，使相同数字的方块相加，直到达到2048的方块。每次滑动屏幕，所有的方块都会向滑动的方向移动，并且相同数字的方块会相加。您的目标是在有限的步数内达到2048的...
2048小游戏
05-31
2048游戏操作说明 1、可使用鼠标或大小键盘上的方向键进行操作； 2、Play按钮 重新开始游戏； 3、Undo按钮 取消本次操作，回到上一步。 Ctrip2048游戏算法 1、游戏开始时随机的产生2个数值为2/4的方格，其中1个方格置于4个角中的一个位置， 另一个方格随机的置于其它位置，其余方格值为0。 2、每次移动鼠标或按方向键后，逐行计算移动后的方格值。每行移动的算法是：先将所 有值为0的数移至行首。能后从行尾开始逐一和前一个数比较，如果相等则合并这2个格子。 3、每合并一次格子，将其值累计到游戏总分中。 4、一次移动操作结束后，如果有方格移动了位置，则在所有值为0的方格中随机的分配一个2/4的值。 5、所有方格值不为0且上下、左右相邻的方格都不相等，则游戏结束。 6、2出现的概率为90%，4出现的概率为为10%。
C语言代码实现2048游戏
08-25
C语言实现2048游戏的设计与实现 在本文中，我们将详细介绍如何使用C语言实现2048游戏。2048是一款非常popular的数字游戏，游戏的规则非常简单，即将相同的数字合并起来，直到最后达到2048为止。在本文中，我们将...
网页版2048html制作,基于HTML+CSS+JS的网页版2048的实现
weixin_39587010的博客
06-19 2306
ELECTRONICS WORLD·j6； 雾 与 粤 赛 基 于HTM L+CSS+J S的网页；I~2 048的实现 【摘要 】描述了一个使用HTML和css进行uI界面设计，使用Js进行后台逻辑设计的网页版2()48小游戏的实现．． 【关键词 】HTML；CSS；js；网页版；2()48 1．前言 2048是一款简单而流行的休闲益销类小游戏，凭借着简单而1 失美观的ul设计 与独特的创意吸0...
网页版2048html制作,基于HTML＋CSS＋JS的网页版2048的实现.pdf
weixin_36231975的博客
06-19 4200
ELECTRONICS WORLD ・探索与观察基于HTML+CSS+JS的网页版2048的实现山西农业大学 王艺燕【摘要】描述了一个使用HTML和CSS进行UI界面设计，使用JS进行后台逻辑设计的网页版2048小游戏的实现。【关键词】HTML；CSS；JS；网页版；20481.前言2048是一款简单而流行的休闲益智类小游戏，凭借着简单而不失美观的UI设计与独特的创意吸引了许多的游戏玩家。游戏一...
网页版《2048游戏》
Aqu-蓝空的博客
08-06 1469
源码下载地址：https://gitee.com/cheng-hanyuan/example_projec/tree/main/%E6%A1%88%E4%BE%8B%E9%A1%B9%E7%9B%AE/2048
2048小游戏——网页版（基础篇）
weixin_30514745的博客
03-07 1391
这是一个用js写的网页版2048游戏，实现2048游戏的基本功能。 比如：绘制网格、随机生成数字、动画移动数字、累计分数、重置游戏等。 同时，笔者在自己的理解下，对代码进行了非常详细的注释，相信有一点点基础的开发人员都能迅速看懂，快来试试吧！ 当然，大神还可以在这个文档的基础上对游戏进行改进，比如添加一些更炫酷的动画效果，自定义数字、文字、图像等。 该项...
2048的C语言实现
热门推荐
SCaryon的博客
06-26 1万+
前言高中时班上有一位dalao用了大概一周的时间搞出来了控制台版的2048。然后今天上实验课的时候突发想到，我既然现在已经是这个专业的了，然后自认为自己的代码量还算看得过去，这个控制台版的应该不会太难，于是就开始敲。 一天的时间，敲出来了V1.0的版本，有一些和原版不太一样的地方，但我确实不知道怎么去改，先挂在这里。后面想到了再更把。大致思路其实2048的变化过程玩过游戏的应该都是知道的，在这里就
2048游戏核心实现
weixin_40947140的博客
08-26 1370
核心功能实现： 代码1（https://blog.csdn.net/hebtu666/article/details/81663648） def left():#向左 for i in range(4):#遍历每一行 for j in range(3):#遍历每一行的每个元素 for k in range(j+1,4):#遍历j右边的元素 ...
c语言实现2048游戏
最新发布
05-23
2048游戏的实现需要掌握C语言的基本语法和游戏开发相关知识。以下是实现2048游戏的一些基本步骤： 1. 定义游戏的数据结构：需要定义游戏面板、格子、方向等相关数据结构。 2. 初始化游戏：需要初始化游戏面板，将初始的数字随机放置在面板上。 3. 监听用户操作：需要监听用户的操作，例如键盘输入等。 4. 移动格子：根据用户的操作，将数字格子进行移动，合并等操作。 5. 判断游戏是否结束：判断游戏是否结束，例如没有空格子或者相邻数字相同等情况。 6. 更新分数和最高分数：根据游戏的规则，更新玩家的分数和最高分数。 7. 重新开始游戏：当游戏结束后，需要提示玩家，并提供重新开始游戏的选项。 以下是一份简单的C语言2048游戏实现代码，仅供参考： ``` #include <stdio.h> #include <stdlib.h> #include <time.h> #include <conio.h> #define BOARD_SIZE 4 #define WIN_SCORE 2048 int board[BOARD_SIZE][BOARD_SIZE]; int score = 0; int highest_score = 0; void init_board() { srand(time(NULL)); int i, j; for(i = 0; i < BOARD_SIZE; i++) { for(j = 0; j < BOARD_SIZE; j++) { board[i][j] = 0; } } int x1 = rand() % BOARD_SIZE; int y1 = rand() % BOARD_SIZE; int x2 = rand() % BOARD_SIZE; int y2 = rand() % BOARD_SIZE; while(x1 == x2 && y1 == y2) { x2 = rand() % BOARD_SIZE; y2 = rand() % BOARD_SIZE; } board[x1][y1] = 2; board[x2][y2] = 2; } void draw_board() { int i, j; printf("\n"); for(i = 0; i < BOARD_SIZE; i++) { printf("\t+------+------+------+------+\n"); for(j = 0; j < BOARD_SIZE; j++) { printf("\t|"); if(board[i][j] == 0) { printf(" "); } else { printf("%4d", board[i][j]); } } printf("\t|\n"); } printf("\t+------+------+------+------+\n"); printf("\tScore: %d\tHighest Score: %d\n", score, highest_score); } void move_left() { int i, j, k; for(i = 0; i < BOARD_SIZE; i++) { for(j = 1; j < BOARD_SIZE; j++) { if(board[i][j] != 0) { for(k = j - 1; k >= 0; k--) { if(board[i][k] == 0) { board[i][k] = board[i][k+1]; board[i][k+1] = 0; } else if(board[i][k] == board[i][k+1]) { board[i][k] *= 2; score += board[i][k]; board[i][k+1] = 0; } else { break; } } } } } } void move_right() { int i, j, k; for(i = 0; i < BOARD_SIZE; i++) { for(j = BOARD_SIZE - 2; j >= 0; j--) { if(board[i][j] != 0) { for(k = j + 1; k < BOARD_SIZE; k++) { if(board[i][k] == 0) { board[i][k] = board[i][k-1]; board[i][k-1] = 0; } else if(board[i][k] == board[i][k-1]) { board[i][k] *= 2; score += board[i][k]; board[i][k-1] = 0; } else { break; } } } } } } void move_up() { int i, j, k; for(j = 0; j < BOARD_SIZE; j++) { for(i = 1; i < BOARD_SIZE; i++) { if(board[i][j] != 0) { for(k = i - 1; k >= 0; k--) { if(board[k][j] == 0) { board[k][j] = board[k+1][j]; board[k+1][j] = 0; } else if(board[k][j] == board[k+1][j]) { board[k][j] *= 2; score += board[k][j]; board[k+1][j] = 0; } else { break; } } } } } } void move_down() { int i, j, k; for(j = 0; j < BOARD_SIZE; j++) { for(i = BOARD_SIZE - 2; i >= 0; i--) { if(board[i][j] != 0) { for(k = i + 1; k < BOARD_SIZE; k++) { if(board[k][j] == 0) { board[k][j] = board[k-1][j]; board[k-1][j] = 0; } else if(board[k][j] == board[k-1][j]) { board[k][j] *= 2; score += board[k][j]; board[k-1][j] = 0; } else { break; } } } } } } int is_game_over() { int i, j, flag = 0; for(i = 0; i < BOARD_SIZE; i++) { for(j = 0; j < BOARD_SIZE; j++) { if(board[i][j] == WIN_SCORE) return 1; if(board[i][j] == 0) flag = 1; if(i > 0 && board[i-1][j] == board[i][j]) return 0; if(i < BOARD_SIZE-1 && board[i+1][j] == board[i][j]) return 0; if(j > 0 && board[i][j-1] == board[i][j]) return 0; if(j < BOARD_SIZE-1 && board[i][j+1] == board[i][j]) return 0; } } if(flag) return 0; return 1; } void save_game() { FILE *fp; fp = fopen("game.dat", "w"); fprintf(fp, "%d\n", highest_score); fprintf(fp, "%d\n", score); int i, j; for(i = 0; i < BOARD_SIZE; i++) { for(j = 0; j < BOARD_SIZE; j++) { fprintf(fp, "%d ", board[i][j]); } fprintf(fp, "\n"); } fclose(fp); } void load_game() { FILE *fp; fp = fopen("game.dat", "r"); if(fp != NULL) { fscanf(fp, "%d\n", &highest_score); fscanf(fp, "%d\n", &score); int i, j; for(i = 0; i < BOARD_SIZE; i++) { for(j = 0; j < BOARD_SIZE; j++) { fscanf(fp, "%d ", &board[i][j]); } } fclose(fp); } else { printf("No saved game found.\n"); getch(); } } void play_game() { char ch; init_board(); while(1) { draw_board(); ch = getch(); switch(ch) { case 'w': move_up(); break; case 's': move_down(); break; case 'a': move_left(); break; case 'd': move_right(); break; case 'q': save_game(); exit(0); break; case 'r': init_board(); score = 0; break; case 'l': load_game(); break; default: continue; } if(is_game_over()) break; system("cls"); } system("cls"); draw_board(); printf("\nGame over!\n"); } int main() { play_game(); return 0; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值