原创记忆小游戏-HTML网页版

最新推荐文章于 2023-01-31 16:20:34 发布

Mr_厚厚

最新推荐文章于 2023-01-31 16:20:34 发布

阅读量3k

点赞数 1

分类专栏： HTML5 游戏开发与原理文章标签： html 游戏 javascript

本文链接：https://blog.csdn.net/cordova/article/details/50853162

版权

游戏开发与原理同时被 2 个专栏收录

16 篇文章 3 订阅

订阅专栏

HTML5

11 篇文章 1 订阅

订阅专栏

自己设计的一款记忆里的小游戏，开发平台Dreamweaver，只用HTML和JS就可实现（插件用到了JQ），很简单供初学者参考，源码素材都分享给大家：

游戏的设计规则很简单：开始的时候16宫格全部隐藏，点击开始格子里面会显示随机生成的三种颜色的钻石，5秒钟的记忆时间，五秒后隐藏钻石，同时上面显示需要找的钻石颜色，用户凭记忆选出所有的该颜色的钻石。

实现的方法也很简单，主要是几个重要状态和一个二维数组的处理以及一些字符串变量的处理，最后是根据所用时间和正确率成绩结算的一个小算法。

源码工程文件下载：https://github.com/jiangxh1992/HaierOven-Site

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>消除钻石游戏</title>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="snow.js"></script><!--雪花-->
    <script>createSnow("",60)</script>
</head>

<body bgcolor="#00FFFF">
<!--背景音乐-->
<audio id="bg" src="" autoplay></audio>
<!--钻石声音-->
<audio id="voice" src="" autoplay></audio>
<!--警告声音-->
<audio id="warning" src="" autoplay></audio>

<div id="myscreen" style=" border:#609 double 5px; margin:0px; padding:0px; background:url(bg.jpg) no-repeat 0 0; height:700px; width:900px; position:absolute; left:150px;">
     <div>
     <h3 style="color:#00F; float:center">要消除的方块 ：</h3>
     <table width="200" border="2" bgcolor="#FFFF00" cellspacing="3" cellpadding="3">
  <tr>
    <td><img id="00" src="what.png" style="margin:0px;"></td>
  </tr>
    </table>
    <font color="#00FFFF">商城积分：</font><font color="#6600FF" id="score">0   </font>
    <a href="../index.html"><font color="#FF3399" size="+1">去商城  </font></a>
     <font id="timetxt" style=" font-size:20px; color:#00F">倒计时：</font>
     <font id="countTime" style=" font-size:34px; color:#F00">0</font>
     <font style=" font-size:14px; color:#F00">误点个数：</font>
     <font id="wrongnum" style=" font-size:24px; color:#00F">0</font>
     <!--游戏表格区-->
     <table width="410" height="410" bgcolor="#FFFF66" border="2" cellspacing="3" cellpadding="3">
  <tr>
    <td><img class="daimond" id="diamond1" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond2" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond3" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond4" src="focus.png" onClick="deal(this)"></td>
  </tr>
  <tr>
    <td><img class="daimond" id="diamond5" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond6" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond7" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond8" src="focus.png" onClick="deal(this)"></td>
  </tr>
  <tr>
    <td><img class="daimond" id="diamond9"  src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond10" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond11" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond12" src="focus.png" onClick="deal(this)"></td>
  </tr>
  <tr>
    <td><img class="daimond" id="diamond13" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond14" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond15" src="focus.png" onClick="deal(this)"></td>
    <td><img class="daimond" id="diamond16" src="focus.png" onClick="deal(this)"></td>
  </tr>
</table>

<button onClick="init()" style=" background:url(start.png); width:160px; height:57px;"></button>
</div>

