滑木块H5小游戏

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量501 收藏 1
点赞数 9
分类专栏： H5小游戏 文章标签： javascript 前端 开发语言 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16659821/article/details/135872175
版权

欢迎来到程序小院

滑木块

玩法：点击木块横着的只能左右移动，竖着的只能上下移动，
移动到箭头的位置即过关，不同关卡不同的木块摆放，快去滑木块吧^^。

开始游戏icon-default.png?t=N7T8https://www.ormcc.com/play/gameStart/260

html

<canvas id="c2canvas" width="384" height="600"></canvas>

css

* {
  padding: 0;
  margin: 0;
}
body {
  background: #fff;
  color: #fff;
  overflow: hidden;
  -ms-touch-action: none;
}
canvas {
  touch-action-delay: none;
  touch-action: none;
  -ms-touch-action: none;
}

js

var sg_texts = {
  'en' : {
      'MORE GAMES' : '',
      'SLIDE GREEN BLOCK TO START': 'SLIDE GREEN BLOCK TO START',
      'MOVE:': 'MOVE:',
      'LEVEL:' : 'LEVEL:',
      'BEST:' : 'BEST:',
      'TIME:' : 'TIME:'
  },
  'es' : {
      'MORE GAMES' : 'MAS JUEGOS',
      'SLIDE GREEN BLOCK TO START' : 'DESLIZA EL BLOQUE VERDE PARA EMPEZAR',
      'MOVE:': 'MOVER:',
      'LEVEL:' : 'NIVEL:',
      'BEST:' : 'MEJOR:',
      'TIME:' : 'TIEMPO:'
  }
};
var cr = {};
cr.plugins_ = {};
cr.behaviors = {};
// SG.detectPortalUrl();

