网页版2048游戏html,HTML网页版2048小游戏
存放路径如下,2048.html css/2048.css js/2048.js
效果显示:点击这里! 源代码下载:
源代码如下:
2048.html文件
2048
Please click the left mouse button to start,通过w a s d 来控制方向
<>网络人VS灰鸽子工作室制作
2048.css文件
#div2048
{
width: 500px;
height: 500px;
background-color: #b8af9e;
margin: 0 auto;
position: relative;
}
#start
{
width: 500px;
height: 500px;
line-height: 500px;
display: block;
text-align: center;
font-size: 30px;
background: #f2b179;
color: #FFFFFF;
}
#div2048 div.tile
{
margin: 20px 0px 0px 20px;
width: 100px;
height: 40px;
padding: 30px 0;
font-size: 40px;
line-height: 40px;
text-align: center;
float: left;
}
#div2048 div.tile0{
background: #ccc0b2;
}
#div2048 div.tile2
{
color: #7c736a;
background: #eee4da;
}
#div2048 div.tile4
{
color: #7c736a;
background: #ece0c8;
}
#div2048 div.tile8
{
color: #fff7eb;
background: #f2b179;
}
#div2048 div.tile16
{
color:#fff7eb;
background:#f59563;
}
#div2048 div.tile32
{
color:#fff7eb;
background:#f57c5f;
}
#div2048 div.tile64
{
color:#fff7eb;
background:#f65d3b;
}
#div2048 div.tile128
{
color:#fff7eb;
background:#edce71;
}
#div2048 div.tile256
{
color:#fff7eb;
background:#edcc61;
}
#div2048 div.tile512
{
color:#fff7eb;
background:#ecc850;
}
#div2048 div.tile1024
{
color:#fff7eb;
background:#edc53f;
}
#div2048 div.tile2048
{
color:#fff7eb;
background:#eec22e;
}
2048.js文件
function game2048(container)
{
this.container = container;
this.tiles = new Array(16);
}
game2048.prototype = {
init: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
var tile = this.newTile(0);
tile.setAttribute('index', i);
this.container.appendChild(tile);
this.tiles[i] = tile;
}
this.randomTile();
this.randomTile();
},
newTile: function(val){
var tile = document.createElement('div');
this.setTileVal(tile, val)
return tile;
},
setTileVal: function(tile, val){
tile.className = 'tile tile' + val;
tile.setAttribute('val', val);
tile.innerHTML = val > 0 ? val : '';
},
randomTile: function(){
var zeroTiles = [];
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 0){
zeroTiles.push(this.tiles[i]);
}
}
var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];
this.setTileVal(rTile, Math.random() < 0.8 ? 2 : 4);
},
move:function(direction){
var j;
switch(direction){
case 'W':
for(var i = 4, len = this.tiles.length; i < len; i++){
j = i;
while(j >= 4){
this.merge(this.tiles[j - 4], this.tiles[j]);
j -= 4;
}
}
break;
case 'S':
for(var i = 11; i >= 0; i--){
j = i;
while(j <= 11){
this.merge(this.tiles[j + 4], this.tiles[j]);
j += 4;
}
}
break;
case 'A':
for(var i = 1, len = this.tiles.length; i < len; i++){
j = i;
while(j % 4 != 0){
this.merge(this.tiles[j - 1], this.tiles[j]);
j -= 1;
}
}
break;
case 'D':
for(var i = 14; i >= 0; i--){
j = i;
while(j % 4 != 3){
this.merge(this.tiles[j + 1], this.tiles[j]);
j += 1;
}
}
break;
}
this.randomTile();
},
merge: function(prevTile, currTile){
var prevVal = prevTile.getAttribute('val');
var currVal = currTile.getAttribute('val');
if(currVal != 0){
if(prevVal == 0){
this.setTileVal(prevTile, currVal);
this.setTileVal(currTile, 0);
}
else if(prevVal == currVal){
this.setTileVal(prevTile, prevVal * 2);
this.setTileVal(currTile, 0);
}
}
},
equal: function(tile1, tile2){
return tile1.getAttribute('val') == tile2.getAttribute('val');
},
max: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 2048){
return true;
}
}
},
over: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 0){
return false;
}
if(i % 4 != 3){
if(this.equal(this.tiles[i], this.tiles[i + 1])){
return false;
}
}
if(i < 12){
if(this.equal(this.tiles[i], this.tiles[i + 4])){
return false;
}
}
}
return true;
},
clean: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
this.container.removeChild(this.tiles[i]);
}
this.tiles = new Array(16);
}
}
var game, startBtn;
window.onload = function(){
var container = document.getElementById('div2048');
startBtn = document.getElementById('start');
startBtn.onclick = function(){
this.style.display = 'none';
game = game || new game2048(container);
game.init();
}
}
window.onkeydown = function(e){
var keynum, keychar;
if(window.event){ // IE
keynum = e.keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
if(['W', 'S', 'A', 'D'].indexOf(keychar) > -1){
if(game.over()){
game.clean();
startBtn.style.display = 'block';
startBtn.innerHTML = 'game over, replay?';
return;
}
game.move(keychar);
}
}
网页版2048游戏html,HTML网页版2048小游戏相关推荐
- Python版基于pygame的玛丽快跑小游戏源代码,玛丽冒险小游戏代码,支持双人模式
基于pygame的玛丽快跑小游戏源代码,玛丽冒险小游戏代码,支持双人模式 按空格进入单人模式,按't'进入双人模式,双人模式下玛丽1采用空格键上跳,玛丽2采用方向上键上跳. 完整代码下载地址:Pyth ...
- 计算机的神奇小游戏,大多数人玩过的电脑小游戏 你还记得其中的哪几个?
不知道大家小时候第一个接触到的需要联网的电脑游戏是什么,不过对于绝大多数人来说,这几个游戏经常是能够让我们为之沉迷,甚至废寝忘食的对象. 赛尔号为主的养成类游戏 09年,那时候网吧慢慢开始在中国各地成 ...
- javascript小游戏_个人网站集成js小游戏《圈小猫》教程及源码
今天在某网站浏览帖子的时候,发现帖子被删除了,然后弹出了404页面,页面上集成了一个小游戏,小游戏长什么样子呢?看下面这个图! 第一步 查看小游戏源码,发现这个小游戏完全是由JavaScript编写的 ...
- 计算机小游戏有哪些,详解电脑小游戏有哪些
随着电脑的普及,很多朋友在无聊的时候都会玩电脑游戏来解闷.如果我们电脑没有网络了怎么办呢?上有政策,下有对策,下载一些单机小游戏就可以啦,下面,我就给大家介绍几款好玩的小游戏 电脑单机游戏是相对于网络 ...
- 【抖音小游戏】 Unity制作抖音小游戏方案 最新完整详细教程来袭【持续更新】
前言 [抖音小游戏] Unity制作抖音小游戏方案 最新完整详细教程来袭[持续更新] 一.相关准备工作 1.1 用到的相关网址 1.2 注册字节开发者后台账号 二.相关集成工作 2.1 下载需要的集成 ...
- 下一个游戏新风口已来?小游戏或成2018年最大游戏黑马
5月24日,在腾讯"云+未来"峰会游戏专场中,主题为"下一个游戏风口"的圆桌对话吸引了产业各方的极大关注,也被业界视为洞察游戏行业发展趋势的风向标. \\ 在游 ...
- python做一个小游戏_利用python做个小游戏
从本期开始,我们将利用几天的时间用python来做个小游戏,当然,在做小游戏之前,我们必须学会一个做小游戏的第三方库--pygame.可能有人会说,python不擅长或者说不适合用来做游戏,的确是这样 ...
- Java控制台游戏~600行代码实现打怪小游戏
Java控制台游戏~600行代码实现打怪小游戏(多图预警) 一,先放个启动界面(一些英雄,怪物技能介绍跟装备属性都写在里边): 二,在这个简单的小游戏里,你可以体验到: 1.打怪: 2.随机玩法寻宝: ...
- 年会活跃微信群小游戏有哪些?塔防小游戏经典玩法讲解
马上接近年底了,很多企业都在准备办一个适合当下环境的年会活动,现在仍是疫情防御阶段,那该如何筹备一个线上活动呢?经调查发现,不少公司会选择TOM小游戏作为一个活动的项目,哪选择什么样的游戏适合呢?一起 ...
- 《海盗来了》疯狂游戏,如何用数据抢占小游戏市场
微信小游戏产品总监李卿曾在今年的公开采访中提到:"这个市场在短期内便进入了精细化领域,面对各种亿量级数据的场景,微信小游戏厂商们要么需要更多的人力投入,要么需要更好的工具服务". ...
最新文章
- sudo执行脚本找不到环境变量解决方法
- matlab教程lqg函数与收敛速度,科学网—Matlab编写由加速度积分得到速度和位移函数 - 王德才的博文...
- Android 学习视频
- Spring的@Transactional注解踩坑
- python gps与高德地图poi_Python——使用高德API获取指定城指定类别POI并实现XLSX文件合并...
- 斗鱼上市首日低开平收 总市值37.3亿美元
- west-first路由算法
- Javascript浏览器事件(上)
- Pinyin Comparison 拼音辨别 V1.0
- 分享一个NI软件卸载工具
- OpenGL 中的 Render To Texture
- Resin配置https
- 插件框架篇一之scrollbars
- JS 数组方法 splice 完全解读
- 如何使用腾讯云轻量服务器以及WooCommerce 应用镜像搭建跨境电商独立站!
- 网络攻防之——指纹识别工具
- 如何移除Office 365标题栏上的账号信息
- 可视化项目管理,项目进度管理必备工具
- FastDFS单机部署安装
- 免费建站?手把手自己从零开始(超详细)