<script type="text/javascript">
//消除用时
var usedtime;
//游戏状态
var ready;
//图片资源路径字符串
var s0;
//游戏区各种颜色钻石的数量：
var rednum;
var purplenum;
var greennum;
//需要消除的颜色的数量
var neednum;
//错误个数
var wrongnum;
//要消除的颜色代号[red:0;green:1;purple:2]
var targetcolornum;
//定义数组用于保存钻石分布信息,下标为0的不用
var diaArray=new Array();
//方块名称数组
var imgName = new Array("red.png","green.png","purple.png");
var imgName2 = new Array("red2.png","green2.png","purple2.png");//小图
//alert(Math.floor(Math.random()*10%3));
//alert(imgName[Math.floor(Math.random()*10%3)]);
	//记忆游戏：
	//清空div画面
	function removeall(){
		window.location.reload();
		}
	function init(){
	//用时
	usedtime=0;
    //游戏状态
	ready=false;
	//背景音乐
	var voice = document.getElementById("bg");
	voice.src="bg.mp3";
	//初始化钻石数量
	rednum=0;
	purplenum=0;
	greennum=0;
	//需要消除的个数
	neednum=0;
	//初始化错误个数
	wrongnum=0;
	var timetxt = document.getElementById("countTime");
	timetxt.innerHTML="0";
	var t = 5;
	var t1=setInterval(function(){t--;timetxt.innerHTML=t;},1000);
	var t2=setInterval(function(){if(timetxt.innerText<0){timetxt.innerText="0";clearInterval(t1);clearInterval(t2);clear()}},10);
	//初始化游戏区
	var img = document.getElementById("00");
	var s=img.src;
	var index1=s.lastIndexOf("/");
    s0=s.slice(0,index1+1);
	//随机生成游戏区的钻石
	for(var d=1;d<=16;d++){
		var dd=d;
		var str=dd.toString();
		var tempimg=document.getElementById("diamond"+str);
		diaArray[d]=Math.floor(Math.random()*10%3);
		tempimg.src=s0+imgName[diaArray[d]];
		switch(diaArray[d]){
			case 0:rednum++;break;
			case 1:greennum++;break;
			case 2:purplenum++;break;
			default:alert("error");
			}
		}
	function clear(){
		//开始计时
		//var t3=setInterval(usedtime++,1000);
		document.getElementById("timetxt").innerHTML="已用时间：";
		var counttime=document.getElementById("countTime");
		var usedt=0;
		var t3=setInterval(function(){usedt++;usedtime=usedt;counttime.innerHTML=usedt.toString();},1000);
		//可以点了
		ready=true;
		//揭开要消除的颜色
		targetcolornum = Math.floor(Math.random()*10%3);
		img.src=s0+imgName2[targetcolornum];
		//确定需要消除的颜色的数量
		switch(targetcolornum){
			case 0:neednum=rednum;break;
			case 1:neednum=greennum;break;
			case 2:neednum=purplenum;break;
			default:alert("error");
			}
		//隐藏钻石
		for(var d=1;d<=16;d++){
		var dd=d;
		var str=dd.toString();
		var tempimg=document.getElementById("diamond"+str);
		tempimg.src=s0+"whatbig.png";
		}
		}
		}
//计算综合得分
function score(wrongNum,usedTime,neednum){
	var first=Math.floor(neednum/3);
	if(wrongnum<=first){
		return 100-(wrongNum*5+usedTime);
		}
		else{
			return 100-(wrongNum*10+usedTime);
			}
	}
//处理玩家操作响应
function deal(obj){
	if(!ready){return;}
	var eimg = document.getElementById(obj.id);
	var ID=obj.id;
	var theid=ID.slice(7);//点击的钻石的编号下标
	if(diaArray[theid]==targetcolornum.toString())//如果点击的是需要消除的
	{
	//播放声音
	document.getElementById("voice").src="voice.mp3";
	eimg.src=s0+imgName[targetcolornum];//显示
	--neednum;
	//已经全部选中
	if(neednum<=0){
		ready=false;
		//document.getElementById("counttime").innerHTML=0;
		if(wrongnum==0){
		alert("哇偶好厉害全部选对！^_^"+"<br>"+"用时"+usedtime+"秒！");
		}else if(wrongnum>3){
			alert("... ... 你终于全部选粗来了！"+"用时"+usedtime+"秒！");
			}else{
				alert("恭喜全部选粗来了！"+"用时"+usedtime+"秒！");
				}
				var finscore=score(wrongnum,usedtime,neednum).toString();
				if(finscore<=0)
				{alert("零蛋！唉...怎么说你好呢~"); removeall();}
				else{
		        alert("综合得分："+finscore);
				}
				 //重置
				  removeall();
	              }
	    }else{
		//错误个数+1
		wrongnum++;
		document.getElementById("warning").src="warning.mp3";
		document.getElementById("wrongnum").innerHTML=wrongnum.toString();
		//alert("哎呦喂~点错啦亲！=_=");
		eimg.src=s0+"cry.png";//标记
		 }
	}//init end
//==============================================================================================================================================
</script>
</body>
</html>