網頁版<2048>遊戲
網頁版<2048>遊戲,對2048遊戲感興趣。因而花了一天的功夫,本身寫出一個相似於<2048>的遊戲。
javascript
↑(W)/↓(S)/←(A)/→(D)控制方向
上源代碼:
html頁面代碼:game.html在根目錄css
<!DOCTYPE html>
<html>
<head>
<title>模擬的2048小遊戲</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!-- 引用css文件 -->
<link rel="stylesheet" type="text/css" href="http://blog.163.com/qiuyg_yc_it/blog/css/styles.css">
<!-- 引用jQuery文件 -->
<script type="text/javascript" src="http://blog.163.com/qiuyg_yc_it/blog/js/jquery-2.0.3.js"></script>
<!-- 引用js文件 -->
<script type="text/javascript" src="http://blog.163.com/qiuyg_yc_it/blog/js/new2048.js"></script>
</head>
<body>
<div class="div-round" id="tips">↑(W)/↓(S)/←(A)/→(D)控制方向</div>
<div id="game-panel">
<div class="div-round" id="box-main">
<div class="div-round box-lm" id="box0"></div>
<div class="div-round box-lm" id="box1"></div>
<div class="div-round box-lm" id="box2"></div>
<div class="div-round box-lm" id="box3"></div>
<div class="div-round box-lm" id="box4"></div>
<div class="div-round box-lm" id="box5"></div>
<div class="div-round box-lm" id="box6"></div>
<div class="div-round box-lm" id="box7"></div>
<div class="div-round box-lm" id="box8"></div>
<div class="div-round box-lm" id="box9"></div>
<div class="div-round box-lm" id="boxa"></div>
<div class="div-round box-lm" id="boxb"></div>
<div class="div-round box-lm" id="boxc"></div>
<div class="div-round box-lm" id="boxd"></div>
<div class="div-round box-lm" id="boxe"></div>
<div class="div-round box-lm" id="boxf"></div>
</div>
</div>
<!-- 提示點擊的方向 -->
<div id="keys"> </div>
<!-- 點擊按鈕從新開始 -->
<div style="width:200px;margin: 50px auto;">
<input type="button" value="開始" class="btn btn-primary" onclick="init();">
<input type="button" value="從新開始" class="btn btn-primary" onclick="if(window.confirm('您肯定從新開始嗎?')){init();}">
</div>
<div id="score">
總分數:00
</div>
<div id="max">
當前最大數:
</div>
<div id="time">
當前用時: 0s。
</div>
<!-- 提示快結束 -->
<div id="danger">
</div>
</body>
</html>
css代碼,
styles.css(在css目錄下)html
.div-round {
display: inline-block;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
font-family: "黑體";
text-align: left;
white-space: nowrap;
vertical-align: middle;
background-p_w_picpath: none;
border: 1px solid transparent;
border-radius: 4px;
margin-bottom: 0;
}
#box-main {
width: 420px;
height: 420px;
padding: 5px;
border: 2px solid red;
}
#box0,#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8,#box9,#boxa,#boxb,#boxc,#boxd,#boxe,#boxf{
height: 68px;
width: 93px;
border: 1px solid red;
float: left;
margin: 5px;
padding-top: 25px;
font-size: 30px;
text-align: center;
background: pink;
font-size: 30px;
}
#game-panel,#score,#max {
width: 630px;
position: relative;
left: 550px;
top: 20px;
}
#keys,#tips,#time,#danger {
width: 200px;
margin: 20px auto;
}
#tips{
width:420px;
float:left;
padding:10px;
border:1px solid red;
background: pink;
}
#keys {
font-size: 84px;
color: #bbbbbb;
}
#danger {
color: #440044;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-p_w_picpath: none;
border: 1px solid transparent;
border-radius: 6px;
}
.btn:hover,.btn:focus {
color: #333333;
text-decoration: none;
}
.btn-primary {
color: #ffffff;
background-color: #428bca;
border-color: #357ebd;
z-index: 99;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary
{
color: #ffffff;
background-color: #3276b1;
border-color: #285e8e;
}
.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary
{
background-p_w_picpath: none;
}
js代碼:
new2048.js(在js目錄下)java
var locations;
var keys = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c",
"d", "e", "f" ];
// 不一樣的數字對於不一樣的顏色,
// colors是顏色的數組
var colors = [ "#FFF", "PINK", "GRAY", "#ABCDEF", "#0FF0FF", "#FF0", "#CDF0AB",
"#FEDCBA", "#F0F", "#BBBBBB", "#00F", "#00FF00" ];
var score;// 總分數
var max;// 最大數
var time;// 計時
var t;
//
// $(function() {
// init();
// });
// 初始化
function init() {
t = setInterval(showtime, 1000);
score = 0;
max = 0;
time = 0;
locations = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
locations[createLocation()] = createFixedNum();
locations[createLocation()] = createFixedNum();
paint();
// 按鍵控制方向
window.onkeydown = function(e) {
var keyCode;
if (!e)
e = window.event;
if (document.all) {
keyCode = e.keyCode;
} else {
keyCode = e.which;
}
// ← 或 A
if (keyCode == 37 || keyCode == 65) {
$("#keys").text("←");
toLeft();
isEnd();
}
// ↑ 或 W
if (keyCode == 38 || keyCode == 87) {
$("#keys").text("↑");
toUp();
isEnd();
}
// → 或 D
if (keyCode == 39 || keyCode == 68) {
$("#keys").text("→");
toRight();
isEnd();
}
// ↓ 或 S
if (keyCode == 40 || keyCode == 83) {
$("#keys").text("↓");
toDown();
isEnd();
}
};
}
function isEnd() {
var f = false;
// 判斷是否結束
if (locations.indexOf(0) == -1) {// 若是數組中不包含0
// 判斷相鄰的數是否爲相等
// alert("注意了哦~");
$("#danger").text("注意了哦~");
// if(isEndX()){
if (isEndX() && isEndY()) {
clearTimeout(t);
if (window.confirm("結束了!\n當前分數: " + score + ";\n用時: " + time
+ "S;\n最大數是: " + max + "。\n是否開始新的遊戲?")) {
init();
} else {
window.close();
}
}
} else {
$("#danger").text("");
}
return f;
}
function isEndX() {
// 判斷橫向的數組
// 若是相鄰位置的數不相同,就結束
var f = false;
var w = new Array();
for (var j = 0; j < 4; j++) {
for (var i = 0; i < 4; i++) {
w[i] = locations[4 * j + i];
}
// alert(w);
f = (w[0] != w[1] && w[1] != w[2] && w[2] != w[3]);// 若是爲真,表示相鄰的兩個數不相等
if (!f) {
break;
}
}
return f;
}
function isEndY() {
// 判斷縱向的數組
// 若是相鄰位置的數不相同,就結束
var f = false;
var w = new Array();
for (var j = 0; j < 4; j++) {
for (var i = 0; i < 4; i++) {
w[i] = locations[4 * i + j];
}
// alert(w);
f = (w[0] != w[1] && w[1] != w[2] && w[2] != w[3]);// 若是爲真,表示相鄰的兩個數不相等
if (!f) {
break;
}
}
return f;
}
function toDown() {
// 向下
for (var i = 0; i < 4; i++) {
// 判斷每一行
var row = [ locations[i + 12], locations[i + 8], locations[i + 4],
locations[i] ];
configurationD(i, row);
}
locations[createLocation()] = createFixedNum();
paint();
}
function toRight() {
// 向右
for (var i = 0; i < 4; i++) {
// 判斷每一行
var row = [ locations[i * 4 + 3], locations[i * 4 + 2],
locations[i * 4 + 1], locations[i * 4] ];
// alert(i+"\t"+row);
configurationR(i, row);
}
locations[createLocation()] = createFixedNum();
paint();
}
function toLeft() {
// 向左
for (var i = 0; i < 4; i++) {
// 判斷每一行
var row = [ locations[i * 4], locations[i * 4 + 1],
locations[i * 4 + 2], locations[i * 4 + 3] ];
configurationL(i, row);
}
locations[createLocation()] = createFixedNum();
paint();
}
function toUp() {
// 向上
for (var i = 0; i < 4; i++) {
var row = [ locations[i + 0], locations[i + 4], locations[i + 8],
locations[i + 12] ];
configurationU(i, row);
}
locations[createLocation()] = createFixedNum();
paint();
}
function configurationD(i, r) {
makeArray(r);
for (var j = 0; j < 4; j++) {
locations[4 * (3 - j) + i] = r[j];
}
}
function configurationR(i, r) {
// 向右
makeArray(r);
for (var j = 0; j < 4; j++) {
locations[3 + 4 * i - j] = r[j];
}
}
function configurationU(i, r) {
makeArray(r);
for (var j = 0; j < 4; j++) {
locations[4 * j + i] = r[j];
}
}
function configurationL(i, r) {
makeArray(r);
for (var j = 0; j < 4; j++) {
locations[4 * i + j] = r[j];
}
}
function makeArray(r) {
if (!isZero(r)) {
// 把數組中是0日後移動
for (var m = 0; m < 4; m++) {
for (var n = 0; n < 3; n++) {
if (r[n] == 0) {
r[n] = r[n + 1];
r[n + 1] = 0;
}
}
}
}
for (var m = 0; m < 3; m++) {
if (r[m] == r[m + 1]) {
var k = m;
r[k] += r[k + 1];
score += r[k];
while (++k < 3) {
r[k] = r[k + 1];
}
r[3] = 0;
}
}
return r;
}
// 繪製點的位置
function paint() {
for (var i = 0; i < 16; i++) {
$("#box" + keys[i]).text((locations[i] == 0) ? "" : locations[i]);
var index = (locations[i] == 0) ? 0
: (locations[i].toString(2).length - 1);
$("#box" + keys[i]).css("background", colors[index]);
// 選出最大數
if (locations[i] > max) {
max = locations[i];
}
}
$("#score").text("總分爲 : " + score);
$("#max").text("當前最大數 : " + max);
}
// 隨機生成兩個數
function createFixedNum() {
// 生成2/4;
// 生成2的機率是0.8
return Math.random() < 0.8 ? 2 : 4;
}
// 生成位置
function createLocation() {
// 在空位置中隨機生成
var num = Math.floor(Math.random() * 16);
// 若是該位置有值,就返回從新生成
while (locations[num] != 0) {
num = Math.floor(Math.random() * 16);
}
return num;
}
function isZero(m) {
return m[0] == 0 && m[1] == 0 && m[2] == 0 && m[3] == 0;
}
// 計時
function showtime() {
$("#time").text("當前用時 :" + (++time) + " s。");
}
以上代碼,均屬我的愛好,若有侵權,多多包含,還請速速告知!郵箱:888821084@139.com(也可交流)jquery
相關文章
- 1. HTML --盜版網頁遊戲
- 2. web遊戲/網頁遊戲網址
- 3. 網頁版檯球小遊戲
- 4. 網頁版掃雷小遊戲
- 5. 遊戲——網頁版別踩白塊
- 6. HTML網頁版雷電遊戲
- 7. HTML5水果忍者遊戲（網頁版）
- 8. 掃雷小遊戲-純網頁版
- 9. 2048小遊戲——網頁版（提升篇）
- 10. 2048小遊戲——網頁版（基礎篇）
- 更多相關文章...
- • Web 網頁 驗證 - 網站建設指南
- • ASP.NET Web Forms - 母版頁 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML --盜版網頁遊戲
- 2. web遊戲/網頁遊戲網址
- 3. 網頁版檯球小遊戲
- 4. 網頁版掃雷小遊戲
- 5. 遊戲——網頁版別踩白塊
- 6. HTML網頁版雷電遊戲
- 7. HTML5水果忍者遊戲（網頁版）
- 8. 掃雷小遊戲-純網頁版
- 9. 2048小遊戲——網頁版（提升篇）
- 10. 2048小遊戲——網頁版（基礎篇）