html5 游戏公告的内容,分享一个自己做的游戏公告功能,跑马灯效果

2024-03-15 00:20

本文主要是介绍html5 游戏公告的内容,分享一个自己做的游戏公告功能,跑马灯效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

aa252c00c8f81a32054f7eef546084ff.png

import View = Laya.View

import Image = Laya.Image

import HTMLDivElement = Laya.HTMLDivElement

import Sprite = Laya.Sprite

import Box = Laya.Box

/** 公告栏 */

export default class Notice extends View {

/** 滚动区域 */

hornBox: Box

/** html对象 */

html: HTMLDivElement

/** 滚动框的宽度 */

defaultX = 1110

/** 动画是否出于播放状态 */

isPlayIng:boolean = false

/** 空格 */

private space:string = "                          "

constructor() {

super()

this.width = 1200

this.height = 55

this.visible = false

this.pos(565,150)

this._createHorn()

this._createBg()

this._createView()

this.on(Laya.Event.UNDISPLAY,this,this.stop)

this.on(Laya.Event.DISPLAY,this,this.play)

}

/** 创建滚动区域 */

_createView() {

this.hornBox = new Box()

let _rectangle = new Laya.Rectangle(0,0,this.defaultX,55)

this.hornBox.scrollRect = _rectangle

this.hornBox.height = 55

this.hornBox.pos(70,0)

this.hornBox.zOrder = 3

this.html = new HTMLDivElement()

this.html.x = this.defaultX

this.html.contextHeight = 55

this.html.contextWidth = 1180

this.html.style.fontSize = 34

this.html.style.wordWrap = false

this.html.style.lineHeight = 55

this.html.style.align = "left"

this.html.style.color = "#fff"

this.html.innerHTML = ""

this.hornBox.addChild(this.html)

this.addChild(this.hornBox)

}

/** 滚动动画 */

private _animate(e: Event): void {

const _w = this.html.width

const _x = this.html.x

if (_x < -_w) {

this.stop(true)

} else {

this.html.x -= 2

}

}

/** 添加节点 */

addItem(html:string) {

if (typeof html === "undefined") {return }

this.html.appendHTML(`${this.space}${html}`)

if (this.isPlayIng === false) {

this.play()

this.isPlayIng = true

}

}

/** 开始动画 */

play() {

if (this.isPlayIng === true) {

return

}

const _w = this.html.width

const _x = this.html.x

if (_w === 0) {

return

}

if (_x < -_w) {

return

}

this.visible = true

this.frameLoop(1, this, this._animate)

}

/** 停止播放 */

stop(type?:boolean) {

this.isPlayIng = false

this.visible = false

this.clearTimer(this,this._animate)

if (type === true) {

this.html.x = this.defaultX

this.html.innerHTML = ""

}

}

/** 创建背景 */

_createBg() {

let bg = new Image()

bg.skin = 'common/bg.png'

bg.pos(20,0)

bg.width = 1180

bg.height = 55

bg.sizeGrid = "2,2,2,2"

bg.alpha = 0.7

bg.zOrder = 1

this.addChild(bg)

}

/** 创建喇叭 */

_createHorn(){

let horn = new Image()

horn.zOrder = 2

horn.loadImage('common/horn.png',-12,-12)

this.addChild(horn)

}

}

这篇关于html5 游戏公告的内容,分享一个自己做的游戏公告功能,跑马灯效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/810183

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML