注：没有添加音乐，你们可以自己添加一下
html的body部分
<body>
<!-- 用戶界面 -->
<div id="Viewport" class="View">
<li id="TimeInfo" style="left: 650px; color: #ffffff; position: absolute; top: 50px;">遊戲時間</li>
<li id="PlayerScrInfo" style="left: 650px; color: #ffffff; position: absolute; top: 100px;">玩家總分：</li>
<li id="SystemScrInfo" style="left: 650px; color: #ffffff; position: absolute; top: 150px;">系統總分：</li>
<li id="PercntShottedInfo" style="left: 650px; color: #ffffff; position: absolute; top: 200px;">分數比率：</li>
<div class="EndGame" id="DIV19" onclick="GameEnd()">結束遊戲</div>
<div class="StartGame" id="DIV18" onclick="GameStart()">開始遊戲</div>
</div>
<!-- 背景播放器 -->
</body>css部分
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<style type="text/css">
.View{
left: 100px;
width: 800px;
position: absolute;
top: 0px;
height: 600px;
border-right: #ffffff 1px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
border-bottom: #ffffff 1px solid;
cursor: url(NormDervish.cur);
background-image: url(Back.jpg);
background-repeat: no-repeat;
background-size: 800px 600px;
}
.EndGame{
right: 25px; width: 68px; position: absolute; top: 446px; height: 16px;
background-color: #cc0000; z-index: 0; vertical-align: middle;
text-align: center;
}
.StartGame{
right: 26px; width: 68px; position: absolute; top: 418px; height: 16px;
background-color: #00ff00; z-index: 0; vertical-align: middle;
text-align: center;
}
.backSound{
left: 0px; width: 0px; top: 0px; height: 0px;
}
</style>
<title>撿餡餅遊戲</title>
</head>js部分
<script type="text/JavaScript">
//var imgSrc = new Array("FiyHeart.gif","ChocolatePie.ico","CotonCandy.ico","peachpai.ico","Grimace.ico"); //餡餅圖片表
var imgSrc = new Array("tsico1.png","tsico2.png","tsico3.png","tsico4.png","tsico5.png"); //餡餅圖片表
var coreScore = new Array(100,50,30,10,-200); //餡餅分值表
var pieArray = null; //屏幕上的餡餅序列
var gameLoopListener = null; //偵聽器列表
var systemScore = 0; //系統總分
var playerScore = 0; //玩家總分
var escapeTimeMin = 0; //遊戲時間：分
var escapeTimeScnd = 0; //遊戲時間：秒
var gameLoopTimer; //遊戲循環定時器
var gamingTimer; //遊戲計時器
var isStarted = false; //標記遊戲是否已經開始
function PieCore(_imgID) { // +餡餅類構造函數
this.imgID = _imgID; //img對象引用
this.score = 0; //餡餅分值
this.src = ""; //餡餅圖片地址
this.initImg = function () { //初始化圖片
var rnd = Math.floor(Math.random() * 10) % 5; //隨機選取0~4間的數作為索引
if(document.getElementById(this.imgID) == null) return; //如果獲取圖片對象不成功則返回
document.getElementById(this.imgID).src = imgSrc[rnd]; //設置餡餅圖片
this.src = imgSrc[rnd]; //登記餡的圖片地址
this.score = coreScore[rnd]; //登記分數
}
}
function Pie(_divID,_imgID) { //餡餅構造函數
this.divID = _divID; //DIV對象引用
this.imgID = _imgID; //img對象引用
this.pieCore = null; //餡餅引用
this.x = 0; //坐標
this.y = 0 ;
this.moveTo = function (_x,_y){ //移動狀態
document.getElementById(this.divID).style.marginLeft = _x + "px"; //設置X軸位置
document.getElementById(this.divID).style.marginTop = _y + "px"; //設置Y軸位置
this.x = _x; //重新登記x，y軸信息
this.y = _y;
}
this.addGameLoopEventListener = function(){ //添加遊戲循環偵聽器
gameLoopListener.push(this); //往“遊戲循環事件”偵聽器列表填入當前餅的監聽器地址
}
this.gameLoopEventListener = function(){ //偵聽遊戲循環事件，刷新狀態
if(Math.random() < 0.7){ //以0.7概率右移
if(this.pieCore.score < 0){ //負分餡餅移動速度更快
this.moveTo( this.x+3,this.y+2);
}else{
this.moveTo( this.x+1,this.y+1); //正分值的餅移速正常
}
}else{ //以0.3的概率向左移動
if(this.pieCore.score < 0){ //負分餡餅移動速度更快
this.moveTo( this.x-3,this.y+2);
}else{ //正分值的餅移速正常
this.moveTo(this.x-1,this.y+1);
}
}
if(this.y > 400){ //在豎直方向上的位置只要超出400像素就復位
this.reSet();
}
}
this.reSet = function(){ //復位狀態，負責餅的信息復位
this.pieCore = null; //斷開當前餡餅的引用
this.pieCore = new PieCore(this.imgID); //創建新餡
this.pieCore.initImg(); //是新餡初始化
var rndX = Math.floor(Math.random() * 600); //給新餅一個隨機的x坐標
document.getElementById(this.divID).style.marginLeft = rndX + "px"; //將新餅放到屏幕最上端
document.getElementById(this.divID).style.marginTop = 0 + "px";
this.x = rndX; //x anxis，登記新坐標
this.y = 0; //y anxis，登記新坐標
if (this.pieCore.score > 0) { //記錄新餅分值
systemScore += this.pieCore.score;
}
}
this.addMouseEventListener = function(){ //添加鼠標事件偵聽器
with(this){ //將當前對象上下文傳遞到子級對象
document.getElementById(divID).onclick = function(){ //鼠標單擊事件
if(pieCore.score < 0)return; //單機的不是正分餅則返回，減分操作有其他偵聽器完成
playerScore += pieCore.score; //否則加分
// FXSoundPlayer.URL = "Good.Wav"; //音樂播放器
// FXSoundPlayer.controls.play();
reSet(); //吃完當前餡餅後將餅復位
}
document.getElementById(divID).onmouseover = function () { //鼠標移過時間處理程序
if(pieCore.score < 0){ //單機的不是正分餅則減分並復位
playerScore += pieCore.score; //減分
// FXSoundPlayer.URL = "Haha.Wav";//音樂播放器
// FXSoundPlayer.controls.play();
reSet(); //復位
}
}
}
}
}
function InitResource() {
for (let i = 0; i < 18; i++) {
var div = document.createElement("div"); //創建餡餅的div資源
div.setAttribute("id","Div"+i); //設置div的id
div.style.visibility = "hidden"; //隱藏div
div.style.position = "absolute"; //絕對位置模式
var img = document.createElement("img"); //創建餡的img資源
img.setAttribute("id","Img"+i); //設置img的id
div.appendChild(img); //添加給div
var viewport = document.getElementById("Viewport"); //取得作為視口div引用
viewport.appendChild(div); //將餡餅的div添加到視口
viewport.style.left = (document.body.clientWidth-800)/2 + "px"; //設置視口位置為網頁正中
}
}
InitResource(); //在頁面加載時執行InitResource()函數 即初始化遊戲資源
function GameStart() { //遊戲開始，負責初始化
if(isStarted){ //如果已經開始舊直接返回
return;
}
isStarted = true; //標記遊戲已經開始
systemScore = 0; //系統總分
playerScore = 0; //玩家總分
escapeTimeMin = 0; //遊戲時間：分
escapeTimeScnd = 0; //遊戲時間：秒
isEndGame = false; //是否結實遊戲
pieArray = new Array(); //屏幕上的餡餅序列
gameLoopListener = new Array(); //偵聽器表
for(i = 1 ; i < 18 ; i++){ //屏上生成17個餅
divID = "Div" + i; //構建層div的ID
imgID = "Img" + i; //構建圖像對象ID
pie = new Pie(divID ,imgID); //新建一個餅對象
pie.reSet(); //新餅復位，取得一個餡
pie.addGameLoopEventListener(); //這個餅需要監聽遊戲循環事件
pie.addMouseEventListener(); //這個餅需要監聽鼠標事件
pieArray.push(pie); //添加到餅表
}
for (n in pieArray) { //顯示所有餡餅
var divObj = document.getElementById( pieArray[n].divID); //取得餡餅引用
if (divObj != null) { //引用有效
divObj.style.visibility = "visible"; //設置為可見
}
}
// backSoundPlayer.controls.play(); //播放背景音樂
gameLoopTimer = setInterval(GameLoop,5); //啟動遊戲循環
gamingTimer = setInterval(Timer,1000); //啟動遊戲計時
}
function GameLoop() { //遊戲循環，負責發送“遊戲循環” 事件，並刷新系統信息
for(n in gameLoopListener){
(gameLoopListener[n]).gameLoopEventListener(); //通知偵聽者
SystemScrInfo.firstChild.nodeValue = "系統總分：" + systemScore; //刷新系統信息：系統總分
PlayerScrInfo.firstChild.nodeValue = "玩家總分：" + playerScore; //刷新系統信息：玩家總分
PercntShottedInfo.firstChild.nodeValue = "分數比率：" + Math.floor((playerScore / systemScore * (escapeTimeMin + (escapeTimeScnd / 60))) * 100) + "%"; //刷新系統信息：分數比率
TimeInfo.firstChild.nodeValue = "遊戲時間：" + escapeTimeMin + "分" + escapeTimeScnd + "秒"; //刷新系統信息：遊戲計時
}
}
function Timer() { //遊戲計時器
if( ++ escapeTimeScnd == 60){ //將秒轉換為分
escapeTimeMin ++ ; //分遞增
escapeTimeScnd = 0; //滿60秒則秒值設為0
}
}
function GameEnd() { //遊戲結束操作
clearInterval( gameLoopTimer ); //移除計時器，遊戲掛起
clearInterval( gamingTimer );
for( n in pieArray ){ //隱藏並刪除所有餡餅
var divObj = document.getElementById(pieArray[n].divID); //-餡餅div的引用
if (divObj != null) {
divObj.style.visibility = "hidden"; //隱藏餡餅
divObj = null; //刪除div
}
}
pieArray = null; //刪除餅數組
// backSoundPlayer.controls.stop(); //停止播放背景音樂
isStarted = false; //標記遊戲已經結束
x = Math.floor((playerScore / systemScore * (escapeTimeMin + (escapeTimeScnd / 60))) * 100);
x2=x;
if(x < 60){ //成績評估
x = "不及格！！！"; //小於60分
}else if((x >= 60) && (x < 70)){
x = "及格！"; //60~70
}else if ((x >= 70) && (x < 80)){
x = "良!!"; //70~80
}else{
x = "牛!!!"; //80分以上
}
alert("你的積分為：" + playerScore + "\n系統總分：" + systemScore + "\n" + "分數比率" + x2 + "%\n成績評估" + x); //輸出
}
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
