2048（HTML+CSS+JavaScript）

最新推荐文章于 2024-09-12 18:22:06 发布
最新推荐文章于 2024-09-12 18:22:06 发布
阅读量268 收藏 8
点赞数 3
文章标签： html css javascript 前端 游戏程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80145756/article/details/141202111
版权

2048小游戏（简易版）

前言

刚学完前端三件套(HTML + CSS + JavaScript) 的同学们已经可以试着做些小项目来实践自己的学习成果了，我花了两天时间做了个简易版的2048小游戏用来作为实践。以下为大家展示游戏画面和代码。

游戏截图

在这里插入图片描述

HTML

<!DOCTYPE html>
<html>
<head>
	<title>尤乐娃子的2048（简易版）</title>
  <link rel="stylesheet" href="./study.css">  
</head>
<body>
  <!-- 游戏网格 -->
	<div class="full">
    <div class="number" id="li1col1"></div>
    <div class="number" id="li1col2"></div>
    <div class="number" id="li1col3"></div>
    <div class="number" id="li1col4"></div>
    <div class="number" id="li2col1"></div>
    <div class="number" id="li2col2"></div>
    <div class="number" id="li2col3"></div>
    <div class="number" id="li2col4"></div>
    <div class="number" id="li3col1"></div>
    <div class="number" id="li3col2"></div>
    <div class="number" id="li3col3"></div>
    <div class="number" id="li3col4"></div>
    <div class="number" id="li4col1"></div>
    <div class="number" id="li4col2"></div>
    <div class="number" id="li4col3"></div>
    <div class="number" id="li4col4"></div>
    <!-- 展示框 -->
    <div class="scores"></div>
    <div class="bestScores"></div>
	</div>
  <!-- 刷新游戏 -->
  <div class="newgame">新游戏</div>
	<script src="./study.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    list-style: none;
	font-family:'Franklin Gothic Medium', 'Arial Narrow', 'Arial', 'sans-serif', 'SimHei';
    
}
body {
    background-color: #FAF8EF;
}
.full {
    position: relative;
    display: grid;
    padding: 10px;
    margin: 100px auto 0px;
    border-radius: 10px;
	background-color: #BBADA0;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 10px;
    width: 600px; 
    height: 600px; 
}
.number {
    background-color: #f0f0f0;
    display: flex;
    background-color: #CDC1B4;
    border-radius: 10px ;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    color: #776E65;
}
.newgame {
    margin: 30px auto;
    height: 80px;
    width: 250px;
    border-radius: 40px;
    text-align: center;
    line-height: 80px;
    font-size: 40px;
    color: #776E65;
    background-color: #CDC1B4;
    cursor: pointer;
}
.scores {
    position: absolute;
    border-radius: 10px;
    left: 650px;
    top: 250px;
    height: 100px;
    width: 240px;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    color: #F9F6F2;
    background-color: #BBADA0;
    transition: .1s;
}
.scores::after {
    position: absolute;
    content: "分数";
    left: 50%;
    transform: translate(-50%, 0);
    top: -80px;
    font-size: 40px;
    color: #776E65;
}
.bestScores {
    position: absolute;
    border-radius: 10px;
    left: 650px;
    top: 50px;
    height: 100px;
    width: 240px;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    color: #F9F6F2;
    background-color: #BBADA0;
    transition: .1s;
}
.bestScores::after {
    position: absolute;
    content: "最高分";
    left: 50%;
    transform: translate(-50%, 0);
    top: -80px;
    font-size: 40px;
    color: #776E65;
}

JavaScript

var grade = [	[0,0,0,0],
                    [0,0,0,0],
                    [0,0,0,0],
                    [0,0,0,0]	];

var gradeant = [	[0,0,0,0],
					[0,0,0,0],
					[0,0,0,0],
					[0,0,0,0]	];
let mod = null
let pos = null
let nextnumber = null
let sum = 0
let presum = null
let maxSum = -1
//随机摇数（2/4）
function sorteianum(){
	nextnumber = Math.floor(Math.random()*3) + 2;//随机获得 2，3，4
	if(nextnumber==3) {
		return sorteianum();
		} else {
		return
		}
	}
