html+css+js 实现2048

最新推荐文章于 2021-06-26 22:38:20 发布
最新推荐文章于 2021-06-26 22:38:20 发布
阅读量94 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/forri/p/5645784.html
版权

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2048</title>
<style>
*{
padding:0;
margin:0;
font-family:Arial;
}
#game-title .title{
text-align: center;
font-weight: bolder;
font-size: 40px;
margin: 6px;
}

#game-window{
width:500px;
margin:auto;
font-weight:700;
}

#game-window .option .button{
position: relative;
background-color: #9f8b77;
border:1px solid #9f8b77;
color:white;
padding:5px;
border-radius:4px;
cursor: pointer;
}
#game-window .option .button:active{
color:#eab3bc;
top:2px;
left:2px;
}
#game-window .game-panel{
width:500px;
height:500px;
background-color:#bbada0;
border-radius:6px;
margin-top:6px;
position: relative;
}
#game-window .game-panel .bg-cell,
#game-window .game-panel .cell{
position: absolute;
width:100px;
height:100px;
background-color:#ccc0b3;
border-radius:6px;
transition:200ms;

}
#game-window .game-panel .cell{
background-color: #ffcb38;
opacity:.8;
font-size:60px;
font-weight:bold;
line-height:100px;
text-align: center;
color: #776e65;
}
.row0{
top:20px;
}
.row1{
top:140px;
}
.row2{
top:260px;
}
.row3{
top:380px;
}
.col0{
left:20px;
}
.col1{
left:140px;
}
.col2{
left:260px;
}
.col3{
left:380px;
}
</style>

<script src="jquery.js"></script>
<script>
var cells;
//铺背景方块
function init(){
cells = [
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
];
$("#game-window .option .score").text(0);//分数置0

var panel = $("#game-window .game-panel");
var bgs = "";
for(var i = 0; i<4; i++) {
for (var j = 0; j < 4; j++) {
bgs += "<div class = 'bg-cell row" + i + " col" + j + "'></div>";
}
}
panel.html(bgs);
random_cell();
}
//获取1-4之间的一个随机数
function select_from(seed){
return Math.floor(Math.random()*seed);
}
//生成一个随机数字方块
nums = [2,4];
function random_cell(){
//格子全满之后弹出函数
var count = 0;
for(var i = 0;i<cells.length;i++){
for(var j = 0;j<cells[i].length;j++){
if(cells[i][j]){
count++;
}
}
}
if(count == 16){
return;
}
//判断格子是不是空的，是的话随机填2或4
while(1){
var i = select_from(4);
console.log(i);
var j = select_from(4);
console.log(j);
var cell = cells[i][j];
if(cell){
continue;
}
var num = nums[select_from(2)];
cells[i][j] = num;
cell = "<div class='cell row"+i+" col"+j+"'>"+num+"</div>"
cell = $(cell); //获得jquery 对象
setStyle(cell);//色块颜色
$("#game-window .game-panel").append(cell);
break;
}
}

var colors = [
"#eee4da",//2
"#ede0c8",//4
"#f2b179",//8
"#f59563",//16
"#f67c5f",//32
"#f65e3b",//64
"#edcf72",//128
"#edcc61",//256
"#9c0",//512
"#33b5e5",//1024
"#09c",//2048
"#a6c",//4096
"#93c"//8192
];
function setStyle(cell){
var num = cell.text();
var backgroundcolor = colors[(Math.log(num)/Math.log(2))-1];
cell.css({
"background-color":backgroundcolor,
"font-size":num>=1024?"40px":"",
"color":num<=4?"":"white"
});

}
function setScore(score) {
$("#game-window .option .score").text(
$("#game-window .option .score").text()*1+score);
}
function findCell(i,j) {
return $("#game-window .game-panel .cell.row"+i+".col"+j);
}
function isDead() {
for(var i = 0;i<cells.length;i++){
for(var j=0;j<cells[i].length;j++) {
var cell = cells[i][j];
if(!cell){
return false;
}
if(i-1>=0 && cell == cells[i-1][j]){
return false;
}
if(i+1<cells.length && cell == cells[i+1][j]){
return false;
}
if(j-1>=0 && cell == cells[i][j-1]){
return false;
}
if(j+1<cells[i].length && cell == cells[i][j+1]){
return false;
}
}
}
return true;
}

