带你玩转2048小游戏

最新推荐文章于 2024-02-29 20:20:13 发布
最新推荐文章于 2024-02-29 20:20:13 发布
阅读量259 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43967169/article/details/117250849
版权

首先他的HTML和CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .score01{
            width: 480px;
            margin: 0 auto;
            padding-top: 40px;
            font-size: 40px;
        }
        .score01>span{
            color: red;
        }
        .girdPanel{
            width: 480px;
            height:480px;
            border-radius: 10px;
            background-color: #bbada0;
            margin: 0 auto;
        }
        .cell{
            width: 100px;
            height: 100px;
            margin-top: 16px;
            margin-left: 16px;
            background-color: #ccc0b3;
            float: left;

            font-size: 60px;
            line-height: 100px;
            text-align: center;
            color: #fff;
        }

        .n2{background-color:#eee3da;color:#776e65}
        .n4{background-color:#ede0c8;color:#776e65}
        .n8{background-color:#f2b179}
        .n16{background-color:#f59563}
        .n32{background-color:#f67c5f}
        .n64{background-color:#f65e3b}
        .n128{background-color:#edcf72}
        .n256{background-color:#edcc61}
        .n512{background-color:#9c0}
        .n1024{background-color:#33b5e5;font-size:40px}
        .n2048{background-color:#09c;font-size:40px}
        .n4096{background-color:#a6c;font-size:40px}
        .n8192{background-color:#93c;font-size:40px}

        .gameover{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(55,55,55,0.5);
        }
        .gameover>p{
            width: 300px;
            height: 200px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid;
            line-height: 65px;

            font-size: 40px;
        }
        .gameover>p>a{
            padding: 10px;
            color: #fff;
            background-color: #9f8d77;
            border-radius: 6px;
            text-decoration: none;
        }
        .btn{
            width: 100px;
            height: 50px;
            background-color: #9f8d77;
            color: white;
            font-size: 15px;
            border: 0px;
            border-radius: 10px;
            text-align: center;
            position: relative;
            left: 50%;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <p class="score01">SCORE:<span id="score01">0</span></p>
    <div class="girdPanel">
        <div class="cell" id="c00"></div>
        <div class="cell" id="c01"></div>
        <div class="cell" id="c02"></div>
        <div class="cell" id="c03"></div>

        <div class="cell" id="c10"></div>
        <div class="cell" id="c11"></div>
        <div class="cell" id="c12"></div>
        <div class="cell" id="c13"></div>

        <div class="cell" id="c20"></div>
        <div class="cell" id="c21"></div>
        <div class="cell" id="c22"></div>
        <div class="cell" id="c23"></div>

        <div class="cell" id="c30"></div>
        <div class="cell" id="c31"></div>
        <div class="cell" id="c32"></div>
        <div class="cell" id="c33"></div>   
    </div>
    <div class="gameover" id="gameover">
        <p>
            GAME OVER !<br>
            SCORE:<span id="score02">0</span><br>
            <a href="">TRY AGAIN</a>
        </p>
    </div>
    <button class="btn">new Game</button>
    <script src="./index.js"> </script>
</body>
</html>

引入script

var game = {
    score : 0,//添加一个的得分属性
    status: 1,//添加一个游戏状态
    gameover:0,//添加一个游戏结束状态
    gamerunning:1,//添加一个游戏运行状态
    data:[],//储存游戏数据
    start:function(){
        for(var r=0;r<4;r++){
            this.data[r] = [];
            for(var c=0;c<4;c++){
                this.data[r][c] = 0;
            }
        }
        this.randomNum()
        this.randomNum()
        this.dataView()
    },
    randomNum:function(){
        //生成随机位置
        //判断位置上是否有数据
        for(;;){
            //设置行
        var r = Math.floor(Math.random()*4);
        //设置列
        var c = Math.floor(Math.random()*4);
        if(this.data[r][c] == 0){
            var num = Math.random() >0.5 ? 2 : 4;
            this.data[r][c] = num;
            break;
        }
        }
    },
    //时间hi图更新 分数，样式，数据
    dataView:function(){
        for(var r=0;r<4;r++){
            for(var c=0;c<4;c++){
                var div = document.getElementById("c"+r+c);
                //如果数组不是0的时候就改变
                if(this.data[r][c] != 0){
                    div.innerHTML = this.data[r][c]
                    div.className = "cell n" +this.data[r][c]
                }else{
                    div.innerHTML = "";
                    div.className = "cell"
                }
            }
        }
    },

    //判断游戏有没有结束
    isGameover:function(){
        for(var r=0;r<4;r++){
            for(var c=0;c<4;c++){
                //如果游戏周围有相等的就没结束
                if(this.data[r][c] == this.data[r+1][c]){
                    return false;
                }
                if(this.data[r][c] == this.data[r][c+1]){
                    return false;
                }
                //如果游戏有空位置就没结束
                if(this.data[r][c] == 0){
                    return false;
                }
            }
        }
        return true;
    },
    moveLeft:function(){
        var before = String(this.data)
        for(var r = 0 ; r < 4;r++){
            this.moveLeftRow(r)
        }
        var after = String(this.data)
        if(before != after){
            this.randomNum()
            if(this.isGameover()){
                this.status = this.gameover
            }
            this.dataView()
        }
    },
    moveLeftRow:function(r){ //单独抽出一行进行写逻辑
        for(var c = 0;c<3;c++){ //最左边的不需要移动，所以遍历3次
            // 找出r行c列后面不为0的数据的位置保存至nextc中
            var nextc = this.getNextinRow(r,c)
            if(nextc != -1){
                // 这一行中有需要移动的数据
                if(this.data[r][c] == 0){ //一定是把所有需要移动的数据移动到位置上去
                    this.data[r][c] = this.data[r][nextc]
                    this.data[r][nextc] = 0;
                    c--;//c留在原地继续左移
                }else if(this.data[r][c] == this.data[r][nextc]){
                    this.data[r][c] = this.data[r][c] * 2;
                    this.score += this.data[r][c];//分数
                    this.data[r][nextc] = 0;
                }
            }else{
                // 这一行中meiyou需要移动的数据
                break;
            }
        }
    },
    getNextinRow:function(r,c){
        for(var i = c + 1;i<4;i++){
            // 如果数据不为0，表示找到了，返回i，i对应的是当前数据的列下标
            if(this.data[r][i] != 0){
                return i;
            }
        }
        return -1;//如果当前行找不到不为0的数据则返回-1标识
    },

    moveRight:function(){
        var before = String(this.data)
        for(var r = 0 ; r < 4;r++){
            this.moveRightRow(r)
        }
        var after = String(this.data)
        if(before != after){
            this.randomNum()
            if(this.isGameover()){
                this.status = this.gameover
            }
            this.dataView()
        }
    },
    moveRightRow:function(r){ //单独抽出一行进行写逻辑
        for(var c = 3;c>=0;c--){ //最左边的不需要移动，所以遍历3次
            // 找出r行c列后面不为0的数据的位置保存至nextc中
            var nextc = this.getNextinRow1(r,c)
            if(nextc != -1){
                // 这一行中有需要移动的数据
                if(this.data[r][c] == 0){ //一定是把所有需要移动的数据移动到位置上去
                    this.data[r][c] = this.data[r][nextc]
                    this.data[r][nextc] = 0;
                    c++;//c留在原地继续左移
                }else if(this.data[r][c] == this.data[r][nextc]){
                    this.data[r][c] = this.data[r][c] * 2;
                    this.score += this.data[r][c];//分数
                    this.data[r][nextc] = 0;
                }
            }else{
                // 这一行中meiyou需要移动的数据
                break;
            }
        }
    },
    getNextinRow1:function(r,c){
        for(var i = c - 1;i>=0;i--){
            // 如果数据不为0，表示找到了，返回i，i对应的是当前数据的列下标
            if(this.data[r][i] != 0){
                return i;
            }
        }
        return -1;//如果当前行找不到不为0的数据则返回-1标识
    },

    moveTop:function(){
        var before = String(this.data)
        for(var c = 0 ; c < 4;c++){
            this.moveTopRow(c)
        }
        var after = String(this.data)
        if(before != after){
            this.randomNum()
            if(this.isGameover()){
                this.status = this.gameover
            }
            this.dataView()
        }
    },
    moveTopRow:function(c){ //单独抽出一行进行写逻辑
        for(var r = 0;r<3;r++){ //最左边的不需要移动，所以遍历3次
            // 找出r行c列后面不为0的数据的位置保存至nextc中
            var nextr = this.getNextinRow2(r,c)
            if(nextr != -1){
                // 这一行中有需要移动的数据
                if(this.data[r][c] == 0){ //一定是把所有需要移动的数据移动到位置上去
                    this.data[r][c] = this.data[nextr][c]
                    this.data[nextr][c] = 0;
                    r--;//c留在原地继续左移
                }else if(this.data[r][c] == this.data[nextr][c]){
                    this.data[r][c] = this.data[r][c] * 2;
                    this.score += this.data[r][c];//分数
                    this.data[nextr][c] = 0;
                }
            }else{
                // 这一行中meiyou需要移动的数据
                break;
            }
        }
    },
    getNextinRow2:function(r,c){
        for(var i = r + 1;i<4;i++){
            // 如果数据不为0，表示找到了，返回i，i对应的是当前数据的列下标
            if(this.data[i][c] != 0){
                return i;
            }
        }
        return -1;//如果当前行找不到不为0的数据则返回-1标识
    },

    moveBot:function(){
        var before = String(this.data)
        for(var c = 0 ; c < 4;c++){
            this.moveBotRow(c)
        }
        var after = String(this.data)
        if(before != after){
            this.randomNum()
            if(this.isGameover()){
                this.status = this.gameover
            }
            this.dataView()
        }
    },
    moveBotRow:function(c){ //单独抽出一行进行写逻辑
        for(var r = 3;r>=0;r--){ //最左边的不需要移动，所以遍历3次
            // 找出r行c列后面不为0的数据的位置保存至nextc中
            var nextr = this.getNextinRow3(r,c)
            if(nextr != -1){
                // 这一行中有需要移动的数据
                if(this.data[r][c] == 0){ //一定是把所有需要移动的数据移动到位置上去
                    this.data[r][c] = this.data[nextr][c]
                    this.data[nextr][c] = 0;
                    r++;//c留在原地继续左移
                }else if(this.data[r][c] == this.data[nextr][c]){
                    this.data[r][c] = this.data[r][c] * 2;
                    this.score += this.data[r][c];//分数
                    this.data[nextr][c] = 0;
                }
            }else{
                // 这一行中meiyou需要移动的数据
                break;
            }
        }
    },
    getNextinRow3:function(r,c){
        for(var i = r - 1;i>=0;i--){
            // 如果数据不为0，表示找到了，返回i，i对应的是当前数据的列下标
            if(this.data[i][c] != 0){
                return i;
            }
        }
        return -1;//如果当前行找不到不为0的数据则返回-1标识
    }

}
game.start()
document.onkeydown = function(event){
    if(event.keyCode == 37){
        game.moveLeft()
    }
    else if(event.keyCode == 38){
        game.moveTop();
    }
    else if(event.keyCode == 39){
        game.moveRight();
    }
    else if(event.keyCode == 40){
        game.moveBot();
    }
}

效果图展示
在这里插入图片描述

也许丶曾经
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Unity 之 发布字节抖音小游戏
陈言必行 -- Unity游戏开发领域优质博主
09-26 2万+
抖音小游戏是一种基于字节跳动产品生态开发且无需下载安装即可使用的全新游戏应用，实现了客户端“点开即玩”的优质用户体验。小游戏拥有开发轻便快捷，发布流程简单的特点，同时依托字节跳动生态优势，让小游戏天然具备较强的内容分发能力，支持小游戏开发者快速推广与变现。
2048游戏简单实现
Aimee_ice的博客
04-09 7040
前言 最近突然心血来潮想写一个网页小游戏，我看网上有很多人推荐写2048来练练手，遂开始写。目前为止，基本功能已经实现，只是没有添加相应的动画效果，待以后有机会补上（其实我就是动画这块太菜了 T_T） 前方长文预警！！！ 游戏截图 项目结构 这个项目结构挺简单的，应该也都看得懂，在此仅对js文件夹进行描述，其余的就不再赘述啦 （main.js是入口文件，move.js主...
python小游戏 2048小游戏设计与实现
WEB_DC的博客
01-08 2635
🔥 Hi，各位同学好呀，这里是L学长！🥇今天向大家分享一个今年(2022)最新完成的毕业设计项目作品python小游戏毕设 2048小游戏设计与实现 (源码)🥇 学长根据实现的难度和等级对项目进行评分(最低0分，满分5分)难度系数：3分工作量：3分创新点：4分今天我们用python实现一个2048小游戏。游戏规则“使用方向键移动方块，两个数字相同的方块撞在一起后，将会合并为一个数字是原来两倍的新方块。游戏的时候尽可能多地合并这些数字方块就行了。简介。
手把手教你用Python实现2048小游戏
xiaolinyui的博客
11-16 2903
使用方向键移动方块，两个数字相同的方块撞在一起后，将会合并为一个数字是原来两倍的新方块。游戏的时候尽可能多地合并这些数字方块就行了。
用python实现2048小游戏
qq_44728118的博客
04-27 1万+
用python实现2048小游戏
30个Python小游戏，上班摸鱼我能玩一天【内附源码】
热门推荐
五包辣条的博客
09-19 29万+
一、接金币（1分） 普通难度：❤ 玩法介绍：吃金币，控制左右键，有手就行。 源码分享 import os import cfg import sys import pygame import random from modules import * '''游戏初始化''' def initGame(): # 初始化pygame, 设置展示窗口 pygame.init() screen = pygame.display.set_mode(cfg.SCREE...
python 小游戏《2048》字符版非图形界面
汉阳Hann's Home
02-29 3473
参考链接： 闲谈2048小游戏和数组的旋转及翻转和转置上回说到2048小游戏中数组的各种旋转、翻转的方法，就是为代码编程作准备的；有了这些再就加上二维数组各行列上元素的合并、能否被合并的判断、成功失败的判断等等；以及再加上键盘按键的控制，小游戏就基本完成了。方阵就是高宽相同的矩阵，2048用方阵就行了，写代码也省事一点，方阵的类如下：>>> from random import sample >>> class Matrix: ... def __init__(self, order=4): ...
使用Pygame制作2048小游戏
爱写代码的坤坤的博客
12-02 5767
好久没有写文章了，暑假一直没有怎么学习计算机方面的相关知识，不过倒是坚持背了一个多月的单词红宝书，看了汤神的基础课。真的没想到自己居然也能有毅力背了150多页的单词，还写完了一本正反面的字帖这些事以前从来没坚持下来过，可能就是长大了懂事了吧，hhh。还练了一周的科三。后天第三次考了，希望这次能考过。 吃完晚饭闲来无事，准备回归从前写写小文章。现在先来分享一下我的python课两个期末大作业之一——Pygame开发的2048 一、游戏效果展示 1.运行程序，出现欢迎界面。点击鼠标左键后，出现主菜单界面。.
安卓2048小游戏源码
scimence的专栏
06-07 8238
http://git.oschina.net/scimence/sci_2048/wikis/home package com.example.sci_2048; import java.util.Random; import android.app.Activity; import android.app.AlertDialog; import android.content....
分享一个基于labview的2048小游戏（附详细教程+代码）
sanbaogegeg的博客
09-02 1万+
游戏界面是参照官方标准的2048来设计的，话不多说，先看一下游戏效果！ 这个小游戏是基于labview 2020SP1开发的，下面我详细的介绍一下游戏的整个制作过程 。 首先明确程序的设计思路： 第一：需求分析，游戏规则及需要的功能； 第二：前面板设计，游戏界面要做成什么样子； 第三：需求转换，将需求转换为代码； 第四：程序框图设计，完成代码编写； 最后：调试bug。 1 需求分析 1.1游戏规则 我相信很多人都玩过这个游戏，游戏规则大家也很熟悉，就是通过上下左右移动，将同行或同列相
H5小游戏源码 潮爷爷带你玩转重阳节.zip
10-14
《潮爷爷带你玩转重阳节》是一款基于H5技术开发的小游戏源码，它以中国传统文化中的重阳节为主题，让玩家在娱乐中了解并体验重阳节的文化内涵。这款小游戏源码的出现，为开发者提供了一个学习和研究H5游戏开发的实例...
2048小游戏
12-07
2048小游戏是一款深受玩家喜爱的数字拼图游戏，其简洁的界面和富有挑战性的玩法吸引了大量的编程爱好者尝试用各种编程语言进行实现。本项目就是一个基于Linux系统的C语言版本的2048小游戏，对于想要学习C语言和游戏...
WPF2048小游戏.zip
01-27
【标题】"WPF2048小游戏.zip" 涉及的知识点主要集中在Windows Presentation Foundation（WPF）技术和游戏开发领域，特别是基于WPF构建的2048游戏。WPF是.NET Framework的一部分，由Microsoft开发，用于构建桌面应用...
小游戏-2048源码
03-19
《微信小游戏2048源码》是一款基于微信平台的小型互动游戏，其核心玩法是数字合成，通过玩家的操作将相同数字的方块合并，最终目标是合成2048这个数字。这款游戏的设计和实现涉及到了诸多编程技术和设计思想，下面...
C++基于EasyX图形库实现2048小游戏
12-20
在本项目中，我们使用C++编程语言以及EasyX图形库来实现经典的2048小游戏。EasyX是一个为Windows平台设计的简单图形库，它提供了丰富的图形绘制函数，使得开发者能够快速创建出具有图形界面的应用程序。以下是关键...
营销策划 -2024非遗大展预热引流策划方案.pptx
最新发布
07-13
营销策划 -2024非遗大展预热引流策划方案.pptx
全网最热Python3入门+进阶 更快上手实际开发
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
物资合同管理台账.docx
07-13
物资合同管理台账.docx
项目管理策划编写模板.docx
07-13
项目管理策划编写模板.docx
Python玩转飞机大战小游戏项目
06-04
Python玩转飞机大战小游戏项目是一款基于Pygame模块的2D游戏，它是一款类似于经典的飞机大战游戏。在这个游戏中，玩家需要操作一个飞机，躲避敌机的攻击并尽可能地击败敌人，获得更高的得分。 该项目主要分为以下几...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值