实例介绍
【实例简介】
JS 开发网页小游戏，供大家学习参考
【实例截图】
【核心代码】
-
svg, html, body, #app {
- box-sizing: border-box;
- height: 100%;
- width: 100%;
- padding: 0;
- margin: 0;
- overflow: hidden;
} -
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;
}body {- display: block;
- margin: 8px;
}Inherited fromhtml- aLink: ""
- accessKey: ""
- assignedSlot: null
- attributeStyleMap: StylePropertyMap {size: 0}
- attributes: NamedNodeMap {length: 0}
- autocapitalize: ""
- background: ""
- baseURI: "file:///C:/Users/cingular/Downloads/%E5%89%8D%E7%AB%AF/lianxian.html"
- bgColor: ""
- childElementCount: 2
- childNodes: NodeList(5) [text, div#app, text, script, text]
- children: HTMLCollection(2) [div#app, script, app: div#app]
- classList: DOMTokenList [value: ""]
- className: ""
- clientHeight: 610
- clientLeft: 0
- clientTop: 0
- clientWidth: 572
- contentEditable: "inherit"
- dataset: DOMStringMap {}
- dir: ""
- draggable: false
- firstChild: text
- firstElementChild: div#app
- hidden: false
- id: ""
- innerHTML: "↵ <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">Path finder</h1>↵ <p id="launch-screen__description">Find the nearest yellow dot.</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>↵ ↵"
- innerText: "Path finder↵↵Find the nearest yellow dot.↵↵PLAY"
- inputMode: ""
- isConnected: true
- isContentEditable: false
- lang: ""
- lastChild: text
- lastElementChild: script
- link: ""
- localName: "body"
- namespaceURI: "http://www.w3.org/1999/xhtml"
- nextElementSibling: null
- nextSibling: null
- nodeName: "BODY"
- nodeType: 1
- nodeValue: null
- nonce: ""
- offsetHeight: 610
- offsetLeft: 0
- offsetParent: null
- offsetTop: 0
- offsetWidth: 572
- onabort: null
- onafterprint: null
- onauxclick: null
- onbeforecopy: null
- onbeforecut: null
- onbeforepaste: null
- onbeforeprint: null
- onbeforeunload: null
- onblur: null
- oncancel: null
- oncanplay: null
- oncanplaythrough: null
- onchange: null
- onclick: null
- onclose: null
- oncontextmenu: null
- oncopy: null
- oncuechange: null
- oncut: null
- ondblclick: null
- ondrag: null
- ondragend: null
- ondragenter: null
- ondragleave: null
- ondragover: null
- ondragstart: null
- ondrop: null
- ondurationchange: null
- onemptied: null
- onended: null
- onerror: null
- onfocus: null
- onfullscreenchange: null
- onfullscreenerror: null
- ongotpointercapture: null
- onhashchange: null
- oninput: null
- oninvalid: null
- onkeydown: null
- onkeypress: null
- onkeyup: null
- onlanguagechange: null
- onload: null
- onloadeddata: null
- onloadedmetadata: null
- onloadstart: null
- onlostpointercapture: null
- onmessage: null
- onmessageerror: null
- onmousedown: null
- onmouseenter: null
- onmouseleave: null
- onmousemove: null
- onmouseout: null
- onmouseover: null
- onmouseup: null
- onmousewheel: null
- onoffline: null
- ononline: null
- onpagehide: null
- onpageshow: null
- onpaste: null
- onpause: null
- onplay: null
- onplaying: null
- onpointercancel: null
- onpointerdown: null
- onpointerenter: null
- onpointerleave: null
- onpointermove: null
- onpointerout: null
- onpointerover: null
- onpointerup: null
- onpopstate: null
- onprogress: null
- onratechange: null
- onrejectionhandled: null
- onreset: null
- onresize: null
- onscroll: null
- onsearch: null
- onseeked: null
- onseeking: null
- onselect: null
- onselectionchange: null
- onselectstart: null
- onstalled: null
- onstorage: null
- onsubmit: null
- onsuspend: null
- ontimeupdate: null
- ontoggle: null
- onunhandledrejection: null
- onunload: null
- onvolumechange: null
- onwaiting: null
- onwebkitfullscreenchange: null
- onwebkitfullscreenerror: null
- onwheel: null
- outerHTML: "<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">Path finder</h1>↵ <p id="launch-screen__description">Find the nearest yellow dot.</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>"
- outerText: "Path finder↵↵Find the nearest yellow dot.↵↵PLAY"
- ownerDocument: document
- parentElement: html
- parentNode: html
- part: DOMTokenList [value: ""]
- prefix: null
- previousElementSibling: head
- previousSibling: text
- scrollHeight: 610
- scrollLeft: 0
- scrollTop: 0
- scrollWidth: 572
- shadowRoot: null
- slot: ""
- spellcheck: true
- style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
- tabIndex: -1
- tagName: "BODY"
- text: ""
- textContent: "↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ Path finder↵ Find the nearest yellow dot.↵ PLAY↵ ↵ ↵ ↵↵↵ ↵ ////////////////↵// 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"↵);↵↵↵ ↵"
- title: ""
- translate: true
- vLink: ""
- __proto__: HTMLBodyElement
- HTMLBodyElement
- HTMLElement
- Element
- Node
- EventTarget
- Object
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论