文字游戏教程

html:

JavaScript:

//定义数组
var a = new Array();
a[0] = "今天天气好";//第一句话
a[1] = "蓝天白云";//第二句话
a[2] = "晴空万里";//第三句话
var num = 1;//当前是第几句话

//显示背景图片
function show_scene(n)
{
	if(n == "背景1")
	{
		var tp = document.getElementById('envi');
		tp.innerHTML = '<img src="../img/scene/home1/room2a.jpg">';//背景图片1
	}
	else if(n == "背景2")
	{
		var tp = document.getElementById('envi');
		tp.innerHTML = '<img src="../img/scene/outhome/outhome1a.jpg">';//背景图片2
	}
}

//显示人物图片
function show_person(n)
{
	var m = document.getElementById("person");
	m.style.visibility = "visible";//显示人物div，因为初始设置为不显示人物div
	if(n == "人物1")
	{
		m.style.top = "63px";//调整人物图片的位置（向上偏移30像素），毕竟不同的人物图片大小不一样，位置就不一样
		m.style.left = "100px";//人物图片从左向右移动100像素
		m.innerHTML = '<img src="../img/person/yu1a.png">';//加载人物图片1
	}
	else if(n == "人物2")
	{
		m.style.top = "111px";//人物图片向下偏移40像素
		m.style.left = "80px";//人物图片从左向右移动100像素
		m.innerHTML = '<img src="../img/person/qian1a.png">';//加载人物图片2
	}
}

//打开背景音乐
function music_on()
{
	var player = document.getElementById("aud");
	player.src = '../music/theme3.mp3';
}
//关闭背景音乐
function music_off()
{
	var player = document.getElementById("aud");
	player.src = '';
}

//人物说话
function show_say()
{
	switch(num)
	{
		case 1:
		document.getElementById("shuchu").innerHTML = a[0];
		num = num + 1;
		break;
		case 2:
		document.getElementById("shuchu").innerHTML = a[1];
		num = num + 1;
		break;
		case 3:
		document.getElementById("shuchu").innerHTML = a[2];
		num = 1;
		break;
	}
}

css: