当前位置:首页 > 游戏攻略 > 正文

js小游戏源码大全(js经典小游戏案例)

js小游戏源码大全(js经典小游戏案例)  第1张


以上就是这个项目的原型图,我们要用HTML+CSS+JS原生方法实现它,不使用任何的框架。

HTML

<h1>剪刀石头布</h1>

快捷写法:table>(tr>td*3)*4

<table>

<tr>

<td id="col1">

<p>你</p>

<img src="images/zb.jpg" id="you">

</td>

<td id="col2">

<p>vs</p>

</td>

<td id="col3">

<p>电脑</p>

<img src="images/zb.jpg" id="computer">

</td>

</tr>

<tr>

<td colspan="3">

<p id="ready">你准备好了么?</p>

</td>
</tr>

<tr>

<td>

<p>你选择了:</p>

<img src="images/zb.jpg" id="choice">

</td>

<td class="choice">

<p class="choice">choice</p>

</td>

<td>

<p>请选择确认出拳</p>

<select id="sel">

<option value="0">请选择</option>

<option value="1">剪刀</option>

<option value="2">石头</option>

<option value="3">布</option>

</select>

<button id="punch">确认出拳</button>

</td>

</tr>

<tr>

<td colspan="3">

总数:<span id="total">0</span>

胜利: <span id="win">0</span>

失败: <span id="lose">0</span>

平局: <span id="draw">0</span>

</td>
</tr>

</table>

解释: 为css用的id,这里根据自己的喜好可以改成classname都可以;

为js用的id,这里尽量采用的是语义化的id标签,方便使用

其中主要绑定的时间为onchange onclick 两个事件,采用的是js的动态绑定,都在js里面了。

CSS

h1 {

text-align: center;

}
table {

width: 80%;

margin: auto;

border-collapse: collapse;

height: 600px;

text-align: center;

}
table tr td {

border: 2px solid #333;

}
#col1 {

width: 40%;

}
#col2 {

width: 20%;

}
#col2 p {

font-size: 70px;

font-weight: bold;

color: orange;

}
#col3 {

width: 40%;

}
#ready {

font-size: 30px;

color: orange;

font-weight: bold;

}
.choice {

font-size: 40px;

font-weight: bold;

color: orange;

text-transform: uppercase;}
span {

margin-right: 20px;

}
#total {

color: orangered;

}
#win {

color: green;

}
#lose {

color: navy;

}
#draw {

color: hotpink;

}

JS

window.onload = function() {

var win = 0;

var lose = 0;

var draw = 0;

// 获取onchange onclick的even

var sel = document.getElementById('sel');

var punch = document.getElementById('punch');

// 绑定第一个onchange事件

sel.onchange = function() {

// 获取select的value值

var selVal = document.getElementById('sel').value;

// 获取要改变图片样式的标签

var choice = document.getElementById('choice');

//使用switch循环函数进行判断或者使用if判断也可以

switch (selVal) {

case '1':

choice.src = 'images/jd.jpg';

break;

case '2':

choice.src = 'images/st.jpg';

break;

case '3':

choice.src = 'images/bu.jpg';

break;

default:

choice.src = 'images/zb.jpg';

}
};

punch.onclick = function() {

var selVal = document.getElementById('sel').value;

var you = document.getElementById('you');

var computer = document.getElementById('computer');

//判断你的出拳来确认图片的选择

switch (selVal) {

case '1':

you.src = 'images/jd.jpg';

break;

case '2':

you.src = 'images/st.jpg';

break;

case '3':

you.src = 'images/bu.jpg';

break;

default:

you.src = 'images/zb.jpg';

alert("请选择再出拳!");

return;//这里一定要有return结束这个结束

}

//随机电脑出拳 利用math的随机函数来实现

var comSel = parseInt(Math.random() * 3 + 1);

//判断电脑随机的出拳来确认图片的选择

switch (comSel) {

case 1:

computer.src = 'images/jd.jpg';

break;

case 2:

computer.src = 'images/st.jpg';

break;

case 3:

computer.src = 'images/bu.jpg';

break;

default:

computer.src = 'images/zb.jpg';

}

var ready = document.getElementById('ready');

var minus = selVal - comSel;

if (minus == 0) {

ready.innerText = '平局';

ready.style.color = 'pink';

draw++;

} else if (minus == -2 || minus == 1) {

ready.innerText = '胜利';

ready.style.color = 'green';

win++; } else {

ready.innerText = '失败';

ready.style.color = 'red'; lose++;

} /

//判断输赢,然后在ready的p标签中改变问题,输出结果

document.getElementById('win').innerText = win;

document.getElementById('lose').innerText = lose;

document.getElementById('draw').innerText = draw;

document.getElementById('total').innerText = win + lose + draw; };
};

以上就是我个人的练习方法以及思路,总之思路千万条,目标就一条,实现功能才是王道,如果你有好的意见,也可以留言,共同探讨。


0