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方面的知识,代码有问题欢迎各位亲提出宝贵意见,共同学习进步,同时也非常感谢大家对我们网站的支持,谢谢!

时间: 2016-03-22

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小游戏

没有技术含量,只是用来练习代码逻辑的.为了代码结构清晰,我把逻辑控制部分写在全局变量里,用户界面操作封装在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

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小游戏

最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri

用Python写一个无界面的2048小游戏

以前游戏2048火的时候,正好用其他的语言编写了一个,现在学习python,正好想起来,便决定用python写一个2048,由于没学过python里面的界面编程,所以写了一个极其简单的无界面2048.游戏2048的原理和实现都不难,正好可以拿来练手,要是不知道这游戏的话,可以去网上查一下,或者下载一个到手机来玩一下,我就不在说其原理.我知道不放图的话大家一点兴趣都没,下面首先放一张游戏成型图,然后我们在来讲如何一步步用最基础的知识来实现. 一.生成4*4的矩阵 游戏的第一步便是生成一个4*4的矩

jQuery编写网页版2048小游戏

大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,也改进了一些源

Android高仿2048小游戏实现代码

刚开始进入Splash界面: 1.SplashActivity.Java(两秒后进入开始界面,Splash界面的布局只有一个图片,在博客后,会展示给大家看) public class SplashActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.a

200行java代码实现2048小游戏

本文实例为大家分享了java实现2048小游戏的具体代码,供大家参考,具体内容如下 效果图: 游戏介绍: 1.2048是一款益智类小游戏,刚开始随机出现两个数字,可以上下左右控制数字的移动. 2.当选择一个方向移动后,所有数字都会沿该方向移动到表格尽头,并且空余表格会随机出现2或4,当碰到相同的两个数字时,该两个数字会合并相加成一个数字,直到最大的数字变成2048游戏成功 3.否则当数字填满表格且不能再移动时游戏失败. 游戏代码: import java.awt.*; import java.a

Java完美实现2048小游戏

完美地模仿了2048游戏,是根据网友的一个2048改的. Block.java import javax.swing.*; import java.awt.*; public class Block extends JLabel { private int value; public Block() { value = 0;//初始化值为0 setFont(new Font("font", Font.PLAIN, 40));//设定字体 setBackground(Color.gray

lua实现的2048小游戏

lua实现的2048小游戏,只要可以运行lua脚本的环境下都可以玩. 复制代码 代码如下: --[[============================================================================= #     FileName: 2048.lua #         Desc: lua console 2048 #       Author: hanxi #        Email: hanxi.info@gmail.com #    

纯JavaScript 实现flappy bird小游戏实例代码

前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:

C语言实现2048小游戏

本文实例为大家分享了C语言实现2048小游戏的具体代码,供大家参考,具体内容如下 具有以下特点: 1.linux下完成 2.非堵塞键盘读取 3.随机生成2和4 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #define TTY_PATH "/dev/tty" #define STTY_ON "stty raw -echo -F" #define STTY_O

基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一.游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编