消方块小游戏

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量1.3k 收藏
点赞数
分类专栏： html5 文章标签： html

体验地址：

http://www.renyugang.cn/html/h5/

http://www.renyugang.cn/html/h5/oop/

效果图：

 

代码：

[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>H5 Game</title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  6.     <meta http-equiv="Cache-control" content="no-cache"/>  
  7.     <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,user-scalable=no"/>  
  8.     <meta name="oupengmobile" content="game,fullscreen,lockrotation,portrait"/>  
  9.     <meta name="tencent-x5-page-direction" content="portrait">  
  10.     <meta name="apple-mobile-web-app-capable" content="yes">  
  11.     <meta name="apple-mobile-web-app-status-bar-style" content="white">  
  12.     <meta name="HandheldFriendly" content="true"/>  
  13.     <META HTTP-EQUIV="pragma" CONTENT="no-cache">  
  14.     <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">  
  15.     <META HTTP-EQUIV="expires" CONTENT="0">  
  16. <link href="css/main.css" rel="stylesheet" type="text/css" />  
  17. <script type="text/javascript" src="js/base.js?v1"></script>  
  18. <script type="text/javascript" src="js/utils.js?v1"></script>  
  19. <script type="text/javascript" src="js/map.js?v3"></script>  
  20. <script type="text/javascript" src="js/game.js?v1"></script>  
  21. <style type="text/css">  
  22. </style>  
  23. </head>  
  24. <body>  
  25. <div id="gamezone">  
  26. <div id="title" style="width:480px;height:25px;background-color:transparent;">  
  27. <span id="timeRemain">剩余时间：120s</span>  
  28.             
  29.           
  30. <span id="score">得分：0</span>  
  31. </div><br/>  
  32. </div>  
  33. <script type="text/javascript">  
  34.     Base.Game.init();  
  35. </script>  
  36. </body>  
  37. </html>  
[css] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. html, body  
  2. {  
  3.     margin:0px;  
  4.     padding:5px;  
  5.     line-height:10px;  
  6. }  
  7.   
  8. @-webkit-keyframes myfirst  
  9. {  
  10. from{top:20px,left:23px}  
  11. to {top:420px,left:23px}  
  12. }  
  13.   
  14. .animation  
  15. {  
  16. -webkit-animation:myfirst 5s linear;  
  17. }  
  18.   
  19. #gamezone   
  20. {   
  21.     padding-top:10px;  
  22.     padding-left:23px;  
  23.     padding-right:23px;  
  24.     width:425px;  
  25.     height:420px;  
  26.     margin:0 auto;  
  27.     background-color:white;  
  28.     background-image:url("../images/bg.png");  
  29.     background-repeat:no-repeat;  
  30.     text-align:left;  
  31. }  
  32.   
  33. #gamezone div,.div_-2  
  34. {  
  35.     background-color:#ffffff;  
  36.     width:25px;  
  37.     height:25px;  
  38.     padding:0px;  
  39.     display:inline-block;  
  40.     letter-spacing:1px;  
  41.       
  42.     /* only for ie*/  
  43.     *display:inline;  
  44.     zoom:1;  
  45.       
  46.     border:0px solid #ffffff;  
  47.     border-radius:5px;  
  48.     -moz-border-radius:5px; /* Old Firefox */  
  49. }  
  50. #title  
  51. {  
  52.     width:425px;  
  53.     height:150px;  
  54.     padding:0px;  
  55.     display:block;  
  56. }  
  57. .color_-1  
  58. {  
  59. /*background-color:rgb(210,210,210);*/  
  60. opacity:0;  
  61. }  
  62. .color_0  
  63. {  
  64. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(204,204,104)))  
  65. }  
  66. .color_1  
  67. {  
  68. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(0,100,255)))  
  69. }  
  70. .color_2  
  71. {  
  72. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(110,206,206)))  
  73. }  
  74. .color_3  
  75. {  
  76. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(204,101,204)))  
  77. }  
  78. .color_4  
  79. {  
  80. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(204,101,0)))  
  81. }  
  82. .color_5  
  83. {  
  84. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(187,187,187)))  
  85. }  
  86. .color_6  
  87. {  
  88. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(0,202,0)))  
  89. }  
  90. .color_7  
  91. {  
  92. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(255,101,101)))  
  93. }  
  94. .color_8  
  95. {  
  96. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(255,135,255)))  
  97. }  
  98. .color_9  
  99. {  
  100. background: -webkit-gradient(linear, 0% 0%, 10% 50%, from(#fff), to(rgb(255,152,0)))  
  101. }  
[javascript] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * base.js 全局数据定义 
  3.  */  
  4. var gameMode = {  
  5.     level:2,  
  6.     time:120,  
  7.     score:5,  
  8.     seriesScore:1.5  
  9. }  
  10. var gameChunkColor = [];  
  11. var gameMapArr = [];  
  12. var gameScore = 0;  
  13. var gameOver = false;  
  14. var timeRemain = gameMode.time;  
  15. //base  
  16. var Base = {}  
  17. //timer  
  18. var timer = setInterval("interval()", 1000);  
  19. function interval()  
  20. {  
  21.     timeRemain--;  
  22.     $$("timeRemain").innerHTML = ("剩余时间：" + timeRemain + "s");  
  23.     if(timeRemain <= 0)  
  24.     {  
  25.         clearInterval(timer);  
  26.         timeRemain = gameMode.time;  
  27.         gameOver = true;  
  28.         alert('游戏结束，得分：' + gameScore);  
  29.     }  
  30. }  
  31. function hasClass(obj, cls)  
  32.  {  
  33.     return !!(obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')));  
  34.  }  
  35.   
  36. function removeClass(obj, cls)  
  37. {  
  38.     if (hasClass(obj, cls)) {  
  39.         var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
  40.         obj.className = obj.className.replace(reg, '');  
  41.     }  
  42. }  
  43.   
  44. function addClass(obj, cls)  
  45. {  
  46.     if (!hasClass(obj, cls))   
  47.     {  
  48.         obj.className += (" " + cls);  
  49.     }  
  50. }  
  51.   
  52. function $query(selector, e)  
  53. {  
  54.     e = e || document;  
  55.     return e.querySelector(selector);  
  56. }  
  57.   
  58. function $$(id)  
  59. {  
  60.     return document.getElementById(id);  
  61. }  
[javascript] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * game.js 游戏类 
  3.  */  
  4. (function() {  
  5.   
  6.     var Game = {}  
  7.       
  8.     Game.init = function()  
  9.     {  
  10.         var myGameMap = new Base.GameMap();  
  11.         myGameMap._initData();  
  12.         myGameMap._create(Game.clickCallBack);  
  13.         this.myGameMap = myGameMap;  
  14.     }  
  15.       
  16.     Game.searchBlock =function(i, j)  
  17.     {  
  18.         var left = -1;   
  19.         var right = -1;   
  20.         var top = -1;   
  21.         var bottom = -1;  
  22.         var leftColor, rightColor, topColor, bottomColor;  
  23.           
  24.         for(var k = j-1; k >= 0; k--)// search left  
  25.         {  
  26.             var color = gameMapArr[i][k]  
  27.             if(color != "-1")  
  28.             {  
  29.                 left = k;  
  30.                 leftColor = color;  
  31.                 break;  
  32.             }  
  33.         }  
  34.           
  35.         for(var k = j+1; k < this.myGameMap._c; k++)// search right  
  36.         {  
  37.             var color = gameMapArr[i][k]  
  38.             if(color != "-1")  
  39.             {  
  40.                 right = k;  
  41.                 rightColor = color;  
  42.                 break;  
  43.             }  
  44.         }  
  45.           
  46.         for(var k = i-1; k >= 0; k--)// search top  
  47.         {  
  48.             var color = gameMapArr[k][j]  
  49.             if(color != "-1")  
  50.             {  
  51.                 top = k;  
  52.                 topColor = color;  
  53.                 break;  
  54.             }  
  55.         }  
  56.           
  57.         for(var k = i+1; k < this.myGameMap._r; k++)// search bottom  
  58.         {  
  59.             var color = gameMapArr[k][j]  
  60.             if(color != "-1")  
  61.             {  
  62.                 bottom = k;  
  63.                 bottomColor = color;  
  64.                 break;  
  65.             }  
  66.         }  
  67.           
  68.         var leftBlock = $$("block_" + i + "_" + left);  
  69.         var rightBlock = $$("block_" + i + "_" + right);  
  70.         var topBlock = $$("block_" + top + "_" + j);  
  71.         var bottomBlock = $$("block_" + bottom + "_" + j);  
  72.   
  73.         var colors = new Array();  
  74.         colors.push(leftColor);  
  75.         colors.push(rightColor);  
  76.         colors.push(topColor);  
  77.         colors.push(bottomColor);  
  78.           
  79.         var blocks = new Array();  
  80.         blocks.push(leftBlock);  
  81.         blocks.push(rightBlock);  
  82.         blocks.push(topBlock);  
  83.         blocks.push(bottomBlock);  
  84.         //remove  
  85.         Base.Utils.removeBlocks(blocks, colors);  
  86.     }  
  87.       
  88.     Game.clickCallBack = function(target)  
  89.     {  
  90.         if(hasClass(target, "color_-1") == false || gameOver)  
  91.         return;  
  92.         var id = target.id;  
  93.         var array = id.split("_");   
  94.         var i = array[1];  
  95.         var j = array[2];  
  96.         Game.searchBlock(Number(i) , Number(j));  
  97.     }  
  98.       
  99.     /** 
  100.      * destory 
  101.      */  
  102.     Game.destory = function()   
  103.     {  
  104.     }  
  105.       
  106.     Base.Game = Game;  
  107.       
  108. })();  
[javascript] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * map.js 
  3.  */  
  4. (function(){  
  5. /** 
  6.  *定义map 
  7.  */  
  8. var GameMap = function(){}  
  9.   
  10.     /** 
  11.      * 创建一个map 需要根据游戏的配置 
  12.      * @private 
  13.      */  
  14.     GameMap.prototype._create = function(callback)  
  15.     {  
  16.         if(!this._r || !this._c || !this._d)  
  17.         {  
  18.             this._initData();  
  19.         }  
  20.         var gamezone = $$("gamezone");  
  21.         for(var i = 0; i < this._r; i++)  
  22.         {  
  23.             //初始化列  
  24.             gameMapArr[i] = [];  
  25.             for(var j = 0; j < this._c; j++)  
  26.             {  
  27.                 var _div=document.createElement("div");  // 以 DOM 创建新元素  
  28.                 var num = Math.floor((Math.random() * 16));  
  29.                 _div.id = "block_" + i + "_" + j;             
  30.                 if(num >= 10)  
  31.                 {     
  32.                     num = -1;  
  33.                 }  
  34.                 _div.className = "color_" + num;  
  35.                 document.getElementById('gamezone').appendChild(_div);  
  36.                 gameMapArr[i][j] = "" + num;  
  37.                 // _div.onclick = callback;  
  38.                 _div.addEventListener('click',function(e)  
  39.                 {  
  40.                     callback(e.currentTarget);  
  41.                 });  
  42.             }  
  43.         }  
  44.           
  45.           
  46.     }  
  47.   
  48.     /** 
  49.      * 更新map 
  50.      * @private 
  51.      */  
  52.     GameMap.prototype._update = function()  
  53.     {  
  54.   
  55.     }  
  56.   
  57.     /** 
  58.      * 删除和销毁已有的map 
  59.      * @private 
  60.      */  
  61.     GameMap.prototype._destroy = function()  
  62.     {  
  63.   
  64.     }  
  65.   
  66.     GameMap.prototype._initData = function()  
  67.     {  
  68.         //定义_r行_c列  
  69.         this._r = [0,10,15,100,110,150][gameMode.level];  
  70.         this._c = [0,10,17,100,110,150][gameMode.level];  
  71.         //定义出现的方块种类数  
  72.         this._d = [0,3,5,8,10,12][gameMode.level];  
  73.         //定义空方块出现的区间  
  74.         this._z = [0,3,4,5,6,7,8][gameMode.level]   
  75.     }  
  76.       
  77.     Base.GameMap = GameMap;  
  78. })();  
[javascript] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * utils.js 实用类 
  3.  */  
  4. (function() {  
  5.     var Utils = {}  
  6.       
  7.     Utils._findDuplicateCount = function(colors, color)  
  8.     {  
  9.         var count = 0;  
  10.         color = color || "-1";  
  11.         if(color == "-1")//click region  
  12.             return count;  
  13.         for(var k = 0; k < colors.length; k++)  
  14.         {  
  15.             if(color == colors[k])  
  16.                 count++;  
  17.         }  
  18.         return count;  
  19.     }  
  20.   
  21.     Utils._doAnimation = function(block, blockColor, direction)  
  22.     {  
  23.         var div=document.createElement("div");  
  24.         div.className = "div_-2 color_" + blockColor;  
  25.         var oRect = block.getBoundingClientRect();     
  26.         var x=oRect.left     
  27.         var y=oRect.top    
  28.         div.cssText = "display:block;position:absolute;left:"   
  29.         + x + "px;top:" + y + "px;width:300px;background-color:black";  
  30.           
  31.         $query("body").appendChild(div);   
  32.   
  33.         addClass(div, "animation");  
  34.         /* 
  35.         if(direction == "left") 
  36.         { 
  37.             $div.animate( 
  38.             {top:"420px",left:"23px"}, "normal", "swing",  
  39.             function(){$div.css("display", "none");$div.remove();} 
  40.             ); 
  41.              
  42.         } 
  43.         else 
  44.         { 
  45.             $div.animate( 
  46.             {top:"420px",left:"420px"}, "normal", "swing",  
  47.             function(){$div.css("display", "none");$div.remove();} 
  48.             );       
  49.         }*/  
  50.     }  
  51.       
  52.     Utils.removeBlocks = function(blocks, colors)  
  53.     {  
  54.         var count = 0;  
  55.         var colorArr = new Array();  
  56.         var size = colors.length;  
  57.         console.log("colors[0]=" + colors[0]);  
  58.         console.log("colors[1]=" + colors[1]);  
  59.         console.log("colors[2]=" + colors[2]);  
  60.         console.log("colors[3]=" + colors[3]);  
  61.         for(var i=0; i< size; i++)  
  62.         {  
  63.             count = this._findDuplicateCount(colors, colors[i]);  
  64.             if(count >= 2)  
  65.             {  
  66.                 var block = blocks[i];  
  67.                 var duplicateColor = colors[i];  
  68.                 block.style.opacity = 0;  
  69.                 removeClass(block, "color_" + duplicateColor);  
  70.                 addClass(block, "color_-1");  
  71.                   
  72.                 var id = block.id;  
  73.                 var array = id.split("_");   
  74.                 //重置array中的颜色记录  
  75.                 gameMapArr[array[1]][array[2]] = "-1";  
  76.                 this._doAnimation(block, duplicateColor, i%2==0 ? "right" : "left");  
  77.                 gameScore++;  
  78.                 $$("score").innerHTML = ("得分：" + gameScore);  
  79.             }  
  80.         }  
  81.         return colorArr;  
  82.     }  
  83.       
  84.     Base.Utils = Utils;  
  85.       
  86. })();  



转自：http://blog.csdn.net/singwhatiwanna/article/details/25163021

__承_影__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript的俄罗斯方块小游戏
07-28
JavaScript的俄罗斯方块小游戏是一个利用JavaScript编程语言实现的经典游戏，旨在提供一种有趣、互动的娱乐方式，同时也为学习JavaScript的开发者提供了很好的实践项目。在这个游戏中，玩家需要控制各种形状的方块...
c++小游戏 俄罗斯方块 贪吃蛇
01-29
"C++小游戏"通常指的是使用C++编程语言开发的小型游戏，这类游戏通常代码量适中，适合初学者进行学习和实践，同时也能够展示C++语言的基本特性和面向对象编程的概念。 "俄罗斯方块"是一款经典的电子游戏，由苏联...
（小游戏）详解消方块：微信小程序开发
认真和努力总没有错
03-08 2198
大家好！我又来了。今天我又写了一个超级无聊的小游戏 在无聊的道路上，渐行渐远。还记得儿时我们喜欢玩的这个游戏吗？ 由于我申请的小程序不是小游戏，所以无法体验； 于是我又写成H5页面：http://www.yating.online/brick.html 喜欢就给我点个星吧：https://github.com/Chenyating/easyGame 一、简单介绍： 简单的介绍一...
简单JS消除类游戏
lbx541575387的专栏
11-11 3043
转自http://www.cnblogs.com/luojianqun/p/4087247.html 消灭方块 #content{width:580px;height:620px;margin:0px auto;border:none;position:relative;background:#0b1a7f;} #top{width:100%;he
简易js贪吃蛇
yzsn_wjc的博客
09-08 299
简易贪吃蛇 步骤 先创建一个盒子，即蛇活动的范围及食物产生的范食物围 封装一个随机产生食物的函数 先创建一个蛇头，用键盘来控制移动方向 吃到食物，食物重新生成一个随机的位置，蛇的身体加1 设定判断条件 代码展示 1. html代码 <p>吃到食物： 0 个</p> <div class="wrap"> ...
html前端基础
淡若清风
01-05 448
mysql 8.0（oracle）把驱动包路径改了， 8.0 之前。com.mysql.jdbc.Driver 8.0 之后。com.mysql.cj.jdbc.Driver 核心代码也改，在数据库后面增加参数 时区：否则日期计算偏差，8小时 新驱动会自动提示你需要加这个参数 ?serverTimezone=Asia/Shanghai String driver = "com.mysql.cj.jdbc.Driver"; //访问本机的mysql数据库，端口3307，数据库名
JavaScript实现经典消方块游戏
星云
08-20 1519
在游戏区域中任意位置滑动手势，点击屏幕下方的按钮，键盘WASD和↑←↓→都可以操作。初始化游戏区域啥都没有，每种方块面积都是4个方格，如果水平一行充满方块那么这一行就被整体消去，否则方块堆积越来越高直到超过一个阈值使游戏结束。每消一行加一分，同时游戏速度提高10ms。整个游戏就一个文件，浏览器打开。颜色好看。用了es6的语法，浏览器不能太老。
小游戏之俄罗斯方块
PlutoZML的博客
03-24 602
俄罗斯方块起源于拼图游戏，后来发展出了很多玩法，其中最为经典的包含了七种方块，L字型、J型、Z字型、S型、T字型、I型、O字形，游戏中需要把方块旋转，堆叠等进行消除获取分数，随着分数增加，难度也会增加。
C语言小游戏-俄罗斯方块
热门推荐
weixin_43474701的博客
07-26 1万+
C语言小游戏-俄罗斯方块 全部代码如下所示： #include <easyx.h> #include <conio.h> #include <time.h> ///////////////////////////////////////////// // 定义常量、枚举量、结构体、全局变量 ///////////////////////////////////////////// #define WIDTH 10 // 游戏区宽度 #define HEIGHT
消方块游戏源码
12-30
"消方块游戏源码"是一个基于C语言开发的小型游戏项目，其核心亮点在于它使用了ege图形库来创建美观的用户界面。在这个游戏中，玩家的目标可能是消除屏幕上排列的方块，通过匹配或消除特定组合来得分，类似于经典的...
windows api写的消方块小游戏（带源码）
02-18
本篇文章将深入探讨一款由Windows API编写的消方块小游戏，通过源代码分析，我们可以了解到游戏开发的基本原理以及Windows API在其中的应用。 首先，Windows API（Application Programming Interface）是微软为...
俄罗斯方块小游戏java改写
07-03
《Java实现俄罗斯方块小游戏详解》 在编程学习的道路上，通过实现经典游戏来加深对编程语言的理解是一种常见的方法。本项目是基于Java语言改写的俄罗斯方块小游戏，旨在帮助初学者更好地掌握Java编程基础，同时体验...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1089
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 998
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 398
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 244
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 771
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
html&css基础
antyuki的博客
07-09 737
/
c语言反弹球消方块游戏
09-03
要开发一个C语言反弹球消方块游戏，您可以按照以下步骤进行： 1. 首先，您需要选择一个适合的图形库，如SDL或SFML，来实现游戏界面和交互功能。 2. 创建游戏窗口，并设置游戏界面的大小和标题。 3. 初始化游戏...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值