if (typeof Object.getPrototypeOf !== "function")
{
 if (typeof "test".__proto__ === "object")
 {
  Object.getPrototypeOf = function(object) {
   return object.__proto__;
  };
 }
 else
 {
  Object.getPrototypeOf = function(object) {
   return object.constructor.prototype;
  };
 }
}
(function(){
 cr.logexport = function (msg)
 {
  if (window.console && window.console.log)
   window.console.log(msg);
 };
 cr.seal = function(x)
 {
  return x;
 };
 cr.freeze = function(x)
 {
  return x;
 };
 cr.is_undefined = function (x)
 {
  return typeof x === "undefined";
 };
 cr.is_number = function (x)
 {
  return typeof x === "number";
 };
 cr.is_string = function (x)
 {
  return typeof x === "string";
 };
 cr.isPOT = function (x)
 {
  return x > 0 && ((x - 1) & x) === 0;
 };
 cr.nextHighestPowerOfTwo = function(x) {
  --x;
  for (var i = 1; i < 32; i <<= 1) {
   x = x | x >> i;
  }
  return x + 1;
 }
 cr.abs = function (x)
 {
  return (x < 0 ? -x : x);
 };
 cr.max = function (a, b)
 {
  return (a > b ? a : b);
 };
 cr.min = function (a, b)
 {
  return (a < b ? a : b);
 };
 cr.PI = Math.PI;
 cr.round = function (x)
 {
  return (x + 0.5) | 0;
 };
 cr.floor = function (x)
 {
  if (x >= 0)
   return x | 0;
  else
   return (x | 0) - 1;  // correctly round down when negative
 };
 cr.ceil = function (x)
 {
  var f = x | 0;
  return (f === x ? f : f + 1);
 };
 function Vector2(x, y)
 {
  this.x = x;
  this.y = y;
  cr.seal(this);
 };
 Vector2.prototype.offset = function (px, py)
 {
  this.x += px;
  this.y += py;
  return this;
 };
 Vector2.prototype.mul = function (px, py)
 {
  this.x *= px;
  this.y *= py;
  return this;
 };
 cr.vector2 = Vector2;
 cr.segments_intersect = function(a1x, a1y, a2x, a2y, b1x, b1y, b2x, b2y)
 {
  var max_ax, min_ax, max_ay, min_ay, max_bx, min_bx, max_by, min_by;
  if (a1x < a2x)
  {
   min_ax = a1x;
   max_ax = a2x;
  }
  else
  {
   min_ax = a2x;
   max_ax = a1x;
  }
  if (b1x < b2x)
  {
   min_bx = b1x;
   max_bx = b2x;
  }
  else
  {
   min_bx = b2x;
   max_bx = b1x;
  }
  if (max_ax < min_bx || min_ax > max_bx)
   return false;
  if (a1y < a2y)
  {
   min_ay = a1y;
   max_ay = a2y;
  }
  else
  {
   min_ay = a2y;
   max_ay = a1y;
  }
  if (b1y < b2y)
  {
   min_by = b1y;
   max_by = b2y;
  }
  else
  {
   min_by = b2y;
   max_by = b1y;
  }
  if (max_ay < min_by || min_ay > max_by)
   return false;
  var dpx = b1x - a1x + b2x - a2x;
  var dpy = b1y - a1y + b2y - a2y;
  var qax = a2x - a1x;
  var qay = a2y - a1y;
  var qbx = b2x - b1x;
  var qby = b2y - b1y;
  var d = cr.abs(qay * qbx - qby * qax);
  var la = qbx * dpy - qby * dpx;
  if (cr.abs(la) > d)
   return false;
  var lb = qax * dpy - qay * dpx;
  return cr.abs(lb) <= d;
 };
 function Rect(left, top, right, bottom)
 {
  this.set(left, top, right, bottom);
  cr.seal(this);
 };
 Rect.prototype.set = function (left, top, right, bottom)
 {
  this.left = left;
  this.top = top;
  this.right = right;
  this.bottom = bottom;
 };
 Rect.prototype.copy = function (r)
 {
  this.left = r.left;
  this.top = r.top;
  this.right = r.right;
  this.bottom = r.bottom;
 };
 Rect.prototype.width = function ()
 {
  return this.right - this.left;
 };
 Rect.prototype.height = function ()
 {
  return this.bottom - this.top;
 };
 Rect.prototype.offset = function (px, py)
 {
  this.left += px;
  this.top += py;
  this.right += px;
  this.bottom += py;
  return this;
 };
 Rect.prototype.normalize = function ()
 {
  var temp = 0;
  if (this.left > this.right)
  {
   temp = this.left;
   this.left = this.right;
   this.right = temp;
  }
  if (this.top > this.bottom)
  {
   temp = this.top;
   this.top = this.bottom;
   this.bottom = temp;
  }
 };
 Rect.prototype.intersects_rect = function (rc)
 {
  return !(rc.right < this.left || rc.bottom < this.top || rc.left > this.right || 
    rc.top > this.bottom);
 };
 Rect.prototype.intersects_rect_off = function (rc, ox, oy)
 {
  return !(rc.right + ox < this.left || rc.bottom + oy < this.top || rc.left + ox > 
    this.right || rc.top + oy > this.bottom);
 };
 Rect.prototype.contains_pt = function (x, y)
 {
  return (x >= this.left && x <= this.right) && (y >= this.top && y <= this.bottom);
 };
 Rect.prototype.equals = function (r)
 {
  return this.left === r.left && this.top === r.top && this.right === r.right && 
    this.bottom === r.bottom;
 };
 cr.rect = Rect;
 function Quad()
 {
  this.tlx = 0;
  this.tly = 0;
  this.trx = 0;
  this.try_ = 0; // is a keyword otherwise!
  this.brx = 0;
  this.bry = 0;
  this.blx = 0;
  this.bly = 0;
  cr.seal(this);
 };
 Quad.prototype.set_from_rect = function (rc)
 {
  this.tlx = rc.left;
  this.tly = rc.top;
  this.trx = rc.right;
  this.try_ = rc.top;
  this.brx = rc.right;
  this.bry = rc.bottom;
  this.blx = rc.left;
  this.bly = rc.bottom;
 };
 Quad.prototype.set_from_rotated_rect = function (rc, a)
 {
  if (a === 0)
  {
   this.set_from_rect(rc);
  }
  else
  {
   var sin_a = Math.sin(a);
   var cos_a = Math.cos(a);
   var left_sin_a = rc.left * sin_a;
   var top_sin_a = rc.top * sin_a;
   var right_sin_a = rc.right * sin_a;
   var bottom_sin_a = rc.bottom * sin_a;
   var left_cos_a = rc.left * cos_a;
   var top_cos_a = rc.top * cos_a;
   var right_cos_a = rc.right * cos_a;
   var bottom_cos_a = rc.bottom * cos_a;
   this.tlx = left_cos_a - top_sin_a;
   this.tly = top_cos_a + left_sin_a;
   this.trx = right_cos_a - top_sin_a;
   this.try_ = top_cos_a + right_sin_a;
   this.brx = right_cos_a - bottom_sin_a;
   this.bry = bottom_cos_a + right_sin_a;
   this.blx = left_cos_a - bottom_sin_a;
   this.bly = bottom_cos_a + left_sin_a;
  }
 };
 Quad.prototype.offset = function (px, py)
 {
  this.tlx += px;
  this.tly += py;
  this.trx += px;
  this.try_ += py;
  this.brx += px;
  this.bry += py;
  this.blx += px;
  this.bly += py;
  return this;
 };
 var minresult = 0;
 var maxresult = 0;
 function minmax4(a, b, c, d)
 {
  if (a < b)
  {
   if (c < d)
   {
    if (a < c)
     minresult = a;
    else
     minresult = c;
    if (b > d)
     maxresult = b;
    else
     maxresult = d;
   }
   else
   {
    if (a < d)
     minresult = a;
    else
     minresult = d;
    if (b > c)
     maxresult = b;
    else
     maxresult = c;
   }
  }
  else
  {
   if (c < d)
   {
    if (b < c)
     minresult = b;
    else
     minresult = c;
    if (a > d)
     maxresult = a;
    else
     maxresult = d;
   }
   else
   {
    if (b < d)
     minresult = b;
    else
     minresult = d;
    if (a > c)
     maxresult = a;
    else
     maxresult = c;
   }
  }
 };
 Quad.prototype.bounding_box = function (rc)
 {
  minmax4(this.tlx, this.trx, this.brx, this.blx);
  rc.left = minresult;
  rc.right = maxresult;
  minmax4(this.tly, this.try_, this.bry, this.bly);
  rc.top = minresult;
  rc.bottom = maxresult;
 };
 Quad.prototype.contains_pt = function (x, y)
 {
  var v0x = this.trx - this.tlx;
  var v0y = this.try_ - this.tly;
  var v1x = this.brx - this.tlx;
  var v1y = this.bry - this.tly;
  var v2x = x - this.tlx;
  var v2y = y - this.tly;
  var dot00 = v0x * v0x + v0y * v0y
  var dot01 = v0x * v1x + v0y * v1y
  var dot02 = v0x * v2x + v0y * v2y
  var dot11 = v1x * v1x + v1y * v1y
  var dot12 = v1x * v2x + v1y * v2y
  var invDenom = 1.0 / (dot00 * dot11 - dot01 * dot01);
  var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
  var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
  if ((u >= 0.0) && (v > 0.0) && (u + v < 1))
   return true;
  v0x = this.blx - this.tlx;
  v0y = this.bly - this.tly;
  var dot00 = v0x * v0x + v0y * v0y
  var dot01 = v0x * v1x + v0y * v1y
  var dot02 = v0x * v2x + v0y * v2y
  invDenom = 1.0 / (dot00 * dot11 - dot01 * dot01);
  u = (dot11 * dot02 - dot01 * dot12) * invDenom;
  v = (dot00 * dot12 - dot01 * dot02) * invDenom;
  return (u >= 0.0) && (v > 0.0) && (u + v < 1);
 };
 Quad.prototype.at = function (i, xory)
 {
  if (xory)
  {
   switch (i)
   {
    case 0: return this.tlx;
    case 1: return this.trx;
    case 2: return this.brx;
    case 3: return this.blx;
    case 4: return this.tlx;
    default: return this.tlx;
   }
  }
  else
  {
   switch (i)
   {
    case 0: return this.tly;
    case 1: return this.try_;
    case 2: return this.bry;
    case 3: return this.bly;
    case 4: return this.tly;
    default: return this.tly;
   }
  }
 };
 Quad.prototype.midX = function ()
 {
  return (this.tlx + this.trx  + this.brx + this.blx) / 4;
 };
 Quad.prototype.midY = function ()
 {
  return (this.tly + this.try_ + this.bry + this.bly) / 4;
 };
 Quad.prototype.intersects_segment = function (x1, y1, x2, y2)
 {
  if (this.contains_pt(x1, y1) || this.contains_pt(x2, y2))
   return true;
  var a1x, a1y, a2x, a2y;
  var i;
  for (i = 0; i < 4; i++)
  {
   a1x = this.at(i, true);
   a1y = this.at(i, false);
   a2x = this.at(i + 1, true);
   a2y = this.at(i + 1, false);
   if (cr.segments_intersect(x1, y1, x2, y2, a1x, a1y, a2x, a2y))
    return true;
  }
  return false;
 };
 Quad.prototype.intersects_quad = function (rhs)
 {
  var midx = rhs.midX();
  var midy = rhs.midY();
  if (this.contains_pt(midx, midy))
   return true;
  midx = this.midX();
  midy = this.midY();
  if (rhs.contains_pt(midx, midy))
   return true;
  var a1x, a1y, a2x, a2y, b1x, b1y, b2x, b2y;
  var i, j;
  for (i = 0; i < 4; i++)
  {
   for (j = 0; j < 4; j++)
   {
    a1x = this.at(i, true);
    a1y = this.at(i, false);
    a2x = this.at(i + 1, true);
    a2y = this.at(i + 1, false);
    b1x = rhs.at(j, true);
    b1y = rhs.at(j, false);
    b2x = rhs.at(j + 1, true);
    b2y = rhs.at(j + 1, false);
    if (cr.segments_intersect(a1x, a1y, a2x, a2y, b1x, b1y, b2x, b2y))
     return true;
   }
  }
  return false;
 };

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/

程序小院
关注
  • 9
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Creator模块介绍—领略模块化的力量
奎特尔星球
08-14 915
从Cocos2d-js到Creator，一直以来都有模块裁剪的能力，可以将游戏中没有用到的功能代码，在编译输时移除，从而减少包体大小，这对H5游戏来说影响比较明显。Creator比Cocos2d-js做的更好，通过主菜单-&gt;项目设置-&gt;模块设置有一个图形化的界面，可以方便模块配置。 下面简单说一下各模块的功能和作用，以及对应的组件。 一、模块配置 在Creator的模块设...
原生JS DOM
m0_46424423的博客
08-30 276
DOM 1.DOM操作演示 Document Object Model 插件emmet学习 DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合(不能修改CSS样式表，可以改变行间样式，即通过改变html间接修改css)。也有人称DOM是对HTML以及XML的标准编程接口。 demo案例 项目1：实现点击一下发生变化 var div = document.getElementsByTagNam
这么多的h5小游戏，你知道哪一类才适合自己的品牌吗？
卖小姑娘的小火柴
09-18 248
随着智能手机的不断发展，手游变成了大家休闲娱乐项目，例如Tom游戏、金豆游戏等h5小游戏凭借着不断的创新受人们喜欢，H5游戏营销成为了商家品牌竞争的筹码。如此多的游戏，怎么选择才适合自己的H5小游戏品牌呢？ TOM H5小游戏有多种类型的游戏，可以满足商家们的需求。比如兔子快跑、欢乐捕鱼、疯狂盖高楼等。 今天用疯狂盖高楼这个h5小游戏，帮助你活跃用户，达到转化裂变的目的。 第一：疯狂盖高楼游戏，将游戏性提升到了新高度，比传统叠罗汉游戏的难度更具挑战性，引起用户的兴趣 第二：在公众号金豆微游戏或在Tom网找到
html5游戏 搭积木,搭积木游戏
weixin_36350547的博客
06-10 385
视觉空间智能的培养，除了经由手眼协调的平面涂鸦之外，透过搭积木的过程，也能让儿童从小学习如何操作大小不同形式的积木，同时培养其对艺术、科学和数学的初步了解，以及空间设计、建筑形构的基础。 仔细观察许多儿童所创作出的积木模型，其实正是反映了他们所观察到的真实生活的实际结构；透过...搭积木正文：搭积木山东省泰安市 山东石横发电厂子弟小学 一年级 赵志鹏星期六下午，写完作业后，同学来到我家，我们玩起了...
Verilog实现快递柜
不定期更新系统使用、编程小技巧，哔哩哔哩账号：https://space.bilibili.com/399455629，欢迎关注
12-18 2087
FPGA这东西就是个玄学。这个实验做了这么久，不想让它被遗忘，在此做一下记录，让它变得有价值起来。 Verilog实现快递柜 —— 实验六记录 实验描述 实验分析 打开vivado 新建工程 新建三个design文件，采用如下命名方式 添加约束文件 烧上FPGA板子吧 express.v `timescale 1ns / 1ps ///////////////////////...
微信上瘾小程序“跳一跳”撞脸　谁侵权谁尴尬
中国财经
01-03 4014
元旦刚过，不少网友惊呼：“‘跳一跳’毁了我的新年小长假！” 　　这是微信在元旦前夕推出的H5小游戏。作为一款微信小程序，它操作方便，很容易上手。 /*文章页正文*/ var cpro_id = "u2719811"; 　　玩法也非常简单：按压手机屏幕，小橡皮人就会从这个积木块，跳到前方的桌子或纸箱上。只有保持按压时间恰到好处，小橡皮人才不会摔倒，连续不断地跳下去。 　　简单，却
前端面试题（各种基础）
jontyy的博客
03-29 2141
HTML Doctype的作用，标准模式和混杂模式有什么区别 < ! D o c t y p e>声明位于HTML文档的第一行，出在html标签的前面，告诉浏览器的解析器用什么文档标准解析这个文档，当不存在或者格式错误的时候会采用兼容模式来加载这个网页 标准模式的排版和js运作模式都是以改浏览器支持的最高标准运行，在兼容模式中，页面以一种宽松的向后兼容的方式显示，模拟老师浏览器的...
Scratch编程入门
热门推荐
m0_67401660的博客
04-22 1万+
Scratch编程入门 Scratch是麻省理工学院的“终身幼儿园团队”（Lifelong Kindergarten Group）开发的图形化编程工具，免费。2019年1月2日正式发布, Scratch3.0。 Scratch把计算机执行的指令、逻辑变成了小朋友能看明白的“积木”，利用它可轻松地创建自己的互动故事、动画、游戏、教学工具和科学模拟实验等。 **Scratch编程与其他代码编程的主要区别：**编程书写方式不同。Scratch是可视化图形编程语言，使用者可以不认识英文单词，也可以不会使用键盘。其构
SNS社交系统“ThinkSNS V4.6”活动应用功能详解及应用场景举例
weixin_33928137的博客
07-24 180
2019独角兽企业重金招聘Python工程师标准>>> ...
H5小游戏源码 滑木块.zip
10-14
游戏源码 欢迎下载
H5小游戏：眼疾手快
10-23
游戏玩法：点击屏幕，通过眼力跟反应速度使得物体到合适位置，从而进行下一关 源码存放环境：LINUX 6.X + Nginx 环境
H5小游戏：电锯切割狂
10-16
游戏玩法：这是一款益智游戏，用电锯将木块切成等分的碎片， 源码存放环境：LINUX 6.X + Nginx 环境
小游戏源码-滑木块.rar
09-16
小游戏源码-滑木块.rar
Qt+opengl3D滑动积木块游戏
05-18
使用QT5.10+opengl进行三维场景绘制、漫游。运用显示列表绘制木块，采用人工智能A*算法进行木块滑动（自带萌萌的音效），需要从外部导入项目。
【redis】Spring之RedisTemplate配置与使用
05-30 331
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1200
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 523
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
verilog编写木块移动小游戏
01-04
Verilog编程语言是一种硬件描述语言，通常用于数字电路设计和电子系统的仿真和验证。要编写一个木块移动小游戏，我们可以使用Verilog来描述游戏的逻辑和控制。游戏的基本元素包括木块的移动、碰撞检测、分数记录等。 首先，我们需要定义游戏中的元素，比如木块的位置、速度、方向等。然后，我们使用Verilog编写逻辑来控制木块的移动，以及检测与其他元素的碰撞。我们可以设计一些状态机来表示游戏的不同状态，比如开始、暂停、游戏进行中等。在Verilog中，可以使用if语句、case语句等来实现这些逻辑。 此外，我们还可以使用Verilog来实现游戏的显示和交互功能。比如，可以编写代码来控制LED灯或数码管显示木块的位置和分数，也可以使用按钮来控制木块的移动方向。 总的来说，要用Verilog编写木块移动小游戏，我们首先需要设计游戏的逻辑和控制，然后使用Verilog语言来实现这些逻辑。通过Verilog的硬件描述能力，我们可以实现一个简单但功能完整的木块移动小游戏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值