//随机摇位置（行列皆为0-3）
function sorteiapos(){
	posicao = Math.floor(Math.random()*16);//0-15
	mod = Math.floor(posicao/4);//0-3
	pos = posicao % 4;//0-3
	if(grade[mod][pos]!=0){
		return sorteiapos();
		} else {
            return
        }
}
//将值写入矩阵中
function insertion(){
	sorteiapos();
	sorteianum();
	grade[mod][pos]=nextnumber
	gradeant[mod][pos]=nextnumber;
}
//创建新元素
function exibegrade(){
	for(i = 0; i < 4; i++){
		for(j = 0; j < 4; j++){
			 //创建新元素
             let aimElement=`li${i + 1}col${j + 1}`;
             const Element = document.getElementById(aimElement)
             Element.innerHTML = grade[i][j];
             //新元素上色
             let color = null
             switch(grade[i][j]) {
                 case 2:
                     color = '#EEE4DA'
                     break;
                 case 4:
                     color = '#EDE0C8'
                     break;
                 case 8:
                     color = '#F2B179'
                     break;
                 case 16:
                     color = '#F59563'
                     break;
                 case 32:
                     color = '#F67C5F'
                     break;
                 case 64:
                     color = '#F65E3B'
                     break;
                 case 128:
                     color = '#EDCF72'
                     break;
                 case 256:
                     color = '#EDCC61'
                     break;
                 case 512:
                     color = '#EDC850'
                     break;
                 case 1024:
                     color = '#EDC53F'
                     break;
                 case 2048:
                     color = '#EBC12D'
                     break;    
             }
             Element.style.backgroundColor = color

             //新元素动画
             if(i == mod && j == pos) {
                Element.style.transform = 'scale(0, 0)'
                setTimeout(() => {
                    Element.style.transition = '.1s'
                    Element.style.transform = 'scale(1, 1)'
                },100)
                setTimeout(() => {
                    Element.style.transition = '0s'
                },200)
             }
             
         
		}
	}
}
//跳跃动画
function jump(i, j) {

    let aimElement = `li${i + 1}col${j + 1}`;
    const Element = document.getElementById(aimElement)
    Element.style.transform = 'scale(1.2, 1.2)'
    Element.style.transition = '.1s'
    setTimeout(() => {
        Element.style.transform = 'scale(1, 1)'
    },100)
    setTimeout(() => {
        Element.style.transition = '0s'
    },200)
}
//分数统计
function scores(sum) {
    if(presum == sum)return
    presum = sum
    const scoresElement = document.querySelector(".scores")
    scoresElement.innerHTML = `${sum}`

    scoresElement.style.fontSize = '60px'
    setTimeout(() => {
        scoresElement.style.fontSize = '50px'
    },100)

    if(sum > maxSum) {
        maxSum = sum
        const scoresElement = document.querySelector(".bestScores")
        scoresElement.innerHTML = `${maxSum}`

        scoresElement.style.fontSize = '60px'
        setTimeout(() => {
            scoresElement.style.fontSize = '50px'
        },100)
    }

}
// 方向按键
function buttonselect(e){
	let Key = e.keyCode;
    switch(Key){
		case 65:
			left()
			break;
        case 37:
            left()
            break;

		case 87:
			up()
			break;
        case 38:
            up()
            break;

		case 68:
			right()
			break;
        case 39:
            right()
            break;

		case 83:
			down()
			break;
        case 40:
            down()
            break;
	}
}
function left(){
	for(let i = 0; i < 4; i++) {
        //将方向边界为空的行移依将方块次动至边界
		for(let j = 0; j < 3; j++) {
            for(let k = 0; k < 3; k++) {
                if(grade[i][k] == 0) {
                    for(let o = k; o < 3; o++)grade[i][o] = grade[i][o + 1]
                    grade[i][3] = 0
                }
            }
		}
        //合并
        for(let j = 0; j < 3; j++) {
            if(grade[i][j] == grade[i][j + 1] && grade[i][j] !== 0) {
                grade[i][j] *= 2
                jump(i,j)
                sum += grade[i][j]
                for(let k = j + 1; k < 3; k++)grade[i][k] = grade[i][k + 1]
                grade[i][3] = 0
                if(j == 0 && grade[i][1] == grade[i][2] && grade[i][1] !== 0) {
                    grade[i][1] *= 2
                    jump(i,1)
                    sum += grade[i][j]
                    grade[i][2] = 0
                }
            }
        }
	}
	next()
}

