原生js编写2048小游戏
效果图：
代码如下：
<!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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" value="3">3X3</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" value="4">4X4</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" type="button">5X5</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 = "66px";
cell.style.height = "66px";
cell.style.top = 12 + r * 78 + "px";
cell.style.left = 12 + c * 78 + "px";
cell.style.fontSize = "30px";
cell.style.lineHeight = "66px";
}*/
obj.eleFragment.appendChild(grid);
obj.eleFragment.appendChild(cell);
},
//随机产生一个新的数
random: function() {
while (1) {
var row = Math.floor(Math.random() * obj.ROW);
var cell = Math.floor(Math.random() * obj.CELL);
if (arr[row][cell] == 0) { //判断生成的随机数位置为0才随机生成2或4
arr[row][cell] = (Math.random() > 0.5) ? 4 : 2;
break;
}
}
// var row = Math.floor(Math.random() * 4);
// var cell = Math.floor(Math.random() * 4);
// if (arr[row][cell] == 0) { //判断生成的随机数位置为0才随机生成2或4
// arr[row][cell] = (Math.random() > 0.5) ? 4 : 2;
// return;
// }
// obj.random();//递归影响执行效率
},
//更新页面
updateView: function() {
var win = 0;
for (r = 0; r < obj.ROW; r++) {
for (c = 0; c < obj.CELL; c++) {
if (arr[r][c] == 0) { //值为0的不显示
$("c" + r + c).innerHTML = ""; //0不显示
$("c" + r + c).className = "cell" //清除样式
} else {
$("c" + r + c).innerHTML = arr[r][c];
$("c" + r + c).className = "cell n" + arr[r][c]; //添加不同数字的颜色
if (obj.ROW == 3 && arr[r][c] == 1024) {
win = 1;
} else if (obj.ROW == 4 && arr[r][c] == 2048) {
win = 1;
} else if (obj.ROW == 5 && arr[r][c] == 4096) {
win = 1;
} else if (obj.ROW == 6 && arr[r][c] == 8192) {
win = 1;
}
}
}
}
if (win == 1) { //通关
$("game").style.display = "block";
$("gameover").style.display = "block";
$("Score").innerHTML = "You win!<br>Score:" + obj.score;
}
if (obj.isGameOver()) { //游戏失败
$("game").style.display = "block";
$("gameover").style.display = "block";
$("Score").innerHTML = "GAME OVER!<br>Score:" + obj.score;
console.log("gameover");
}
},
//游戏失败
isGameOver: function() {
for (r = 0; r < obj.ROW; r++) {
for (c = 0; c < obj.CELL; c++) {
if (arr[r][c] == 0) { //有0还不是gameover
return false;
} else if (c != obj.CELL - 1 && arr[r][c] == arr[r][c + 1]) { //左往右 前一个和下一个不相等
return false;
} else if (r != obj.ROW - 1 && arr[r][c] == arr[r + 1][c]) { //上往下 上一个和下一个不相等
return false;
}
}
}
return true;
},
//查找下一个不为0的数值的位置
find: function(r, c, start, condition, direction) {
if (obj.keyCd == 2) { //上下按键
if (direction == 1) { //向上按键 f++
for (var f = start; f < condition; f += direction) {
if (arr[f][c] != 0) {
return f;
}
}
} else { //向下按键 f--
for (var f = start; f >= condition; f += direction) {
if (arr[f][c] != 0) {
return f;
}
}
}
} else { //左右按键
if (direction == 1) { //左按键 f++
for (var f = start; f < condition; f += direction) {
if (arr[r][f] != 0) {
return f;
}
}
} else { //右按键 f--
for (var f = start; f >= condition; f += direction) {
if (arr[r][f] != 0) {
return f;
}
}
}
}
return null; //循环结束仍然没有找到！=0的数值，返回null
},
//左按键的处理
dealToLeft: function(r) {
var next;
for (c = 0; c < obj.ROW; c++) {
next = obj.find(r, c, c + 1, obj.CELL, 1); //找出第一个不为0的位置
if (next == null) break; //没有找到就返回
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[r][next]; //把找到的不为0的数值替换为当前位置的值
arr[r][next] = 0; //找到的位置清0
c--; //再次循环多一次，查看后面否有值与替换后的值相同，
} else if (arr[r][c] == arr[r][next]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[r][next] = 0;
obj.score += arr[r][c];
}
}
},
move: function(itertor) {
var before, //没处理前
after; //after处理后
before = arr.toString();
itertor(); //执行for函数
after = arr.toString();
if (before != after) { //前后对比，如果不同就update
obj.random();
obj.updateView();
}
},
moveLeft: function() {
obj.move(function() {
for (r = 0; r < obj.ROW; r++) {
obj.dealToLeft(r);
}
})
// if 当前位置 不为零
// 从当前位置，下一个成员开始，遍历，
// 如果找到，与当前位置相等的数，
// 两者相加，并把不为零的成员，设置为零
// 如果 当前位置是 零
// 从当前位置下一个成员开始遍历
// 如果找到 第一个不为零的成员
// 当前位置数值设置为这个不为零的成员的值 ，并且把那个不为零的成员设置为 0
},
//右按键处理
dealToRight: function(r) {
var next;
for (c = obj.CELL - 1; c >= 0; c--) {
next = obj.find(r, c, c - 1, 0, -1); //找出第一个不为0的位置
if (next == null) break; //没有找到就返回
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[r][next]; //把找到的不为0的数值替换为当前位置的值
arr[r][next] = 0; //找到的位置清0
c++; //再次循环多一次，查看后面否有值与替换后的值相同，
} else if (arr[r][c] == arr[r][next]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[r][next] = 0;
obj.score += arr[r][c];
}
}
},
moveRight: function() {
obj.move(function() {
for (r = 0; r < obj.ROW; r++) {
obj.dealToRight(r);
}
})
},
//上按键处理
dealToUp: function(c) {
var next;
for (r = 0; r < obj.ROW; r++) {
next = obj.find(r, c, r + 1, obj.ROW, 1); //找出第一个不为0的位置
if (next == null) break;
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[next][c]; //把找到的不为0的数值替换为当前位置的值
arr[next][c] = 0; //找到的位置清0
r--; //再次循环多一次，查看后面否有值与替换后的值相同
} else if (arr[r][c] == arr[next][c]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[next][c] = 0;
obj.score += arr[r][c];
}
}
},
moveUp: function() {
obj.move(function() {
for (c = 0; c < obj.CELL; c++) {
obj.dealToUp(c);
}
})
},
//下按键处理
dealToDown: function(c) {
var next;
for (r = obj.ROW - 1; r >= 0; r--) {
next = obj.find(r, c, r - 1, 0, -1); //找出第一个不为0的位置
if (next == null) {
break;
}
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[next][c]; //把找到的不为0的数值替换为当前位置的值
arr[next][c] = 0; //找到的位置清0
r++; //再次循环多一次，查看后面否有值与替换后的值相同
} else if (arr[r][c] == arr[next][c]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[next][c] = 0;
obj.score += arr[r][c];
}
}
},
moveDown: function() {
obj.move(function() {
for (c = 0; c < obj.CELL; c++) {
obj.dealToDown(c);
}
})
}
}
window.onload = function() {
obj.createEle = 1;
obj.gameStart();
}
//切换模式
function getModel(e) { //事件冒泡获取a元素
var a = e.target,
modelValue = 4;
if (a.nodeName == "A") {
if (a.innerHTML == "3X3") {
modelValue = 3;
} else if (a.innerHTML == "4X4") {
modelValue = 4;
} else if (a.innerHTML == "5X5") {
modelValue = 5;
} else if (a.innerHTML == "6X6") {
modelValue = 6;
}
obj.ROW = obj.CELL = modelValue;
obj.createEle = 1; //需要创建格子div元素的标志
obj.gameStart();
}
}
// var modelValue = parseInt($("model").value);
// if (isNaN(modelValue)) {
// modelValue = 4; //默认是4*4
// }
// if (modelValue <= 2 || modelValue > 6) return; //2格或者大于6格无效
// obj.ROW = modelValue;
// obj.CELL = modelValue;
// obj.createEle = 1;
// obj.gameStart();
// console.log(modelValue);
// }
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
使用Javascript写的2048小游戏
最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri
-
Javascript编写2048小游戏
去年2048很火, 本来我也没玩过, 同事说如果用JS写2048 只要100多行代码: 今天试了一下, 逻辑也不复杂, 主要是数据构造函数上的数据的各种操作, 然后通过重新渲染DOM实现界面的更新, 整体不复杂, JS,css,和HTML合起来就300多行: 界面的生成使用了underscore.js的template方法, 使用了jQuery,主要是DOM的选择和操作以及动画效果,事件的绑定只做了PC端的兼容,只绑定了keydown事件: 把代码放到github-page上, 通过点击这里查看
-
javascript实现2048游戏示例
原生javascript代码写的2048游戏.建议在谷歌浏览器下跑. 2048.html 复制代码 代码如下: <!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>2048
-
javascript制作2048游戏
2048.html <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2048</title> <link rel="styleshe
-
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-equ
-
javascript版2048小游戏
没有技术含量,只是用来练习代码逻辑的.为了代码结构清晰,我把逻辑控制部分写在全局变量里,用户界面操作封装在UI对象里,大概就这样了.仅供参考.工作时候,我的编码风格有人吐槽太乱了,所以我想试着写一个不是那么乱的东西出来.. 复制代码 代码如下: <HTML> <head> <title>2048 DEMO</title> <meta charset='utf-8' /> <!-- 708616 javascript present ht
-
原生js编写2048小游戏
效果图: 代码如下: <!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; b
-
原生js实现2048小游戏
2048小游戏,供大家参考,具体内容如下 首先2048小游戏离不开16个格子,我们通过html和css创建好对应的标签和样式,然后开始js逻辑 <div id="box">//一个盒子里面16个小div <div id="son"></div> <div id="son"></div> <div id="son"></div> <div
-
原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: <div class="wrapper"> <ul class="box"></ul> <button class="start">开始点名</button> <button class="stop">停止</button>
-
利用原生js实现html5小游戏之打砖块（附源码）
前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较
-
Android编写2048小游戏
先来说说2048游戏规则: 开始时棋盘内随机出现两个数字,出现的数字仅可能为2或4 玩家可以选择上下左右四个方向,若棋盘内的数字出现位移或合并,视为有效移动 玩家选择的方向上若有相同的数字则合并,每次有效移动可以同时合并,但不可以连续合并 合并所得的所有新生成数字想加即为该步的有效得分 玩家选择的方向行或列前方有空格则出现位移 每有效移动一步,棋盘的空位(无数字处)随机出现一个数字(依然可能为2或4) 棋盘被数字填满,无法进行有效移动,判负,游戏结束 棋盘上出现2048,判胜,游戏结束 下面代码
-
使用js编写实现拼图游戏
本文实例为大家分享了用js编写实现拼图游戏的具体代码,供大家参考,具体内容如下 目标 使用原生js编写一个拼图游戏,我这里写了两种拼图的方法.一种是拖拽拼图,一种是经典的九宫格拼图,可以自定义参数设置游戏难度 先看看截图效果 拖拽模式(拖拽图片切换图片) 点击模式(点击图片与空白区域切换位置) 不多说,直接上代码 css #canvasBox{ margin: 0 auto; position: fixed; border: 2px solid #
-
JS原生2048小游戏源码分享(全网最新)
最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码: 效果: 代码: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2048小游戏</title> <style> body,h1,div,tabl
-
jQuery编写网页版2048小游戏
大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,也改进了一些源
-
利用c++编写简易版2048小游戏
目录 1.程序初始化 2.画图操作 3.字符控制 4.判断游戏结束和游戏胜利 别的不多说,先上效果图 我们都知道2048是个4 4的方格,为了方便数组下表我们生成5 5的数组,只用到1~4的下标. 初始化时候先随便生成两个目标 1.程序初始化 // 程序初始化 void init() { score = 0; memset(a, 0, sizeof(a)); int x1 = rand() % 4 + 1, y1 = rand() % 4 + 1, x2 = rand() % 4 + 1, y2