html+css+js 实现2048

<!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>

时间： 2024-08-06 16:01:09

html+css+js 实现2048的相关文章

使用JS实现2048小游戏

JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name=&

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件

有网友碰到过这样的问题:如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件,问题详细内容为: 如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件 ? ,我搜你通过互联网收集了相关的一些解决方案,希望对有过相同或者相似问题的网友提供帮助,具体如下: 解决方案1: /.*\.(?:(?!(jpg|css|js|html|htm|png)).)+/ --- 共有 3 条评论 --- 皮总find . -ty

WordPress引入css/js方法总结

WordPress引入css/js方法很多,条件很多.如何全局加载,或仅在某些页面精准加载,什么时候需要先注册脚本再加载,本文希望找到最简单的方式,并给出探索更多方法的途径. 在前台加载css/js 用wp_enqueue_script()函数加载js,用wp_enqueue_style()加载css,加载资源的位置(action)只有一个——wp_enqueue_scripts. 用wp_enqueue_系列函数可以更好的处理脚本样式表的依赖关系,防止重复加载,以twentyfifteen主题

asp.net MVC发布iis无法加载css,js和图片

今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual studio运行的时候就已经不能加载css和js文件,那种情况一般都是路径的问题,改下页面代码就行,网上教程不少,而这个其实是一个CMS的开源系统.Orchard,国庆实在无聊,就想玩下这个asp.net MVC框架的CMS,而且是微软推荐的开源CMS,提到了就来说说这个吧,和国内的其他CMS对比起来

springMvc整合Freemarker引入CSS,JS文件404的问题

在spring webmvcjar包中有个spring.ftl的文件 如下图: 你可以把他拷出来,放到你的目录下,也可以不拷出来,具体的用法就是 在你的freemaker模版开头加上 <#import "spring.ftl" as spring/> 如果你烤出了spring.ftl文件,像找存在感的话,比如拷到 当前项目路径的plugins文件下 那么就加上这个路径就好了<#import "plugins/spring.ftl" as sprin

nginx访问css js 图片等静态资源，报404或无法定向访问到

配置完nginx,把php的项目放上去后,发现css,js和图片全部访问不到,一直重定向到根目录执行index.php,郁闷的在网上查了半天,原来不同后缀名的文件访问时都要在nginx.conf中声明规则,如下, location ~* .(jpg|gif|png|js|css)$ { root E:\Project\PHP\mobao; if (-f $request_filename) { expires max; break; } } 在location ~ \.php$前面加上上面这段规

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

Django使用本地css/js文件

在网上看了很多说Django如何使用本地css/js的文章, 但都不能用 今天终于找到一个可以用的, 记录下 在manager.py同层级下创建static文件夹, 里面放上css , js, image等文件或者文件夹 我的文件夹层级 然后很简单,只需在settings.py中进行设置就行, 在末尾添加以下代码 STATIC_URL = '/static/' HERE = os.path.dirname(os.path.abspath(__file__)) HERE = os.path.joi