function up(){
	for(j = 0; j < 4; j++){
        //将方向边界为空的行移依将方块次动至边界
		for(let i = 0; i < 3; i++) {
            for(let k = 0; k < 3; k++) {
                if(grade[k][j] == 0) {
                    for(let o = k; o < 3; o++)grade[o][j] = grade[o + 1][j]
                    grade[3][j] = 0
                }
            }
		}
        //合并
        for(let i = 0; i < 3; i++) {
            if(grade[i][j] == grade[i + 1][j] && grade[i][j] !== 0) {
                grade[i][j] *= 2
                jump(i,j)
                sum += grade[i][j]
                for(let k = i + 1; k < 3; k++)grade[k][j] = grade[k + 1][j]
                grade[3][j] = 0
                if(i == 0 && grade[1][j] == grade[2][j] && grade[1][j] !== 0) {
                    grade[1][j] *= 2
                    jump(1,j)
                    sum += grade[i][j]
                    grade[2][j] = 0
                }
            }
        }
    }
	next();
}

function right(){
	for(i = 0; i < 4; i++){
        //将方向边界为空的行移依将方块次动至边界
		for(let j = 0; j < 3; j++) {
            for(let k = 3; k >= 0; k--) {
                if(grade[i][k] == 0) {
                    for(let o = k; o > 0; o--)grade[i][o] = grade[i][o - 1]
                    grade[i][0] = 0
                }
            }
		}
         //合并
         for(let j = 3; j > 0; j--) {
            if(grade[i][j] == grade[i][j - 1] && grade[i][j] !== 0) {
                grade[i][j] *= 2
                jump(i,j)
                sum += grade[i][j]
                for(let k = j - 1; k > 0; k--)grade[i][k] = grade[i][k - 1]
                grade[i][0] = 0
                if(j == 3 && grade[i][2] == grade[i][1] && grade[i][2] !== 0) {
                    grade[i][2] *= 2
                    jump(i,2)
                    sum += grade[i][j]
                    grade[i][1] = 0
                }
            }
        }

	}
	next()
}

function down(){
	for(let j = 0; j < 4; j++){
        //将方向边界为空的行移依将方块次动至边界
		for(let i = 0; i < 3; i++) {
            for(let k = 3; k >= 0; k--) {
                if(grade[k][j] == 0) {
                    for(let o = k; o > 0; o--)grade[o][j] = grade[o - 1][j]
                    grade[0][j] = 0
                }
            }
		}

        //合并
        for(let i = 3; i > 0; i--) {
            if(grade[i][j] == grade[i - 1][j] && grade[i][j] !== 0) {
                grade[i][j] *= 2
                jump(i,j)
                sum += grade[i][j]
                for(let k = i - 1; k > 0; k--)grade[k][j] = grade[k - 1][j]
                grade[0][j] = 0
                if(i == 3 && grade[2][j] == grade[1][j] && grade[2][j] !== 0) {
                    grade[2][j] *= 2
                    jump(2,j)
                    sum += grade[i][j]
                    grade[1][j] = 0
                }
            }
        }
	}
	next()
}
//向网格空出添加新的方块
function play(){
	insertion()
	exibegrade()
    scores(sum)
}
function next(){
	let flag = 0
    let over1 = 1
    let over2 = 1
	for (let i = 0; i < 4; i++) {
		for(let j = 0; j < 4; j++){
            //与上一次方块做比较
			if(grade[i][j]!=gradeant[i][j]){
				gradeant[i][j]=grade[i][j];
				flag = 1;
			}
            //是否还存在空方块&&都与相邻不同
            if(grade[i][j] == 0)over2 = 0
            if(j < 3 && grade[i][j] == grade[i][j + 1])over1 = 0
            if(i < 3 && grade[i][j] == grade[i + 1][j])over1 = 0
		}
	}
	if(flag == 0){
        if(over1 == 1 && over2 == 1)alert("结束")
        return
	} else{
        play()
	}
}
//重新开始
const newGame = document.querySelector(".newgame")
newGame.onclick = function() {
   grade.forEach((arr) => arr.fill(0))
   gradeant.forEach((arr) => arr.fill(0))
   sum = 0
   play()
}


