专栏简介 | ||
个人主页 专栏目录 点击上方查看更多内容 |
心灵鸡汤 相信梦想是价值的源泉,相信眼光决定未来的一切,相信成功的信念比成功本身更重要,相信人生有挫折没有失败,相信生命的质量来自决不妥协的信念 |
不定时分享各种H5小游戏,欢迎订阅!收藏! |
放烟花的小游戏。点击页面放烟花。兼容移动端。
在烟花的基础上添加交互事件,为【烟花】增添趣味性。触点(焦点)位置即烟花得开花位置。
1️⃣.限时,当时间结束时游戏结束。
2️⃣.计分规则,放一个烟花得一分。
3️⃣.重玩规则,时间结束。
1️⃣.开始界面。开始操作。
2️⃣.烟花燃放界面。倒计时,烟花燃放数
3️⃣.游戏结束页面。重玩儿。
下方仅贴出核心代码以供参考
下方仅贴出核心代码以供参考
下方仅贴出核心代码以供参考
下面就总结下实现过程。
以上素材作用如下
作用 | 图片 |
---|---|
背景图 | bg.jpg |
开始按钮 | start.jpg |
重玩儿按钮 | restart.jpg |
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>放烟花title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
<script type="text/javascript" src="js/zepto.1.1.4.min.js">script>
<script type="text/javascript" src="js/fireworks.js">script>
<audio src="audio/music.mp3" loop>audio>
head>
<body>
<div class="index">
<section class="start page">
<div class="startbtn"><a href="#" class="start">a>div>
section>
<section class="index page">
<div class="time">倒计时:<span id="time">span>sdiv>
<div class="score" id="score">div>
<canvas id="canvas">canvas>
<i class="musicPlay">i>
section>
div>
<div id="game" class="game-wp">
<div class="game">
<p class="result" id="result"> p>
<a href="#" class="playAgain">a>
div>
<div class="mask">div>
div>
body>
html>
var $start = $('.start');
// 开始
$('.start').on('click', function() {
$start.hide();
$page2 = $('.index '),
subPage();
return false;
})
var subPage = function () {
$timeObj.show();
timer(10);
score=0;
$score.text(score);
$(".score").show();
window.myScore = score;
playMusic();
}
var playMusic = function() {
$musicPlay.show();
var audio = document.getElementsByTagName('audio')[0];
audio.play();
}
$('.playAgain').on('click', function() {
$pop.hide();
subPage();
return false;
})