JavaScript实现2048小游戏，我终于赢了一把

最新推荐文章于 2024-09-13 13:34:31 发布

bsefef

最新推荐文章于 2024-09-13 13:34:31 发布

阅读量411

点赞数

分类专栏：前端 html 面试文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/bsefef/article/details/123149912

版权

本文详细介绍了如何使用JavaScript实现2048小游戏，包括编写页面代码、添加画布、绘制卡片、随机生成数字、键盘事件监听以及游戏逻辑处理。提供完整代码示例和实现思路。

摘要由CSDN通过智能技术生成

JavaScript实现2048小游戏

作者简介

作者名：
简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！

系列目录

1. JavaScript 贪吃蛇游戏
 2. JavaScript 俄罗斯方块
 3. JavaScript 扫雷小游戏
 4. JavaScript 网红太空人表盘

效果图

在这里插入图片描述

实现思路

编写页面和画布代码。
绘制背景。
绘制好全部卡片。
随机生成一个卡片（2或者4）。
键盘事件监听（上、下、左、右键监听）。
根据键盘的方向，处理数字的移动合并。
加入成功、失败判定。
处理其他收尾工作。

代码实现

编写页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048</title>
    <style>
        #box{
           width:370px;
           height:370px;
           position:absolute;
           margin:0 auto;
           left:0;
           right:0;
           top:1px;
           bottom:0;
       }

       .rebutton{
        position: absolute;
        top:370px;
        left:38%;
       }
       </style>
</head>
<body>
    <div id='box'></div>
    <button onclick="restart()" class='rebutton'>重开</button>
</body>
<script src="js/util.js"></script>
<script src="js/2048.js"></script>
<script type="text/javascript">

   </script>
</html>

添加画布

在2048.js编写代码

创建函数

function G2048(){
this.renderArr=[];//渲染数组
this.cards=initCardArray();
//游戏标记
this.flag=‘start’;
}
//初始化数组
function initCardArray(){
var cards = new Array();
for (var i = 0; i < 4; i++) {
cards[i] = new Array();
for (var j = 0; j < 4; j++) {
//cards[i][j]=null;
}
}
return cards;
}

初始化和绘制背景代码（在2048.js中编写）

//初始化
G2048.prototype.init=function(el,musicObj){
if(!el) return ;
this.el=el;
var canvas = document.createElement(‘canvas’);//创建画布
canvas.style.cssText=“background:white;”;
var W = canvas.width = 370; //设置宽度
var H = canvas.height = 370;//设置高度

	el.appendChild(canvas);//添加到指定的dom对象中
	this.ctx = canvas.getContext('2d');
	
	this.draw();
}
//绘制入口
G2048.prototype.draw=function(){
	//创建背景
	this.drawGB();

    //渲染到页面上
	this.render();

}

//创建背景
G2048.prototype.drawGB=function(){
	var bg = new _.Rect({x:0,y:0,width:364,height:364,fill:true,fillStyle:'#428853'});
	this.renderArr.push(bg);
}

//渲染图形
G2048.prototype.render=function(){
	var context=this.c