play();
document.onkeydown = buttonselect;
尤乐娃子
关注
HTML+CSS+JS网页设计
m0_73738929的博客
04-15 5万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
web前端 html+css+javascript网页设计实例 企业网站制作
热门推荐
weixin_44790790的博客
08-17 8万+
(案例源码链接在文章末尾，仅供学习参考) 一、在浏览器中的运行结果： 二、部分代码 1.HTML： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>启乐官网</title> <link rel="stylesheet" href="style.css"/> <script src="myjs.j
网页制作html+css+javascript
m0_67280147的博客
05-11 5317
👧作者：大月月 📢分享知识：html+css+javascript网页制作 ❌：拒绝摆烂，天天向上 网页制作之大好河山 ❤希望大家多多点赞收藏哦网页制作之大好河山✏网页部分截图✏网页部分代码📌1.style.css📌2.index.html(主页面代码) ✏网页部分截图 🚩 🚩 🚩 🚩 ✏网页部分代码 📌1.style.css /* 1. 清除默认 --------------------------------------*/ p { margin: 0; } ul { padding: 0; }.
HTML+CSS+JavaScript入门教程（万字）
lsl5713的博客
11-24 1万+
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML（HyperText Markup Language）:超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言：由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如：使用展示图片W3C标准：网页主要由三部分组成HTMLCSSJavaScipt。
HTML+CSS+JAVASCRIPT简介
qq_41479002的博客
02-25 4274
一、HTML HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。 二、CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可...
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip
09-25
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...
HTML+CSS+JavaScript编程入门指南
12-30
下载文件是HTML+CSS+JavaScript编程入门指南这本书的示例代码，全书分HTML，CSS与JavaScript三个部分，然后结合三个部分用项目说明应用方法。各部分的代码展示了三种语言的使用方法，可以搭配webstorp执行
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
HTML 列表
qq_40107571的博客
09-06 411
HTML 列表
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1021
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML的块级元素与行内元素
m0_65178842的博客
09-06 555
块级元素通常会在新的一行开始，并且占据整个行的宽度。它们可以包含其他块级元素或行内元素。
HTML、CSS实现树状图
p_s_p的博客
09-09 444
【代码】HTML、CSS实现树状图。
【HTML】置换元素（替换元素）
衣乌安、随笔
09-06 329
● 它的内容不是由元素的标签内的内容决定的，而是由元素的属性决定的。● 可以通过CSS设置宽度和高度。
【HTML】Html标签
最新发布
千里之行，始于足下
09-12 762
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
weixin_47266126的博客
09-09 1401
响应式 Web 设计是一种能够根据不同设备的屏幕尺寸和分辨率自动调整布局和样式的设计方法，它可以让网站在各种设备上都呈现出最佳的显示效果。通过本文的学习，读者可以掌握响应式 Web 设计的基本原理和实现方法，为构建更加优秀的网站打下坚实的基础。我们将从响应式设计的基本概念开始，逐步介绍如何使用 HTML5 和 CSS3 的新特性来构建响应式网站，包括媒体查询、弹性布局、响应式图像等方面的内容。在响应式设计中，可以使用响应式图像来根据不同的屏幕尺寸加载不同大小的图像，提高网站的性能和用户体验。
零基础上手WebGIS+智慧校园实例（长期更新#2）【html by js】
Asuna666w的博客
09-07 1411
等下再更新一下1. WebGIS矢量图形的绘制（超级详细！！），2. WebGIS计算距离， 以及智慧校园实例 with 3个例子！！！！，尽情期待！！！之后代码+资料全部发到github里，希望大家能关注一下咱的Github进行WebGIS开发时，引入API是一个关键步骤，它允许开发者将地图服务和功能集成到自己的Web应用中。
【Harmony】文本高亮显示、关键字凸显字体大小、颜色、背景色等风格自定义、嵌入html脚本提取超链接及超链接文本或其他脚本片段
lichong951的专栏
09-06 414
预览效果如图（网上找到demo，如有疑问请留评论蛤！）：这个是超链接这是例子里的数据定义方式，和从接口里解析的json数据有所区别再看看其他预览效果，比如有html超链接。
HTML+CSS+JavaScript语法全攻略
"html+css+javascript语法手册" HTML、CSS和JavaScript是构建Web应用程序的三大核心技术。本手册详细介绍了这三种语言的基础语法和用法。 HTML（HyperText Markup Language）是网页内容的基础，用于创建和组织网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值