金榜提名前端小游戏教程（含冒泡，canvas烟花特效,适配pc,手机）内含源码

一年一次的高考是人生的第一个重要转折点，如果能重来一起进入时光机，高考前一天小编随便做了一个测一测命中注定大学的小小游戏。（vue前端小游戏，canvas动画）

效果图

源代码

1、html代码

<template> <div class="eatbody" style="min-height:100vh"> <canvas id="fireworks" ></canvas> <div id="wrapper" style="position: absolute;z-index: 9;"> <img id="jbtm" src="@/static/tool/icon_jbtm.png" /> <h1> &nbsp; <b style="color:#ff9900" id="what"></b> </h1> <input type="button" style="z-index:999" value="测一测" id="start"> <input type="button" value="测一测" id="stop" style="display: none;"> <br> <br> <span id="zfgl" style="width: 120px;height: 40px;vertical-align: middle cursor: pointer; color:#0097ff;">&nbsp;</span> </div> <div class="wh_tfooter"> 本工具由 <a href="http://hereitis.cn" style="color:#ff9900;" target="_blank">hereitis.cn</a> 开发  | 公众号：在这里资源站 | 仅供舒压娱乐 </div> <textarea rows="9" cols="53" id="list" style="display:none">
清华大学 北京大学 厦门大学 中国科学技术大学 南京大学  复旦大学 天津大学 哈尔滨工业大学 南开大学 西安交通大学 华中科技大学 东南大学 武汉大学 上海交通大学 中国海洋大学 山东大学 湖南大学 中国人民大学 北京理工大学 吉林大学 重庆大学 电子科技大学 大连理工大学 四川大学 中山大学 华南理工大学 北京航空航天大学 兰州大学 东北大学 西北工业大学 北京师范大学 同济大学 中南大学 中国农业大学 国防科技大学 西北农林科技大学 华东师范大学 中央民族大学 北京交通大学 北京工业大学 北京航空航天大学 北京科技大学 北京化工大学 北京邮电大学 中国农业大学 北京林业大学 中国传媒大学 中央民族大学 北京师范大学 中央音乐学院 对外经济贸易大学 北京中医药大学 北京外国语大学 中国石油大学 中国政法大学 中央财经大学 华北电力大学 北京体育大学 中国地质大学 高考是啥？直接保送清华北大 上海交通大学 华东师范大学 上海外国语大学 东华大学 上海财经大学 同济大学 华东理工大学 上海大学 天津大学 天津医科大学 西南大学 河北工业大学 太原理工大学 内蒙古大学 大连理工大学 东北大学 辽宁大学 大连海事大学 东北师范大学 延边大学 哈尔滨工业大学 海尔滨工程大学 东北农业大学 东北林业大学 南京大学 苏州大学 南京师范大学 中国矿业大学 中国医科大学 河海大学 南京航空航天大学 江南大学 南京农业大学 南京理工大学 浙江大学 中国科学技术大学 安徽大学 合肥工业大学 福州大学 南昌大学 中国石油大学 郑州大学 华中科技大学 中国地质大学 武汉理工大学 华中师范大学 华中农业大学 中南财经政法大学 中南大学 湖南师范大学 华南师范大学 暨南大学 华南理工大学 中山大学 广西大学 四川大学 西南交通大学 电子科技大学 四川农业大学 西南财经大学 云南大学 贵州大学 西北大学 西北交通大学 西北工业大学 西安电子科技大学 长安大学 西北农林科技大学 陕西师范大学 兰州大学 新疆大学 石河子大学 第二军医大学 第四军医大学 国防科技大学 青海大学 宁夏大学 海南大学 西藏大学 </textarea> </div> </template>//css
<style>
body { position: relative; overflow: hidden !important; margin: 0; padding: 0; width: 100%; height: 100%; background: #051731; font-family: "微软雅黑";
} .eatbody { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; background:#051731; font-family: "微软雅黑";
}
#wrapper { position: absolute; top: 35%; left: 50%; margin-top: -60px; margin-left: -250px; width: 500px; height: 120px; text-align: center;
} #jbtm { margin: 0 0 20px; padding: 0; height: 127px; width: 380px;
} #wrapper h1 { margin: 0 0 20px; padding: 0; font-weight: 300; font-size: 30px;
} #wrapper h1 b{ font-weight: 700;
} #start { width: 120px; height: 40px; vertical-align: middle; font-family: "微软雅黑"; cursor: pointer; color: #00fff6; font-size: 18px; border: 1px solid #00fff6; background: none;
} #stop { display:none; width: 120px; height: 40px; vertical-align: middle; font-family: "微软雅黑"; cursor: pointer; color: #00fff6; font-size: 18px;
} .wh_tfooter { position: fixed; left: 0; bottom: 0; width:100%; height: 18px; font-size: 12px; padding: 30px 0px; color: #fff; text-align: center;
}
</style>

