Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve balloon typing games with JavaScript". The editor shows you the operation process through actual cases. The operation method is simple and fast, and it is practical. I hope this article "how to achieve balloon typing games with JavaScript" can help you solve the problem.

First, realize the effect

1. Define the class of the ball

We need to deal with 26 characters in the balloon class.

This.arr = "abcdefghijklmnopqrstuvwxyz" .split ("")

Generate a random letter

This.index = parseInt (Math.random () * this.arr.length); / / define the random character this.str = this.arr [this.index]

Generate a div tag and process the picture

/ / element attribute this.dom = document.createElement ("div"); / / Picture attribute this.img = img;// Picture width this.width = this.img.width / 4Tracer / High this.height of the Picture / this.img.height / 3Tracap / background Positioning Xthis.positionX = parseInt (Math.random () * 4); / / background Positioning Ythis.positionY = parseInt (Math.random () * 3) of the picture

About the processing of styles

/ / set this.setStyle = function () {/ / set element positioning this.dom.style.position = "absolute"; this.dom.style.left = 0ram / set element's internal text this.dom[ XSS _ clean] = this.str;// set text style this.dom.style.lineHeight = this.height * 2 / 3 + "px"; this.dom.style.textAlign = "center"; this.dom.style.fontSize = "20px" This.dom.style.fontWeight = "bold"; this.dom.style.top = parseInt (Math.random () * (document.documentElement.clientHeight-this.height)) + "px"; / / set the width and height of the element this.dom.style.width = this.width + "px"; this.dom.style.height = this.height + "px"; / / set the element background picture this.dom.style.backgroundImage = "url (" + this.img.src + ")" / / set the background positioning of the element this.dom.style.backgroundPositionX =-this.width * this.positionX + "px"; this.dom.style.backgroundPositionY =-this.height * this.positionY + "px";}

Define a method of climbing a tree

/ / Tree method this.upTree = function () {document.body.appendChild (this.dom);}

We need to check whether the balloon reaches the edge of the browser.

/ / check whether the balloon reaches the boundary this.check = function () {/ / determine whether the positioning left value reaches the other boundary if (this.dom.offsetLeft > = document.documentElement.clientWidth-this.width) {/ / set the positioning value this.dom.style.left = document.documentElement.clientWidth-this.width + "px"; return true;} return false;}

Define a method to get down the tree

/ / the lower tree method this.boom = function () {this.do [XSS _ clean] .removeChild (this.dom);}

Define a method of moving, where the numbers represent the speed at which the balloon moves

/ / Mobile method this.move = function () {this.dom.style.left = this.dom.offsetLeft + 5 + "px";}

Define the initialization method and execute

/ / define initialization method this.init = function () {this.setStyle (); this.upTree ();} / execute initthis.init ()

Create picture elements

/ / create the picture element var img = document.createElement ("img"); / / set the path img.src = "images/balloon.jpg"

How often a balloon is generated, we need to set a timer and the processing of the balloon arriving at the boundary, where 70 in the code represents the creation of a balloon for every 70 movements.

/ / define array var arr = []; / / define timer var timer = null;// define a semaphore var count = 0ram / add event img.onload = function () {/ / initialize balloon object var balloon = new Balloon (img); / / the first balloon is also put into the array arr.push (balloon); / / assignment timer timer = setInterval (function () {/ / semaphore + + count++) / / judge semaphore if (count% 70 = 0) {/ / create a balloon arr.push (new Balloon (img)) every 70 times of balloon movement;} / / circulate array for (var I = 0; I)

< arr.length; i++) {// 调用move方法arr[i].move();// 调用check方法var result = arr[i].check();// 判断是否到达别界if (result) {// 说明气球到达边界了// 将气球从数组中移除arr.splice(i, 1);// 防止数组塌陷i--;// 清除并接触边界进行弹窗// clearInterval(this.timer)// alert('游戏结束')}}}, 20) 最后就是我们在气球未触到边缘时，通过键盘清除打出对应的字母 // 给document绑定键盘事件_document.onkeydown = function(e) {// 获取用户按下的字符var key = e.key;// 拿着这个key与数组中每一个气球对象的str属性值作比对，如果比对上了，就让气球从数组中移除并且从dom中移除for (var i = 0; i < arr.length; i++) {// 判断if (key.toLowerCase() === arr[i].str.toLowerCase()) {// 调用boom方法arr[i].boom();// 移除当前项arr.splice(i, 1);break;}}}二、源码仓库和效果 Document // 定义气球类 function Balloon(img) { // 定义携带的字符 this.arr = "abcdefghijklmnopqrstuvwxyz".split(""); // 定义索引 this.index = parseInt(Math.random() * this.arr.length); // 定义随机字符 this.str = this.arr[this.index]; // 元素属性 this.dom = document.createElement("div"); // 图片属性 this.img = img; // 图片的宽 this.width = this.img.width / 4; // 图片的高 this.height = this.img.height / 3; // 图片的背景定位X this.positionX = parseInt(Math.random() * 4); // 图片的背景定位Y this.positionY = parseInt(Math.random() * 3); // 设置样式 this.setStyle = function() { // 设置元素定位 this.dom.style.position = "absolute"; this.dom.style.left = 0; // 设置元素的内部文本 this.dom[xss_clean] = this.str; // 设置文本样式 this.dom.style.lineHeight = this.height * 2 / 3+ "px"; this.dom.style.textAlign = "center"; this.dom.style.fontSize = "20px"; this.dom.style.fontWeight = "bold"; this.dom.style.top = parseInt(Math.random() * (document.documentElement.clientHeight - this.height)) + "px"; // 设置元素的宽度和高度 this.dom.style.width = this.width + "px"; this.dom.style.height = this.height + "px"; // 设置元素背景图片 this.dom.style.backgroundImage = "url(" + this.img.src + ")"; // 设置元素的背景定位 this.dom.style.backgroundPositionX = -this.width * this.positionX + "px"; this.dom.style.backgroundPositionY = -this.height * this.positionY + "px"; } // 上树方法 this.upTree = function() { document.body.appendChild(this.dom); } // 检测气球是否到达边界 this.check = function() { // 判断定位left值值是否到达别界 if (this.dom.offsetLeft >

= document.documentElement.clientWidth-this.width) {/ / set location value this.dom.style.left = document.documentElement.clientWidth-this.width + "px"; return true;} return false } / / the tree method this.boom = function () {this.do [XSS _ clean] .removeChild (this.dom) } / / Mobile method this.move = function () {this.dom.style.left = this.dom.offsetLeft + 5 + "px" } / / define initialization method this.init = function () {this.setStyle (); this.upTree ();} / / execute init this.init () } / / create picture element var img = document.createElement ("img"); / / set path img.src = "images/balloon.jpg"; / / define array var arr = []; / / define timer var timer = null; / / define a semaphore var count = 0 / / add the event img.onload = function () {/ / initialize the balloon object var balloon = new Balloon (img); / / the first balloon is also put into the array arr.push (balloon) / / assignment timer timer = setInterval (function () {/ / semaphore + + count++) / / judge semaphore if (count% 70 = 0) {/ / create a balloon arr.push (new Balloon (img)) for every 70 times of balloon movement } / / cyclic array for (var I = 0; I < arr.length; iTunes +) {/ / call the move method arr [I] .move () / / call the check method var result = arr [I] .check () / / determine whether to reach the other boundary if (result) {/ / indicate that the balloon has reached the boundary / / remove the balloon from the array Arr.splice (I) 1) / / prevent the array from collapsing, iMui- / / clear and contact the boundary for pop-up window / / clearInterval (this.timer) / / alert ('game over')}} 20)} / / bind keyboard event to document _ document.onkeydown = function (e) {/ / get the character var key = e.key pressed by the user / / compare this key with the str attribute value of each balloon object in the array. If it matches, let the balloon be removed from the array and remove for from the dom (var I = 0; I < arr.length). ) {/ / judge if (key.toLowerCase () = arr [I] .str.toLowerCase ()) {/ / call the boom method arr [I] .boom () / / remove the current item arr.splice (I, 1); break;}

Effect:

This is the end of the introduction to "how to achieve Balloon typing Games in JavaScript". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.