<!DOCTYPE html>
<html>
<head>
<title> 2048-game </title>
<meta charset="utf-8" />
<style media="screen">
#game {
display: none;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #9DA5C3;
opacity: 0.5;
z-index: 1;
}
.clear:after {
content: "";
display: table;
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.scoreShow {
height: 50px;
text-align: center;
line-height: 50px;
}
.model {
text-decoration: none;
color: white;
background-color: #bbada0;
font-size: 36px;
border-radius: 10px;
}
.head {
width: 480px;
height: 50px;
margin: 0 auto;
font-size: 25px;
}
#gridPanel {
width: 480px;
height: 480px;
margin: 0 auto;
background-color: #bbada0;
border-radius: 10px;
position: relative;
z-index: 1;
}
.grid,
.cell {
width: 100px;
height: 100px;
border-radius: 6px;
}
.grid {
background-color: #ccc0b3;
float: left;
margin: 16px 0 0 16px;
}
.cell {
position: absolute;
font-size: 60px;
text-align: center;
line-height: 100px;
color: #fff;
}
.n2 {
background-color: #eee3da
}
.n4 {
background-color: #ede0c8
}
.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
}
.n2048 {
background-color: #09c
}
.n4096 {
background-color: #a6c
}
.n8192 {
background-color: #93c
}
.n2,
.n4 {
color: #776e65
}
#gameover {
width: 100%;
display: none;
position: fixed;
left: 50%;
right: 50%;
top: 148px;
width: 220px;
height: 200px;
border-radius: 10px;
background-color: white;
margin-left: -110px;
text-align: center;
z-index: 5;
}
#gameover>a {
display: inline-block;
width: 170px;
height: 50px;
border-radius: 10px;
text-decoration: none;
background-color: #9F8D77;
color: white;
font-size: 36px;
}
</style>
</head>
<body>
<div id="game">
</div>
<div class="head clear">
<div class="scoreShow left">
<span>Score:</span>
<span id="score"></span>
</div>
<div class="selction right" onclick="getModel(event)">
<a href="#" class="model" value="3">3X3</a>
<a href="#" class="model" value="4">4X4</a>
<a href="#" class="model" type="button">5X5</a>
<a href="#" class="model" type="button">6X6</a>
<!-- <input type="text" id="model"> -->
<!-- <button type="button" name="button" id="set">设置游戏</button> -->
</div>
</div>
<div id="gridPanel">
</div>
<div id="gameover">
<h1 id="Score"></h1>
<a href="#" id="again" onclick="obj.gameStart()">Try again</a>
</div>
<script type="text/javascript">
var arr = [];
function $(id) {
return document.getElementById(id);
}
function C(cls) {
return document.getElementsByClassName(cls);
}
var obj = {
ROW: 4,
CELL: 4,
r: 0,
c: 0,
f: 0, //r行 c列 f查找的下一位置
keyCd: 0,
score: 0,
createEle: 0, //是否需要创建元素
eleFragment: "", //文档片段变量
//游戏开始
gameStart: function() {
obj.init();
document.onkeydown = function(e) { //自动获得事件对象
switch (e.keyCode) { //判断按键号
case 37:
obj.keyCd = 1;
obj.moveLeft();
break;
case 38:
obj.keyCd = 2;
obj.moveUp();
break;
case 39:
obj.keyCd = 1;
obj.moveRight();
break;
case 40:
obj.keyCd = 2;
obj.moveDown();
break;
}
$("score").innerHTML = obj.score; //更新分数
}
},
//初始化
init: function() {
obj.eleFragment = document.createDocumentFragment();
for (r = 0; r < obj.ROW; r++) {
arr.push([]);
for (c = 0; c < obj.CELL; c++) {
arr[r][c] = 0;
if (obj.createEle == 1) {
obj.create(r, c);
}
}
}
if (obj.createEle == 1) {
obj.createEle = 0;
$("gridPanel").innerHTML = ""; //清空原有的元素
$("gridPanel").appendChild(obj.eleFragment); //添加元素
}
obj.score = 0;
$("score").innerHTML = obj.score;
$("game").style.display = "none";
$("gameover").style.display = "none";
obj.random(); //开始游戏随机生成两个数
obj.random();
obj.updateView();
},
//创建div元素,添加到gridPanel中
create: function(r, c) {
var grid, cell;
var increment = 14,
grWidth, grHeight, grMarginTop, grMarginLeft, ceWidth, ceHight;
grid = document.createElement("div");
cell = document.createElement("div");
grid.id = "g" + r + c;
grid.className = "grid";
cell.id = "c" + r + c;
cell.className = "cell";
if (obj.ROW == 3) {
increment = 24;
} else if (obj.ROW == 4) {
increment = 18;
}
grWidth = grHeight = ceWidth = ceHight = 66 + (6 - obj.ROW) * increment; //优化后
grMarginTop = grMarginLeft = (480 - grWidth * obj.ROW) / (obj.ROW + 1);
grid.style.width = grWidth + "px";
grid.style.height = grHeight + "px";
grid.style.marginTop = grMarginTop + "px";
grid.style.marginLeft = grMarginLeft + "px";
cell.style.width = ceWidth + "px";
cell.style.height = ceHight + "px";
cell.style.top = grMarginTop + r * (grMarginTop + ceWidth) + "px";
cell.style.left = grMarginLeft + c * (grMarginLeft + ceHight) + "px";
cell.style.lineHeight = ceHight + "px";
cell.style.fontSize = 30 + (6 - obj.ROW) * 10 + "px";
//优化前
/*if (obj.ROW == 3) {
grid.style.width = "140px";
grid.style.height = "140px";
grid.style.margin = "15px 0 0 15px";
cell.style.width = "140px";
cell.style.height = "140px";
cell.style.top = 15 + r * 155 + "px"; //设置距离上一位置的高度
cell.style.left = 15 + c * 155 + "px"; //设置离左一位置的距离
cell.style.lineHeight = "140px";
} else if (obj.ROW == 4) {
grid.style.width = "100px";
grid.style.height = "100px";
grid.style.margin = "16px 0 0 16px";
cell.style.width = "100px";
cell.style.height = "100px";
cell.style.top = 16 + r * 116 + "px";
cell.style.left = 16 + c * 116 + "px";
cell.style.lineHeight = "100px";
} else if (obj.ROW == 5) {
grid.style.width = "75px";
grid.style.height = "75px";
grid.style.margin = "17.5px 0 0 17.5px";
cell.style.width = "75px";
cell.style.height = "75px";
cell.style.top = 17.5 + r * 92.5 + "px";
cell.style.left = 17.5 + c * 92.5 + "px";
cell.style.fontSize = "40px";
cell.style.lineHeight = "75px";
} else if (obj.ROW == 6) {
grid.style.width = "66px";
grid.style.height = "66px";
grid.style.margin = "12px 0 0 12px";
cell.style.width = "66p
没有合适的资源?快使用搜索试试~ 我知道了~
【前端素材】小游戏-经典2048小游戏.zip
共1个文件
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 82 浏览量
2024-04-04
14:42:50
上传
评论
收藏 5KB ZIP 举报
温馨提示
【技术分析】 HTML,是一种制作万维网页面的标准语言,它消除了不同计算机之间信息交流的障碍; CSS,可以帮助把网页外观做得更加美观; JavaScript,是一种轻量级的解释型编程语言; jQuery,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互; Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式; AJAX,创建交互式网页应用的网页开发技术。 前端游戏设计是游戏开发中至关重要的一部分,它涉及到游戏的外观、交互和用户体验等方面。以下是一些前端游戏设计的思路和关键点: 用户体验:确保游戏界面简洁直观,易于操作。考虑用户的需求和习惯,设计友好的用户界面,包括按钮、菜单、指引等,以提升用户体验。 视觉设计:选择合适的配色方案、图标和界面元素,保持视觉风格一致性。优秀的视觉设计可以提升游戏的吸引力和品质感。 动画效果:运用动画效果增强游戏的交互性和趣味性。动画可以使游戏更生动,提升用户参与感。 响应式设计:确保游戏在不同设备上都能正常展示和运行,包括PC、平板和手机等。响应式设计可以提高游戏的可访问性和用户覆盖范围。
资源推荐
资源详情
资源评论
收起资源包目录
【前端素材】小游戏-经典2048小游戏.zip (1个子文件)
经典2048小游戏
index.html 17KB
共 1 条
- 1
资源评论
枫蜜柚子茶
- 粉丝: 6797
- 资源: 5108
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功