首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript 2048 游戏实例代码(简单易懂)

Posted in Javascript onMarch 25, 2016

废话不多说了，直接给大家贴代码了，觉得很满意直接拿去。

JavaScript 2048 游戏实例代码(简单易懂)

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>无标题文档</title>
<style>
header{display:block; margin: auto; width:%; text-align:center;}
header h{font-size:px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
header #newgamebutton{display:block; margin:px auto; width:px; padding:px px; background-color:#fa; font-family:Arial; color:white; border-radius:px; text-decoration:none;}
header #newgamebutton:hover{background-color:#fb;}
header p{font-family:Arial; font-size:px; margin:px auto;}
#grid-container{width:px; height:px; padding:px; margin:px auto; background-color:#bbada; border-radius:px; position:relative;}
.grid-cell{width:px; height:px; border-radius:px; color:white; background-color:#cccb; position:absolute; font-family:Arial; font-weight:bold; font-size:px; line-height:px; text-align:center;}
.gameover{display:block; margin: auto; width:px; text-align:center; vertical-align:middle; position:absolute;}
.gameover p {
font-family: Arial;
font-size: px;
color: white;
margin: px auto;
margin-top: px;
}
.gameover span {
font-family: Arial;
font-size: px;
color: white;
margin: px auto;
}
#restartgamebutton {
display: block;
margin: px auto;
width: px;
padding: px px;
background-color: #fa;
font-family: Arial;
font-size: px;
color: white;
border-radius: px;
text-decoration: none;
}
#restartgamebutton:hover {
background-color: #fb;
}
#showGameover{width:px; padding:px px; background-color:#fa; font-family:Arial; color:white; border-radius:px; text-decoration:none; font-size:px; position:absolute;}
</style>
<script>
window.onload = function (){
//newgame();
var showScore = document.getElementById('score');
score = ;
init();
generateOneNumber();
generateOneNumber();
window.onkeydown = function (e){
var e = e || window.event;
switch(e.keyCode){
case :
if(canMoveLeft(board)){
moveLeft();
generateOneNumber();
isgameover();
}
break;
case :
if(canMoveUp(board)){
moveUp();
generateOneNumber();
isgameover();
}
break;
case :
if(canMoveRight(board)){
moveRight();
generateOneNumber();
isgameover();
}
break;
case :
if(canMoveDown(board)){
moveDown();
generateOneNumber();
isgameover();
}
break;
default :
break;
}
};
};
function generateOneNumber() {
if(!nospace(board)){
var randx = parseInt(Math.floor(Math.random() * ));
var randy = parseInt(Math.floor(Math.random() * ));
while (true) {
if (board[randx][randy] == ) {
break;
}
var randx = parseInt(Math.floor(Math.random() * ));
var randy = parseInt(Math.floor(Math.random() * ));
}
var randNumber = Math.random() < . ? : ;
board[randx][randy] = randNumber;
var gridCell = document.getElementById('grid-cell-'+randx+'-'+randy);
gridCell.innerHTML = randNumber;
//
}
else {
gameover();
}
}
function newgame() {
window.location.reload();
}
var board = new Array();
function init(){
for(var i=;i<;i++){
board[i] = new Array();
for(var j=;j<;j++){
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.style.top = (+i*)+'px';
gridCell.style.left = (+j*)+'px';
}
}
}
function getNumberBackgroundColor(number) {
switch (number) {
case :return "#eeeda";break;
case :return "#edec";break;
case :return "#fb";break;
case :return "#f";break;
case :return "#fcf";break;
case :return "#feb";break;
case :return "#edcf";break;
case :return "#edcc";break;
case :return "#c";break;
case :return "#be";break;
case :return "#c";break;
case :return "#ac";break;
case :return "#c";break;
}
}
function getNumberColor(number) {
if (number <= ) {
return "#e"
}
return "white";
}
function nospace(board) {
for (var i = ; i < ; i++) {
for (var j = ; j < ; j++) {
if (board[i][j] == ) {
return false;
}
}
}
return true;
}
function canMoveLeft(board) {
for (var i = ; i < ; i++) {
for (var j = ; j < ; j++) {
if (board[i][j] != ) {
if (board[i][j - ] == || board[i][j - ] == board[i][j]) {return true; }
}
}
}
return false;
}
function moveLeft() {
for (var i = ; i < ; i++) {
for (var j = ; j < ; j++) {
if (board[i][j] != ) {
for (var k = j-; k > -; k--) {
if(board[i][k] == || board[i][k] == board[i][j]){
board[i][k] = board[i][k] + board[i][j];
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+i+'-'+k);
gridCellk.innerHTML = board[i][k];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
gridCell.style.backgroundColor = '#cccb';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[i][k];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
j = k;
//
}
else {
break; //跳出 var k 的for循环
}
}
}
}
}
}
function canMoveUp(board) {
for (var j = ; j < ; j++) {
for (var i = ; i < ; i++) {
if (board[i][j] != ) {
if (board[i - ][j] == || board[i - ][j] == board[i][j]) {return true; }
}
}
}
return false;
}
function moveUp() {
for (var j = ; j < ; j++) {
for (var i = ; i < ; i++) {
if (board[i][j] != ) {
for (var k = i-; k > -; k--) {
if(board[k][j] == || board[k][j] == board[i][j]){
board[k][j] = board[k][j] + board[i][j];
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+k+'-'+j);
gridCellk.innerHTML = board[k][j];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
gridCell.style.backgroundColor = '#cccb';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[k][j];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
i = k;
//
}
else {
break; //跳出 var k 的for循环
}
}
}
}
}
}
function canMoveRight(board) {
for (var i = ; i < ; i++) {
for (var j = ; j > -; j--) {
if (board[i][j] != ) {
if (board[i][j + ] == || board[i][j + ] == board[i][j]) {return true; }
}
}
}
return false;
}
function moveRight() {
for (var i = ; i < ; i++) {
for (var j = ; j > -; j--) {
if (board[i][j] != ) {
for (var k = j+; k < ; k++) {
if(board[i][k] == || board[i][k] == board[i][j]){
board[i][k] = board[i][k] + board[i][j];
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+i+'-'+k);
gridCellk.innerHTML = board[i][k];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
gridCell.style.backgroundColor = '#cccb';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[i][k];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
j = k;
//
}
else {
break; //跳出 var k 的for循环
}
}
}
}
}
}
function canMoveDown(board) {
for (var j = ; j < ; j++) {
for (var i = ; i > -; i--) {
if (board[i][j] != ) {
if (board[i + ][j] == || board[i + ][j] == board[i][j]) {return true; }
}
}
}
return false;
}
function moveDown() {
for (var j = ; j < ; j++) {
for (var i = ; i > -; i--) {
if (board[i][j] != ) {
for (var k = i+; k < ; k++) {
if(board[k][j] == || board[k][j] == board[i][j]){
board[k][j] = board[k][j] + board[i][j];
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+k+'-'+j);
gridCellk.innerHTML = board[k][j];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
gridCell.style.backgroundColor = '#cccb';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[k][j];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
i = k;
//
}
else {
break; //跳出 var k 的for循环
}
}
}
}
}
}
function isgameover() {
if (nospace(board) && nomove(board)) {
gameover();
}
}
function nomove(board) {
if (canMoveDown(board) || 
canMoveLeft(board) || 
canMoveRight(board) || 
canMoveUp(board)) {
return false;
}
return true;
}
function bounce(obj,top){
clearInterval(obj.timer);
var nSpeed = ;
var acceleration = ;
var Flag = ;
obj.timer = setInterval(function (){
nSpeed += acceleration;
nSpeed *= .;
if(obj.offsetTop + nSpeed >= top){
obj.style.top = top + 'px';
nSpeed *= -;
}else{
if(Math.abs(nSpeed) < && Math.abs(top-obj.offsetTop)<){
clearInterval(obj.timer);
}
else{
obj.style.top = obj.offsetTop + nSpeed + 'px';
}
}
},);
}
function gameover() {
//alert("gameover!");
var gameover = document.createElement('div');
gameover.id = 'showGameover';
gameover.innerHTML = 'GAME OVER';
var gridContainer = document.getElementById('grid-container');
gridContainer.appendChild(gameover);
var showGameover = document.getElementById('showGameover');
showGameover.style.left = (gridContainer.offsetWidth - showGameover.offsetWidth ) / + 'px';
bounce(showGameover,);
}
</script>
</head>
<body>
<header>
<!--<h> </h>-->
<a href="javascript:newgame();" id="newgamebutton"> New Game </a>
<p> score: <span id="score"></span></p>
<div id="grid-container">
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
</div>
</header>
</body>
</html>

