【H5游戏】-使用js实现一个可以【放烟花】的小游戏

专栏简介

个人主页
专栏目录

点击上方查看更多内容
心灵鸡汤
相信梦想是价值的源泉,相信眼光决定未来的一切,相信成功的信念比成功本身更重要,相信人生有挫折没有失败,相信生命的质量来自决不妥协的信念

不定时分享各种H5小游戏,欢迎订阅!收藏!

放烟花

    • 游戏需求
      • 核心玩法
      • 界面原型
      • 成品演示
    • 游戏开发
      • 1.游戏素材准备
      • 2.代码实现
        • 1.创建index.html页面
        • 2.首页-开始
        • 3.加载烟花音效
        • 4.重玩儿

  放烟花的小游戏。点击页面放烟花。兼容移动端。

游戏需求

  在烟花的基础上添加交互事件,为【烟花】增添趣味性。触点(焦点)位置即烟花得开花位置。

核心玩法

  1️⃣.限时,当时间结束时游戏结束。
  2️⃣.计分规则,放一个烟花得一分。
  3️⃣.重玩规则,时间结束。

界面原型

  1️⃣.开始界面。开始操作。
  2️⃣.烟花燃放界面。倒计时,烟花燃放数
  3️⃣.游戏结束页面。重玩儿。

成品演示

【H5游戏】-使用js实现一个可以【放烟花】的小游戏_第1张图片

游戏开发

下方仅贴出核心代码以供参考
下方仅贴出核心代码以供参考
下方仅贴出核心代码以供参考
   下面就总结下实现过程。

1.游戏素材准备

【H5游戏】-使用js实现一个可以【放烟花】的小游戏_第2张图片

以上素材作用如下

作用 图片
背景图 bg.jpg
开始按钮 start.jpg
重玩儿按钮 restart.jpg

2.代码实现

1.创建index.html页面

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>

2.首页-开始

		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();
			}

3.加载烟花音效

			var playMusic = function() {
				$musicPlay.show();
				var audio = document.getElementsByTagName('audio')[0];
				audio.play();
			}

4.重玩儿

			$('.playAgain').on('click', function() {
				$pop.hide();
				subPage();
				return false;
			})

你可能感兴趣的:(H5游戏,javascript,前端,开发语言)