首頁 > 開發者 > JavaScript
只是想用js來寫個小遊戲，順便練練js的代碼。
先看html部分：
html 複製代碼 代碼如下:<style>
#panel{height:300px;width:300px;background:#ccc;margin:50px 0 0 200px;}
#panel ul{list-style:none;display:block;float:left;margin:0;padding:0;}
#panel li{display:block;float:left;width:100px;height:100px;
overflow:hidden;position:relative;text-align:center;}
#panel li span{display:block;position:relative;left:0;top:60px;
width:100px;height:40px;background:url(img/hole.gif) 0 -60px;z-index:100;}
</style>
</head>
<body>
<span>說明：紅色的點擊得分100，藍色的點擊扣分100.</span>
<div id="panel">
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
<div>分數：<span id="score">0</span></div>
<div>倒計時：<span id="time">60</span></div>
<input type="button" value="開始" onclick="GameStart()" />
js部分：地鼠類 複製代碼 代碼如下:var Mouse = function(type){
//地鼠的具體dom元素，添加到頁面上的
this.mouse = null;
//地鼠的編號
this.num = -1;
//地洞的編號(地鼠藏身在哪個洞)
this.hole = -1;
//初始化,type為地鼠類型,好與壞
this.init(type);
}
Mouse.prototype = {
//地鼠類型，好，壞，好的被殺，壞的被殺
mousetype: {
"good": "img/good.gif",
"bad": "img/bad.gif",
"goodkill":"img/goodkill.gif",
"badkill":"img/badkill.gif"
},
//初始化地鼠
init : function(type){
type = type || 'good';
var _this = this;
//建立地鼠的dom元素
this.mouse = document.createElement("div");
//擴充屬性--地鼠類型
this.mouse.mousetype = type;
//擴充類型--屬否活著
this.mouse.islive = true;
this.mouse.style.cssText = 'width:75px;height:100px;background:url('+this.mousetype[type]+');left:0;top:20px;\
position:relative;margin:auto;cursor:pointer;';
//綁定地鼠被點擊事件
this.mouse.onclick = function(e){_this.beat(e);};
},
//地鼠被點中
beat : function(e){
if(this.mouse.islive){
this.mouse.islive = false;
this.onbeat();
this.mouse.style.background = "url("+this.mousetype[this.mouse.mousetype+"kill"]+")";
}
},
//地鼠的動畫
animation : function(speed){
speed = speed == 'fast'?20:speed == 'normal'?30:50;
var obj = this.mouse,ost = obj.style,oTop = parseInt(ost.top,10),cut=5,_this = this;
//讓地鼠從地洞冒出來
var show = function(top){
top = top-cut;
if(top >= -40){
ost.top = top + 'px';
setTimeout(function(){show(top);},speed);
}
else
{
setTimeout(function(){hide(-40);},speed*10);
}
}
//隱藏地鼠
var hide = function(top){
top = top+cut;
if(top <= oTop){
ost.top = top + 'px';
setTimeout(function(){hide(top);},speed);
}
else {
_this.reset();
}
}
show(oTop);
},
//重設地鼠,當地鼠滾回洞裡的時候
reset : function(){
this.mouse.islive =true;
this.mouse.style.background = "url("+this.mousetype[this.mouse.mousetype]+")";
this.onend();
},
//擴充方法：地鼠被點中
onbeat : function(){},
//擴充方法：地鼠動畫結束後
onend : function(){}
}
接著是遊戲控制類，控制遊戲的邏輯： 複製代碼 代碼如下://遊戲控制類
var Game = {
//遊戲時間,一分鐘
time : 61,
//地鼠地圖，總共有十隻，其中兩隻是壞的
mouseMap : {
1:'good',
2:'bad',
3:'good',
4:'good',
5:'bad',
6:'good',
7:'bad',
8:'good',
9:'good',
10:'good'
},
//所有的地鼠dom元素
allMouse : [],
//目前分數
nowScore : 0,
//目前有哪幾個地洞給佔用
hasHole : {},
//目前有哪幾隻地鼠是活動的
hasMouse : {},
//頁面的地洞集合
lis : null,
//初始化地鼠與地洞
init : function(){
//擷取頁面的地洞集合
this.lis = document.getElementById('panel').getElementsByTagName('li');
_this = this;
//初始化10隻地鼠
for(var i=1;i <=10;i++){
var mouse = new Mouse(this.mouseMap[i]);
//擴充地鼠被點中事件
mouse.onbeat = function(){
//修改分數
Game.changeScore(100 * (this.mouse.mousetype=='good'?1:-1));
}
//擴充地鼠動畫結束事件
mouse.onend = function(){
//移除地洞中的地鼠
var li = _this.lis[this.hole];
li.removeChild(li.mouse.mouse);
li.mouse = null;
//清除對應的地洞與地鼠
_this.hasHole[this.hole] = null;
_this.hasMouse[this.num] = null;
}
this.allMouse.push(mouse);
}
},
//修改遊戲分數
changeScore : function(score){
this.nowScore += score;
document.getElementById('score').innerHTML = this.nowScore;
},
//遊戲開始
start : function(){
if(this.time <= 0)return;
var _this = this;
//隨機地洞編號
var random = parseInt(Math.random()*9,10);
while(this.hasHole[random]){
random = parseInt(Math.random()*9,10);
}
//隨機地鼠編號
var randomMouse = parseInt(Math.random()*10,10);
while(this.hasMouse[randomMouse]){
randomMouse = parseInt(Math.random()*10,10);
}
//添加地鼠到地洞中
this.allMouse[randomMouse].hole = random;
this.allMouse[randomMouse].num = randomMouse;
this.lis[random].appendChild(this.allMouse[randomMouse].mouse);
this.lis[random].mouse = this.allMouse[randomMouse];
this.lis[random].mouse.animation('normal');
//記錄地鼠與地洞編號
this.hasHole[random] = 'true';
this.hasMouse[randomMouse] = 'true';
setTimeout(function(){_this.start();},250);
},
//倒計時
startTime : function(){
this.time -= 1;
var _this = this;
document.getElementById('time').innerHTML = this.time;
if(this.time > 0){
setTimeout(function(){_this.startTime()},1000);
}
},
//重設遊戲設定
reset : function(){
this.time = 61;
this.allMouse = [];
this.nowScore = 0;
this.hasHole = {};
this.hasMouse = {};
this.lis = null;
this.changeScore(0);
}
}
//遊戲開始函數
function GameStart(){
if(Game.time > 0 && Game.time != 61){
alert("遊戲尚未結束，不能重新開始哦！");
return;
}
Game.reset();
Game.init();
Game.start();
Game.startTime();
}
這樣就完成了。。。功能還是很簡陋。。。只是想說明，js還是可以做小遊戲的。。。歡迎拍磚！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
