js小游戏源码大全(js经典小游戏案例)
以上就是这个项目的原型图,我们要用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> <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> </table> 解释: 为css用的id,这里根据自己的喜好可以改成classname都可以; 为js用的id,这里尽量采用的是语义化的id标签,方便使用 其中主要绑定的时间为onchange onclick 两个事件,采用的是js的动态绑定,都在js里面了。 |
CSS | h1 { text-align: center; } width: 80%; margin: auto; border-collapse: collapse; height: 600px; text-align: center; } border: 2px solid #333; } width: 40%; } width: 20%; } font-size: 70px; font-weight: bold; color: orange; } width: 40%; } font-size: 30px; color: orange; font-weight: bold; } font-size: 40px; font-weight: bold; color: orange; text-transform: uppercase;} margin-right: 20px; } color: orangered; } color: green; } color: navy; } 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; }; |
以上就是我个人的练习方法以及思路,总之思路千万条,目标就一条,实现功能才是王道,如果你有好的意见,也可以留言,共同探讨。
以上就是电脑114游戏给大家带来的关于js小游戏源码大全(js经典小游戏案例)全部内容,更多攻略请关注电脑114游戏。
电脑114游戏-好玩游戏攻略集合版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!