您的位置：首页 > Web前端 > HTML5

用Html5制作汤姆猫小游戏

2016-09-13 17:17 621 查看

以下汤姆猫是用html5制作的小游戏；

建议火狐测试，然后把火狐调成响应式设计模式（以便模拟手机屏幕），设置--->开发者--->响应式设计模式；如下图

以下是html文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>汤姆猫</title>
<style>
*{
margin: 0px;           /**去掉边距*/
padding: 0px;
}
html{
height: 100%;
}
body{
height: 100%;
}
img{
width: 100%;          /**使图片长宽适应屏幕的大小*/
height: 100%;
}
</style>
</head>
<!--为body添加点击事件，以便用于确定用户点击的位置-->
<body onclick="action(event)">

<!--用于图片-->
<img src="./img/angry/angry_00.jpg" alt="" id="tom">
<!--用于播放声音-->
<audio id="player"></audio>

<script src="tom.js"></script>

</body>
</html>

以下是js文件：tom.js；

/**
* 为body添加点击事件，以便用于确定用户点击的位置
* @param event
*/
function action(event) {
//获取屏幕宽度
var w = document.documentElement.clientWidth;
//获取屏幕高度
var h = document.documentElement.clientHeight;

//相对坐标位置；因为我是在320*480分辨率的情况下确定坐标的，为了在其他分辨率下位置正确，
var x = event.pageX / w * 320; var y = event.pageY / h * 480;

//在控制台显示当前点击的坐标
console.log('点击的坐标为x:'+ x + ',y:' + y);

if (x>132 && x<187 && y>371 && y<411) { //肚子
play('stomach',33,0);
}
if (x>102 && x<201 && y>87 && y<162) { //头
play('knockout',80,20);
}
if (x>163 && x<195 && y>435 && y<455) { //左脚
play('foot_left',29,0);
}
if (x>117 && x<148 && y>439 && y<456) { //右脚
play('foot_right',29,0);
}
if (x>215 && x<242 && y>380 && y<420) { //尾巴
play('angry',25,0);
}
if (x>83 && x<107 && y>282 && y<300) { //右手
play('scratch',55,21);
}
if (x>120 && x<200 && y>192 && y<207) { //嘴巴
play('eat',39,0);
}
if (x>10 && x<60 && y>353 && y<430) { //左下角
play('drink',80,35);
}
if (x>206 && x<225 && y>262 && y<295) { //左手
play('cymbal',12,0);
}
if (x>206 && x<250 && y>72 && y<149) { //左耳朵
play('fart',27,0);
}
}

/**确定当前动作的声音是否播放完，如果没有播放完不执行下一个动作*/
var playing = false;
/**获取页面的图片标签*/
var img = document.getElementById('tom');
/**获取页面的声音标签*/
var player = document.getElementById('player');

/**
*
* @param name 图片和声音的文件名字
* @param totle 该动作图片数量
* @param startAt 从第几张图片开始播放
*/
function play(name,totle,startAt)
{

/**确定当前动作是否播放完，如果没有播放完不执行下一个动作*/
if (playing == false)
{
playing = true;
var i = 0;
animate();
//动画
function animate()
{

//因为图片名称是angry_01.jpg 、 angry_13.jpg 这种格式，所以小于10要在前面加个0
var src = './img/'+name + '/' + name + '_' + (i < 10 ? + '0' : '') + i + '.jpg'; //获取图片地址
img.src = src; //替换图片，（图片快速替换形成动作）

console.log(name+'：第'+i+'张图片');

if (i < totle)
{
//延时图片替换速度，否则动画瞬间完成（setTimeout是异步的，所以不影响声音不放）
setTimeout(animate,65);

if(i == startAt){

//播放声音
player.src = 'sounds/' + name + '.m4a';
player.play();

}
if(name == 'drink' && i == 35)
{
player.src = 'sounds/' + name + '.m4a';
player.play();
}
if(name == 'scratch' && i == 21)
{
player.src = 'sounds/' + name + '.m4a';
player.play();
}
if(name == 'knockout' && i == 20)
{
player.src = 'sounds/' + name + '.m4a';
player.play();
}

//i递加，以便更换下一张动作图片
i++;

}else{

playing = false; //图片播放完成，结束

}
}

}
else
{
return; //重复play()方法,形成连贯动作，因为setTimeout是异步处理的，所以要用递归，否则图片无法延时
}
}

为了适应不同分辨率的屏幕，所以要使用相对坐标（本测试是在320*480上测试的）

var x = event.pageX / w * 320;
var y = event.pageY / h * 480;

有童鞋会问怎么知道图片的坐标范围是多少。
ps：可以借助火狐的控制台查看；
即用     console.log('点击的坐标为x:'+ x + ',y:' + y);    显示；
如下图，点击图片的某位置就会在控制台输出xy坐标；    （右键---->查看元素----->控制台）

然后鼠标点击某个范围就执行什么动作，范围确定左上角和右下角的坐标就行；如下图所示，是确定嘴巴的范围

然后用if判断点击的坐标范围，再执行什么动作；

为了适应在不同分辨率上的位置显示，所以要有 相对位置 确定图片的点击范围；我是在320*480分辨率下确定的；

var x = event.pageX / w * 320;
var y = event.pageY / h * 480;

资源下载地址： http://download.csdn.net/detail/qq_22078107/9629834

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5汤姆猫 html5 汤姆猫小游戏

相关文章推荐

新的分享

章节导航

用Html5制作 汤姆猫 小游戏

用Html5制作汤姆猫小游戏