以上代码还很满意吧，都是些div+css方面的知识，代码有问题欢迎各位亲提出宝贵意见，共同学习进步，同时也非常感谢大家对三水点靠木网站的支持,谢谢！

JavaScript 2048 游戏实例代码(简单易懂)

- Author -

前端爱好者

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
Svg.js实例教程及使用手册详解（一）
May 16 Javascript
微信小程序 连续旋转动画（this.animation.rotate）详解
Apr 07 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
node.js express框架简介与实现
Jul 23 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
JavaScript入门系列之知识点总结
Mar 24 #Javascript
JS实现支持Ajax验证的表单插件
Mar 24 #Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 #Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 #Javascript
js+css实现select的美化效果
Mar 24 #Javascript
基于jQuery Ajax实现上传文件
Mar 24 #Javascript
Angular.js如何从PHP读取后台数据
Mar 24 #Javascript
blinker(1) data(4) 信号库(1) 字符集(1) variable_scope(1) turtle(1) name_scope (1) 三子棋(2) 神经网络(7) Keras(3)
You might like
php的字符串用法小结
2010/06/08 PHP
thinkphp微信开发（消息加密解密）
2015/12/02 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
限制文本字节数js代码
2007/03/06 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python实现的快速排序算法详解
2017/08/01 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Python解析json代码实例解析
2019/11/25 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
如何唤起类中的一个方法
2013/11/29 面试题
物流仓管员工作职责
2014/01/06 职场文书
教师读书活动总结
2014/05/07 职场文书
个人承诺书格式
2014/06/03 职场文书
北京英语导游词
2015/02/12 职场文书
喋血孤城观后感
2015/06/08 职场文书
2015年教师节感言
2015/08/03 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
确保减税降费落地生根，用实实在在措施
2019/07/19 职场文书