2、冒泡特效，canvas烟火特效查看方式：

关注公.众.号:《在这里资源站》回复 “金榜题名” 获取全部源码

技术交QQ群：585671966

金榜提名前端小游戏教程（含冒泡，canvas烟花特效,适配pc,手机）内含源码相关推荐

HTML实现怀旧小游戏，超级玛丽、飞机大战…等十余款【完整源码分享】
HTML怀旧小游戏介绍超级玛丽.飞机大战.赛车.俄罗斯方块.飞翔的鸟.王校长热狗飞机大战.植物大战僵尸.冒险岛.塔块游戏.五子棋.贪吃蛇怀旧小游戏,简单HTML实现,可下载修改代码调整难度,增加 ...
Pygame实战：升级后的2048小游戏—解锁新花样，根本停不下来【附源码】
导语 "嗨嗨嗨!别睡了,醒醒醒醒!该干活儿了~" by--顾木子吖! "刚睡醒,大佬你有什么事儿吖?" by--全体成员! 上期给大家分享的超详细--简易版本的 ...
【Python游戏】Python实现一个植物大战僵尸小游戏，非常简单，可以用于做毕业设计哟 | 附源码
前言 halo,包子们上午好今天给打击整一个植物大战僵尸无广告版本哈哈说实话,现在的小游戏很多都是有广告,多少有点难受今天给大家直接安排相关文件关注小编,私信小编领取哟! 当然别忘了一件 ...
HTML小游戏15 —— 网页版3D反恐英雄（附完整源码）
H5小游戏1—— 是男人就下一百层（附完整源码）
前端技术搭建飞机大战小游戏（内含源码）
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 功能介绍 ✨ 页面搭建 ✨ 样式设置 ✨ 逻辑部分 ✨ 写在前面上周我们实通过前端基础实现了弹珠游戏,当 ...
表白小游戏教程：制作一个小游戏送给喜欢的TA（不会编程也能学会哦）
大家好哇~ 欢迎翻开波波和阿菌的长篇故事~ 不过捏,今天我们不讲故事,今天将由阿菌和大家分享一个小教程:教大家制作一个小游戏,可以用来送给喜欢的人.无须任何计算机专业基础,只要能操作电脑,并在初一的数 ...
Python版儿童识字游戏源代码，结合植物大战僵尸和儿童识字的小游戏，含学习模式和娱乐模式
Python版儿童识字游戏源代码,结合植物大战僵尸和儿童识字的小游戏,含学习模式和娱乐模式. 娱乐模式下,僵尸会头顶不同的汉字,此时屏幕会提示要消灭的汉字,移动豌豆消灭对应汉字的僵尸,如果攻击非提示汉 ...
「C++小游戏教程」猜数游戏
0. 引言本章主要讲解如何做一个简易的猜数游戏,分为用户猜数和系统猜数. 前置芝士: 「C++小游戏教程」基本技巧(1)--随机化 1. 用户猜数系统想好一个在 [1,100][1,100][1, ...

金榜提名前端小游戏教程（含冒泡，canvas烟花特效,适配pc,手机）内含源码

金榜提名前端小游戏教程（含冒泡，canvas烟花特效,适配pc,手机）内含源码相关推荐

最新文章

热门文章