function leftAction() {
var count = 0;
for(var i = 0;i<cells.length;i++){
for(var j = 0;j<cells.length;j++){
if(!cells[i][j]){
continue;
}
if(moveLeft(cells[i],i,j)){
count++;
}
}
}
return count;
}
function topAction() {
var count = 0;
for(var j = 0;j<cells[0].length;j++) {
for (var i = 1; i < cells.length; i++) {
if (!cells[i][j]) {
continue;
}
if (moveTop(i, j)) {
count++;
}
}
}
return count;
}
function rightAction() {
var count = 0;
for(var i = 0;i<cells.length;i++){
for(var j = cells[i].length - 2;j>=0;j--){
if(!cells[i][j]){
continue;
}
if(moveRight(cells[i],i,j)){
count++;
}
}
}
return count;
}
function bottomAction() {
var count = 0;
for (var j = 0; j < cells[0].length; j++) {
for (var i = 2; i>=0; i--) {
if (!cells[i][j]) {
continue;
}
if (moveBottom(i, j)) {
count++;
}
}
}
return count;
}
function moveTop(i,j) { //进入函数说明 列固定，动行数
var pre= cells[i][j]; //取当前值
var isMoved = false;
for(var k = i-1;k>=0;k--){ //向上检查
var curr = cells[k][j]; //现在检查位置的元素
if(curr){ //如果是有数字
if(curr == pre){ //如果数字相等
cells[i][j] = 0; //原来位置置零
cells[k][j] = curr + pre; //检查位置数字相加
isMoved = true;
//TODO 设置分数
setScore(curr);
findCell(k,j).remove();
var cell = findCell(i,j)
.removeClass("row"+i)
.addClass("row"+k)
.text(curr + pre);
setStyle(cell);
}else{ //如果数字不相等
if(!cells[k+1][j]){ //如果检查位置为0
isMoved = true;
cells[i][j] = 0; //原来的位置设置成0
cells[k+1][j] = pre; //检查位置设置成pre

cell = findCell(i,j)
.removeClass("row"+i)
.addClass("row"+(k+1));
}
}
return isMoved;
}
}
if(cells[0][j] == 0){
isMoved = true;
}
//前面都是0
cells[i][j] = 0;
cells[0][j] = pre;
var cell = findCell(i,j).removeClass("row"+i)
.addClass("row0");
return isMoved;
}
function moveLeft(row,i,j) {
var pre= row[j];
var isMoved = false;
for(var k = j-1;k>=0;k--){
var curr = row[k];//现在检查位置的元素
if(curr){
if(curr == pre){
row[j] = 0;//原来位置置零
row[k] = curr + pre;
isMoved = true;
//TODO 设置分数
setScore(curr);

findCell(i,k).remove();
var cell = findCell(i,j)
.removeClass("col"+j)
.addClass("col"+k)
.text(curr + pre);
setStyle(cell);
}else{
if(!row[k+1]){
isMoved = true;
row[j] = 0;
row[k+1] = pre;
cell = findCell(i,j)
.removeClass("col"+j)
.addClass("col"+(k+1));
}
}
return isMoved;
}
}
if(row[0] == 0){
isMoved = true;
}
//前面都是0
row[j] = 0;
row[0] = pre;
var cell = findCell(i,j).removeClass("col"+j)
.addClass("col0");

return isMoved;
}
function moveRight(row, i, j) {
var pre= row[j];
var isMoved = false;
for(var k = j+1;k<row.length;k++){
var curr = row[k];//现在检查位置的元素
if(curr){
if(curr == pre){
row[j] = 0;//原来位置置零
row[k] = curr + pre;
isMoved = true;
//TODO 设置分数
setScore(curr);
findCell(i,k).remove();
var cell = findCell(i,j)
.removeClass("col"+j)
.addClass("col"+k)
.text(curr + pre);
setStyle(cell);
}else{
if(!row[k-1]){
isMoved = true;
row[j] = 0;
row[k-1] = pre;
cell = findCell(i,j)
.removeClass("col"+j)
.addClass("col"+(k-1));
}
}
return isMoved;
}
}
if(row[3] == 0){
isMoved = true;
}
//前面都是0
row[j] = 0;
row[row.length-1] = pre;
var cell = findCell(i,j).removeClass("col"+j)
.addClass("col3");

return isMoved;
}
function moveBottom(i,j){
var pre= cells[i][j]; //取当前值
var isMoved = false;
for(var k = i+1;k<=3;k++){ //向下检查
var curr = cells[k][j]; //现在检查位置的元素
if(curr){ //如果是有数字
if(curr == pre){ //如果数字相等
cells[i][j] = 0; //原来位置置零
cells[k][j] = curr + pre; //检查位置数字相加
isMoved = true;
//TODO 设置分数
setScore(curr);
findCell(k,j).remove();
var cell = findCell(i,j)
.removeClass("row"+i)
.addClass("row"+k)
.text(curr + pre);
setStyle(cell);
}else{ //如果数字不相等
if(!cells[k-1][j]){
isMoved = true;
cells[i][j] = 0; //原来的位置设置成0
cells[k-1][j] = pre; //检查位置设置成pre

cell = findCell(i,j)
.removeClass("row"+i)
.addClass("row"+(k-1));
}
}
return isMoved;
}
}
if(cells[3][j] == 0){
isMoved = true;
}
//前面都是0
cells[i][j] = 0;
cells[3][j] = pre;
var cell = findCell(i,j).removeClass("row"+i)
.addClass("row3");
return isMoved;
}
$(function() {
//初始化界面
init();
//new game按钮效果实现
$("#game-window .option .button").click(function() {
init();
} )
//监听
$(window).on("keydown",function (e) {
var keyCode = e.keyCode;
var keyChar = String.fromCharCode(keyCode)
.toLocaleUpperCase();//转换大写
if(keyChar == "A"||keyCode == 37){
if(leftAction()) {
random_cell();
if(isDead() == true){
alert("game over");
return;
}
}
}else if(keyChar == "W"||keyCode == 38){
if(topAction()) {
random_cell();
if(isDead() == true){
alert("game over");
return;
}
}
}else if(keyChar == "D"||keyCode == 39){
if(rightAction()) {
random_cell();
if(isDead() == true){
alert("game over");
return;
}
}
}else if(keyChar == "S"||keyCode == 40){
if(bottomAction()) {
random_cell();
if(isDead() == true){
alert("game over");
return;
}
}
}
});

})
</script>
</head>
<body>
<header id="game-title">
<h1 class="title">2048</h1>
</header>

<section id="game-window">
<div class="option">
<button class="button">New Game</button>
Scroe:
<span class="score">0</span>
</div>
<div class="game-panel">
<div class="bg-cell row2 col3"></div>
<div class="cell row2 col3">2</div>
</div>

</section>
</body>
</html>

转载于:https://www.cnblogs.com/forri/p/5645784.html

weixin_33994444
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2048. html+css+js实现网页版2048小游戏
07-11
2048. html + js + css实现网页版2048小游戏源码，直接下载运行index.html和2048.html即可。对于熟练练习JS和html以及css有很大帮助
html+css+js实现2048小游戏（PC）
杨家的小胖几的博客
04-03 2766
html+js+css实现PC2048小游戏，代码非原创，来源：源码之家。但是在之前源码的基础上稍作样式修改，效果图如下，大家自行借鉴即可： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2048小游戏</title> &lt...
html+js+css+2048,html+css+js 实现2048
weixin_42510222的博客
06-26 148
2048*{padding:0;margin:0;font-family:Arial;}#game-title .title{text-align: center;font-weight: bolder;font-size: 40px;margin: 6px;}#game-window{width:500px;margin:auto;font-weight:700;}#game-window .o...
html+CSS+js 一个2048小游戏
08-14 216
这几天看js 的教程看到头晕，觉得这种方法不适合我，效率贼低。我还是有已丢丢的java基础，于是想做一个小东西提高自己，印证一下这几个星期的所学。 于是想写一个2048的小游戏。上网看了很多大神的代码，有点思路，最后成功啦！ GitHub连接：https://github.com/514870106/hjc 具体的思路是html方面利用table 创建一个4*4的矩阵，在js中创建...
2048HTML实现代码
10-21
2048代码，用HTML实现的 ...........................................
html+css+javascript 实现小游戏 2048
10-15
《使用HTML+CSS+JavaScript实现2048小游戏详解》 在数字娱乐和教育领域，2048小游戏因其简洁的界面和上瘾的游戏机制，受到了广泛的欢迎。它是一款基于数字合成的智力游戏，玩家通过滑动屏幕使相同数字的方块合并，...
HTML+CSS+JavaScript实现登录注册源码
05-31
HTML、CSS和JavaScript是网页开发的三大核心技术，它们共同构建了网页的结构、样式和交互功能。本资源提供了使用这三种技术实现的登录注册源码，对于初学者或希望提升前端技能的开发者来说，这是一个非常实用的学习...
HTML+CSS+JS 实现跨年祝福效果
12-16
纯HTML+CSS+JS 实现跨年祝福效果，跨年倒计时10秒钟，背景音乐里的声音也是倒数10秒钟，完美切合，鼠标点击产生烟花效果，并且烟花可以改成任意文字。年份根据系统时间自动生成。可自定义后面的happy new year 2022 ...
抽奖转盘 HTML+CSS+JS实现
10-17
HTML+CSS+JS 实现的 通过json 动态生成文本、图片 、转盘概率 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的
html+css+js实现炫酷网页特效
10-02
html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js...
用html做2048
02-06
2048html版！目前虽然有些卡顿，但是挺好玩的，想想还是挺划算的，双击Test_2048.html即可开始2048，加油！！！
html编写2048
10-09
html5编写2048游戏很适合新手阅读，并且做了相应的注释
谈谈2048小游戏怎么用HTML+CSS+JS实现它
前端起步博客
11-25 482
我们在做2048游戏之前先搞清楚游戏的思路在去完成建议先玩玩游戏在去想怎么做 HTML+CSS部分没啥好说的 直接上图； <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>2048</title> ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（四）
weixin_41306215的博客
07-28 1231
4.1游戏循环 大多数游戏采用的是基于时间的游戏循环 这种循环会随着时间的流逝更新游戏数据 根据时间流逝判断游戏是否结束 比如：星际争霸、魔兽争霸 另一类是基于玩家响应的游戏循环 这种游戏循环是基于玩家响应而更新游戏数据 玩家响应后继续判断游戏是否结束 比如：棋类游戏，2048游戏 4.2 基于玩家响应的游戏循环 那么我们怎么接收玩家的操作呢？也就是说，玩家如何控制游戏的进行？ 2048游戏是玩家通过键盘上下左右操作，进而推进游戏的继续，于是，我们需要获取玩家的按键信息 这里，我们需要使用keydown事
使用html+css+JavaScript实现2048
归墟
01-23 1006
2048游戏代码及思路关于游戏关于代码html代码css代码JavaScript代码main.jscontrol.jssupport.jsgamePlay.js写的原因仍然有的缺陷最后，github 关于游戏 《2048》，是一款益智小游戏，这款游戏是由年仅19岁的意大利程序员加布里勒希鲁尼（Gabriele Cirulli）开发出来的，官方版本只能在网页上或通过其移动网站运行。 2048游戏共有...
移动端 监听手指滑动方向
qq_41990338的博客
03-15 346
高产是母猪，这个是转载一位大佬的，但是我忘了是哪位大佬了，发布只为了自己以后方便使用~ // initTouch var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) element.addEventListener(type, handler, false); else if (element.attach
用html、css、js实现2048小游戏
nfzhlk的专栏
11-13 1543
用html、css、js实现2048小游戏 最近在学习H5的相关知识，为了检验下学习效果，尝试着对小游戏2048进行了实现，本来还觉得学的已经不错了，但是真是做的时候真是应了那句话–书到用时方恨少，绝知此事要躬行！
html语言2048代码,javascript实现html网页版的2048游戏源代码
weixin_34229578的博客
05-30 1861
在这里看到了很多有意思的代码。本着分享的精神把自己写的2048的代码也贴出来。当然本人是一个超级菜鸟，有些地方没有完善。欢迎各位大神解决。(界面很丑，不要介意)支持触屏及电脑键盘操作(wasd四个按键) index.html2048table { table-layout: fixed }table tr td{background-color: #D7CE80;border:#666666;fo...
JS与HTML、CSS实现2048小游戏（六）
池子的学习分享
12-15 4325
JS与HTML、CSS实现2048小游戏（六）前篇链接gameover界面优化重新开始——restartgame() 前篇链接 JS与HTML、CSS实现2048小游戏（一） JS与HTML、CSS实现2048小游戏（二） JS与HTML、CSS实现2048小游戏（三） JS与HTML、CSS实现2048小游戏（四） JS与HTML、CSS实现2048小游戏（五） gameover界面优化 在前面...
html + css +javascript 实现思维导图
最新发布
11-25
实现思维导图可以通过HTML，CSS和JavaScript来实现。首先，可以使用HTML来构建思维导图的基本结构，例如使用和标签来表示导图的节点和分支。通过嵌套列表的方式来表示思维导图的层级结构。 接着，可以利用CSS来美化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值