首页
所有分类
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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
Angular实现form自动布局
Jan 28 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
Jquery Easyui表单组件Form使用详解（30）
Dec 19 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
js实现星星海特效的示例
Sep 28 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
信号库(1) 三子棋(2) Keras(3) 神经网络(7) turtle(1) 绘图(1) name_scope (1) data(4) variable_scope(1) blinker(1)
You might like
php 抽象类的简单应用
2011/09/06 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
srcElement表格样式
2006/09/03 Javascript
validator验证控件使用代码
2010/11/23 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python实现的堆排序算法示例
2018/04/29 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python 输出所有大小写字母的方法
2019/01/02 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
python中类与对象之间的关系详解
2020/12/16 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
人力资源部经理助理岗位职责
2014/03/04 职场文书
超市店庆活动方案
2014/08/31 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
订货会邀请函
2015/01/31 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB