html--最短距离小游戏

最新推荐文章于 2024-06-19 10:11:18 发布
最新推荐文章于 2024-06-19 10:11:18 发布
阅读量460 收藏 8
点赞数 5
分类专栏： html 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/138488475
版权 
<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset='utf-8'>
		<style>
		@keyframes jumping {
  0%    {transform:scale(2);}
  100%  {transform:scale(1);}
}

@keyframes dotReveal {
  to  {opacity:1;}
}

@keyframes line {
  0%    {stroke-dashoffset:0}
  100%    {stroke-dashoffset:100%}
}

body {
  cursor:crosshair;
  background-color: black;
  background-image: linear-gradient(to top, rgba(46, 204, 113,0.2) 1%, rgba(255,255,255,0) 0),
                    linear-gradient(to right, rgba(46, 204, 113,0.2) 1%, rgba(255,255,255,0) 0);
  background-size: 50px 50px;
}

svg, html, body, #app  {
  box-sizing: border-box;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
  overflow:hidden;
}

svg {position: relative;z-index:1;}

.dot {
  z-index:10;
  stroke-width:4;
  stroke:black;
  width: 10px;
  height: 10px;
  fill: rgba(241, 196, 15,1.0);
  -moz-transform-origin: center;
  -webkit-transform-origin: center;
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.dot--starting.dot--starting {
  fill:black;
  stroke: rgba(46, 204, 113,1.0);
  stroke-width:3;
  stroke-miterlimit: outside;
}

.dot:not(.dot--starting) {
  opacity:0;
  animation: dotReveal 1s linear;
  animation-fill-mode: forwards;
}

#svg  .dot:hover {
  transform: scale(2);
}

#svg .dot[data-selected=true] {
  opacity:1;
  fill: rgba(46, 204, 113,1.0);
  animation: jumping 0.5s ease-in-out alternate infinite;
  animation-delay:0;
}

#svg  .dot[data-visited=true] {
  fill:rgba(46, 204, 113,1.0);
  animation: jumping 0.5s ease-in-out alternate infinite;
  animation-delay:0;
  opacity:1;
}

.line {
  z-index:10;
  stroke: rgba(46, 204, 113,1.0);
  stroke-width:2;
  stroke-dasharray: 2 16;
  animation: line 10s linear infinite;
}

@media (max-width:480px) { 
  #preline {
    display: none;
  }
}

#score {
  position: fixed;
  z-index:0;
  top: 50%;
  left:50%;
  width: 100%;
  text-align:center;
  transform: translate(-50%, -50%);
  font-size:20em;
  color: rgba(46, 204, 113,0.2);
  font-family: 'Bungee Outline', cursive;
}

.btn {
  background: transparent;
  cursor:pointer;
  color:rgba(241, 196, 15,1.0);
  font-weight:bold;
  padding: 15px 60px;
  border-radius: 6px;
  border: 3px solid rgba(241, 196, 15,1.0);
  transition: all 0.3s ease-out;
}

.btn:hover {
  background: rgba(241, 196, 15,1.0);
  color: black;
}

#btn-start {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

#launch-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  visibility:hidden;
  position: absolute;
  z-index: 10;
  background-image: linear-gradient(45deg, black, rgba(46, 204, 113,0.2));
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity:0;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

#launch-screen.is-visible {
  opacity:1;
  visibility:visible;
}

#launch-screen-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 50px;
  transform: scale(0.8);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}


#launch-screen.is-visible #launch-screen-content {
  transform: scale(1);
}

#launch-screen-content h1 {
  position: relative;
  font-family: 'Bungee Outline', cursive;
  color: rgba(46, 204, 113,1.0);
  font-size: 4em;
  margin: 0 0 0.4em 0;
}


#launch-screen-content p {
  font-family: 'Space Mono', monospace;
  color:#ccc;
  font-size: 1em;
  margin: 0 0 3em 0;
}

#lastScore {display:none;}
#lastScore.is-visible {display:block;}

#lastScore__number {color:rgba(231, 76, 60,1.0);}

		</style>
	</head>
	<body>
	<div id="app">
  <div id="score"></div>
  <svg id="svg"></svg>
  
  <div id="launch-screen" class="is-visible">
    
    <div id="launch-screen-content">
      <h1 id="launch-screen__title"></h1>
      <p id="launch-screen__description"></p>
      <button class="btn" id="start-btn">PLAY</button>
    </div>
  </div>
  
</div>
<script type="text/javascript">
	
	
// helpers


function getDistance(obj1, obj2) {
  return Math.floor(
    Math.sqrt(Math.pow(obj1.cx - obj2.cx, 2) + Math.pow(obj1.cy - obj2.cy, 2))
  );
}

function getRandomArbitrary(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function comparator(a, b) {
  if (a[1] < b[1]) return -1;
  if (a[1] > b[1]) return 1;
  return 0;
}

function difference(source, toRemove) {
  return source.filter(function(value) {
    return toRemove.indexOf(value) == -1;
  });
}


// global vars


var svg = document.getElementById("svg");
var dotMatrix = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "circle"
);
var lineMatrix = document.createElementNS("http://www.w3.org/2000/svg", "line");
var screenW = window.innerWidth;
var screenH = window.innerHeight;
var totalDist = document.getElementById("distance");


// line constructor


function Line(x1, y1, x2, y2) {
  this.x1 = x1;
  this.y1 = y1;
  this.x2 = x2;
  this.y2 = y2;
  this.el = document.createElementNS("http://www.w3.org/2000/svg", "line");
  this.class = "line";
  this.update = function(x1, y1, x2, y2) {
    this.el.setAttribute("x1", x1 || this.x1);
    this.el.setAttribute("y1", y1 || this.y1);
    this.el.setAttribute("x2", x2 || this.x2);
    this.el.setAttribute("y2", y2 || this.y2);
    this.setAttr("class", this.class);
  };
  this.setAttr = function(attr, value) {
    this.el.setAttribute(attr, value);
  };
  this.append = function() {
    svg.insertBefore(this.el, svg.firstChild);
  };
}


// dot constructor


function Dot(r, cx, cy) {
  this.r = r;
  this.cx = cx;
  this.cy = cy;
  this.el = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  this.class = "dot";
  this.update = function() {
    this.el.setAttribute("r", this.r);
    this.el.setAttribute("cx", this.cx);
    this.el.setAttribute("cy", this.cy);
    this.setAttr("class", this.class);
  };

  // activates a dot
  this.activate = function() {
    for (i = 0; i < dots.num; i++) {
      dots.list[i].setAttr("data-selected", "false");
    }
    this.setAttr("data-selected", "true");
  };

  this.visited = function() {
    this.setAttr("data-visited", "true");
  };

  // sets attribute to element
  this.setAttr = function(attr, value) {
    this.el.setAttribute(attr, value);
  };

  // gets attribute to element
  this.getAttr = function(attr) {
    return this.el.getAttribute(attr);
  };

  // appends element to svg and attaches event listeners
  this.append = function() {
    svg.appendChild(this.el);
    this.el.addEventListener("click", this.onClick);
  };

  // on click on element
  this.onClick = function(event) {
    //gets the id and the coords of the dot
    var thisId = Number(event.target.getAttribute("data-id").substr(3, 2));
    var thisCx = dots.list[thisId].cx;
    var thisCy = dots.list[thisId].cy;

    // calculates the distance between dots
    var distances = [];
    for (i = 0; i < dots.num; i++) {
      distances[i] = [i, getDistance(dots.selected, dots.list[i])];
    }
    distances.sort(comparator);
    distances.splice(0, 1);
    var distancesLeft = [];
    for (i = 0; i < distances.length; i++) {
      if (dots.left.includes(distances[i][0])) {
        distancesLeft.push(distances[i][0]);
      }
    }

    //if the element is the nearest
    if (thisId == distancesLeft[0] && dots.left.includes(thisId)) {
      // calculates distances
      var newDistance = getDistance(dots.list[thisId], dots.selected);

      app.score.update(1); // punteggio x numero di poi
      // app.score.update(newDistance); punteggio x distanza

      //sets the active class to the selected dot
      dots.list[thisId].activate();
      dots.list[thisId].visited();

      // creates the line
      lines.list.push(
        new Line(
          dots.selected.cx,
          dots.selected.cy,
          dots.list[thisId].cx,
          dots.list[thisId].cy
        )
      );
      lines.list[lines.list.length - 1].update();
      lines.list[lines.list.length - 1].append();

      // creates the preview line
      //TODO: eliminare le vecchie preline che rimangono vive

      svg.addEventListener("mousemove", function prelineMove(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
        app.preline.update(thisCx, thisCy, mouseX, mouseY);
      });

      //saves the selected dots coordinates
      dots.selected.id = thisId;
      dots.selected.cx = thisCx;
      dots.selected.cy = thisCy;

      //removes the dot from the list of remaining dots
      for (i = 0; i < dots.left.length; i++) {
        if (dots.left[i] === thisId) {
          dots.left.splice(i, 1);
        }
      }

      if (dots.left.length == 0) {
        app.end(true);
      }
    } else {
      app.end(false);
    }
  };
}


// lines group


var lines = {
  list: []
};


// dots group


var dots = {};
dots.num = 20;
dots.list = [];
dots.start = 0;
dots.selected = {};
dots.selected.id = dots.start;
dots.left = [];
dots.preline;


// app


var app = {};

app.level = 4;

app.score = {};
app.score.number = 0;
app.score.el = document.getElementById("score");
app.score.update = function(score) {
  app.score.number += score;
  app.score.el.textContent = app.score.number;
};

app.score.reset = function() {
  app.score.number = 0;
  app.score.update(0);
};

app.results = function(points) {
  if (points == "reset") {
    sessionStorage.setItem("results", 0);
  } else {
    if (!sessionStorage.getItem("results")) {
      sessionStorage.setItem("results", points);
    } else {
      var newscore = parseInt(sessionStorage.getItem("results")) + points;
      sessionStorage.setItem("results", newscore);
    }
  }
};

app.launchScreen = function(lastScore, title, description, btnText) {
  app.launchScreen.el = document.getElementById("launch-screen");
  app.launchScreen.el.setAttribute("class", "is-visible");

  var launchScreenTitle = document.getElementById("launch-screen__title");
  launchScreenTitle.textContent = title;

  var launchScreenDescription = document.getElementById(
    "launch-screen__description"
  );
  launchScreenDescription.textContent = description;

  app.launchScreen.btn = document.getElementById("start-btn");
  app.launchScreen.btn.textContent = btnText;

  app.launchScreen.btn.addEventListener("click", function lauch() {
    app.launchScreen.el.setAttribute("class", "");
    app.start(app.level);
    app.launchScreen.btn.removeEventListener("click", lauch);
  });
};

app.preline = new Line(0, 0, 200, 200);
app.preline.setAttr("id", "preline");

app.start = function(dotsNum) {
  dots.num = dotsNum;

  for (i = 0; i < dots.num; i++) {
    var cx = getRandomArbitrary(10, screenW - 10);
    var cy = getRandomArbitrary(10, screenH - 10);

    dots.list[i] = new Dot(8, cx, cy);
    dots.list[i].setAttr("data-id", "id-" + i);
    dots.list[i].setAttr(
      "style", 
      "animation-delay:" + i / 10 + "s; transform-origin: " + cx + 'px ' + cy + 'px;');
    dots.list[i].update();
    dots.list[i].append();
    dots.left.push(i);

    if (i == dots.start) {
      dots.selected.cx = dots.list[dots.start].cx;
      dots.selected.cy = dots.list[dots.start].cy;
      dots.list[dots.start].setAttr("class", "dot dot--starting");
      dots.left.splice(i, 1);
    }

    // adds the preline

    app.preline.update(
      dots.selected.cx,
      dots.selected.cy,
      dots.selected.cx,
      dots.selected.cy
    );
    app.preline.append();

    svg.addEventListener("mousemove", function prelineMove(e) {
      mouseX = e.pageX;
      mouseY = e.pageY;
      app.preline.update(dots.selected.cx, dots.selected.cy, mouseX, mouseY);
    });
  }

  // sets starting point
  dots.list[dots.start].setAttr("data-selected", "true");
};

app.end = function(win) {
  if (win) {
    app.level += 4;
    app.results(app.score.number);
  } else {
    app.level = 4;
  }

  dots.list = [];
  dots.selected = {};
  dots.left.length = 0;
  svg.innerHTML = "";

  if (win) {
    app.launchScreen(
      app.score.number,
      "Well done!",
      "Your score is: " + sessionStorage.getItem("results") + ' The next level will be harder.',
      "PLAY NEXT LEVEL"
    );
  } else {
    app.launchScreen(
      0,
      "Game over!",
      "Your final score is: " + sessionStorage.getItem("results"),
      "PLAY AGAIN"
    );
    app.results("reset");
    app.score.reset();
  }
};

app.launchScreen(
  0,
  "Path finder",
  "Find the nearest yellow dot.",
  "PLAY"
);

</script>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ASP.NET站点配置以及VS2008下C#、JavaScript联合调试(Ajax) ----以最短路径Dijstra最短路问题为例
「 刘一哥与GIS的故事」
12-10 381
实验任务描述： 1 用VS2008构造ASP.NET站点开发环境； 2 用ASP.NET完成JavaScript开发调试； 3 用Ext3.0.0完成一个简单的树显示站; 4 WebService程序设计，Dijstra最短路Web 服务； 5 JavaScript通过Ajax技术调用WebService; 一、Windows下WEB共享设置 打开你的WINDOWS，鼠标点开“我的电脑”，寻找下你机器的WINDOWS版本信息，如果你的WINDOWS是家庭版(Home)，那么就直接格式化你的系统、并寻找一
7-2 最短购物距离.cpp
03-12
7-2 最短购物距离.cpp
HTML-CSS
zundujia的博客
06-15 55
增强型表单：HTML5 提供了一些新的表单元素和属性，如 <input type="email">、<input type="url">、<input type="date"> 等，以及一些新的表单属性和方法，如 required、placeholder、pattern 等，使表单的验证和交互更加方便和强大。语义标签：HTML5 引入了一些新的语义化标签，如 <header>、<footer>、<nav>、<article>、<section> 等，使页面结构更加清晰明了，提高了可读性和可访问性。
儿童节html5小游戏,2016六一儿童节主题班会小游戏大全
weixin_39630466的博客
05-31 267
2016六一儿童节主题班会小游戏大全导语：儿童是国家的未来，是民族的希望，给所有儿童创造良好的家庭、社会和学习环境，让他们健康、快乐、幸福地成长，一直是世界各国努力的目标，一年一度的“六一国际儿童节”就是专门为儿童们设立的节日。一、贴鼻子在纸上画一个人头，游戏者蒙上双眼，原地转五圈，而后让游戏者走向指定的位置，把“鼻子”贴到人头上，贴中者得奖。二、夹珠在一个大桶内装满水，再往桶中放入较多得玻璃珠。...
HTML5小游戏笑说米,活跃气氛的70个小游戏 带动气氛的小游戏
weixin_33250594的博客
06-01 440
集体活动最怕的就是冷场，活动之前准备一些活跃气氛的游戏可以让整个氛围变得好很多。下文有途网小编给大家整理了一些能够带动气氛的小游戏，供参考！带动气氛暖场小游戏娱乐呼啦圈(4人)规则：两男两女 (AB之间距离为20米)甲从A点原地转十圈出发然后跑到B点，拿起呼啦圈转1圈，然后放下呼啦圈，急速跑回A点，接着乙从A点出发，类同甲，然后丙，然后丁，时间最短一组为冠军。奖励形式：时间最短者胜出。第一9分，第...
生日游戏html,小朋友过生日室内游戏
weixin_39990819的博客
05-31 349
小朋友过生日室内游戏(一)：1、顶气球，两人拿一根绳隔开，两边各一组，一组两人，准备一个气球，两边的人用脑袋顶，不许用手，不能掉地，不能碰绳，不能出界，否则算对方赢。2、击鼓传花，一人敲一个东西，使其有声响，声响中，多人传一个东西，直到声响停止，传到谁那谁表演节目。3、贴鼻子，一人蒙眼去贴，同伴提示，贴好为止。4、抢玩具，四人都在跳的皮筋里，每人面前的一段距离都有一个玩具，一声令下，四人拼命往前跑...
城市之间的最短总距离（最小生成树算法）
weixin_30455661的博客
05-16 674
求解城市之间的最短总距离是一个非常实际的问题，其大意如下： 某地区由n个城市，如何选择一条路线使各个城市之间的总距离最短？ 1.最短总距离算法 先来分析一下上述问题。某个地区的n个城市构成一个交通图，可以使用图结构来描述此问题，其对应关系如下： 每个城市代表图中的一个顶点。 两个顶点间的边即两个城市之间的路径，边的权值代表了城市间的距离。 这样，求解各个城市之间的最短总距离问题...
POJ 1661 Help Jimmy（动态规划--最短下降模板）
风的记忆
07-29 309
"Help Jimmy" 是在下图所示的场景上完成的游戏。 场景中包括多个长度和高度各不相同的平台。地面是最低的平台，高度为零，长度无限。 Jimmy老鼠在时刻0从高于所有平台的某处开始下落，它的下落速度始终为1米/秒。当Jimmy落到某个平台上时，游戏者选择让它向左还是向右跑，它跑动的速度也是1米/秒。当Jimmy跑到平台的边缘时，开始继续下落。Jimmy每次下落的高度不能超过MAX米，不然就会摔死，游戏也会结束。 设计一个程序，计算Jimmy到底地面时可能的最早时间。
使用 HTML 5 Canvas 和 Raycasting 创建伪 3D 游戏
weixin_46596227的博客
11-14 1252
随着最近浏览器性能的提高，除了像 Tic-Tac-Toe 这样的简单游戏之外，用 JavaScript 实现游戏变得更加容易。我们不再需要使用 Flash 来制作炫酷的效果，而且随着 HTML5 Canvas 元素的出现，创建外观漂亮的网页游戏和动态图形比以往任何时候都更容易。一段时间以来，我想实现的一款游戏或游戏引擎是一种伪 3D 引擎，例如 iD Software 在旧的德军总部 3D 游戏中使用的引擎。
JS五彩连珠小游戏(Canvas绘制)
路漫漫其修远兮，吾将上下而求索。
12-02 2008
学习javaScript，当然少不了开发一些有趣的小游戏。 既可以更加熟练操作JS语法，又可以锻炼逻辑思维能力。 今天带给大家的是一款用JS+canvas开发的“五彩连珠小游戏”。相信不用我介绍，大家都知道游戏规则 了吧。
OSPF-开放式最短路径优先
01-05
OSPF 的工作机制是基于链路状态算法，不同于距离矢量路由协议。OSPF 路由器之间首先会建立一个协议的邻居关系，然后彼此之间开始交互 LSA（Link State Advertisement，链路状态通告），LSA 描述了路由器接口的状态...
matlab代码cox-Shortest-path-distance-MPLCP:最短路径距离
05-23
Matlab代码考克斯最短路径距离 该存储库包含用于生成以下论文第4部分中显示的结果的matlab脚本：VV Chetlur，HS Dhillon和CP Dettmann，“ Manhattan Poisson line Cox process中最短的路径距离”，2020，可在线获取...
CJ2-13-最短路径进阶.pdf
02-18
CJ2-13-最短路径进阶.pdf
cpp代码-弗洛伊德求最短路径
07-14
cpp代码-弗洛伊德求最短路径
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
weixin_42283461的博客
06-14 408
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
超文本标记语言（HTML）简介
一起coding，一起嗨。
06-15 521
超文本标记语言（HTML）简介
HTML(9)——字体修饰
最新发布
m0_74386799的博客
06-19 464
如果一组当中两个数是一样的，可以简写为一位数：例如#00ffcc简写为#0fc。font-family属性值可以书写多个字体名用逗号隔开，依次从左到右查找。单行文字想要垂直居中时，可以设置行高属性值与盒子高度属性值一致。想让图片居中，可以给图片加一个父级标签例如<div>设置居中。属性的简写方式，一个属性对应多个值的写法，各个属性值之间用。测量方法：从一行文字的最顶端到下一行文字的最顶端。属性名：text-decoration。属性名：text-indent。属性名：text-align。
HTML静态网页成品作业(HTML+CSS)——中华传统美德介绍网页(2个页面)
weixin_42283461的博客
06-17 457
HTML静态网页成品作业(HTML+CSS)——中华传统美德介绍网页(2个页面)
启发式搜索 - 扫地机器人最短路径搜索
03-16
启发式搜索是一种基于估价函数的搜索算法，可以在...例如，可以使用曼哈顿距离作为估价函数，来估计当前位置到目标位置的距离，从而优先搜索距离目标更近的路径。这样可以减少搜索的时间和空间复杂度，提高搜索效率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值