原生js結(jié)合html5制作簡易的雙色子游戲
更新時間：2015年03月30日 09:58:04 投稿：hebedich
這篇文章主要介紹了原生js結(jié)合html5制作簡易的雙色子游戲的代碼，是個人學(xué)習(xí)練手用的，雖然寫的不太好，還是分享給大家，有需要的小伙伴可以參考下。
想轉(zhuǎn)html5游戲開，這是學(xué)習(xí)練手的東西，最開始是用面向過程的方式實現(xiàn)，后面用面向?qū)ο蟮姆绞綄崿F(xiàn)(被坑了)……
演示地址:http://runjs.cn/detail/ss8pkzrc
html代碼
<html>
<head>
<meta charset="utf-8"/>
<title>擲色子的游戲</title>
</head>
<body>
<table>
<tr>
<td align="center">
<canvas id="game" width="400" height="300" style="border:1px solid #c3c3c3">
你的游覽器不支持html5的畫布元素，請升級到IE9+或使用firefox、chrome這類高級的智能游覽器！
</canvas><br/>
<input id="button" type="button" onclick="javascript:stage.play();" value="開始擲骰子"/>
</td>
<td>
游戲規(guī)則：<br/>
1、一個玩家、兩個色子，每個色子有1-6個點，點數(shù)隨機出現(xiàn)，點數(shù)是2-12中的任意數(shù)字<br/>
2、如果玩家第一次拋出 7 或者 11，則本回合勝利 進行下一回合<br/>
3、如果玩家拋出2、3、12 則回合失敗 進行下一回合<br/>
4、拋出其他數(shù)字4、5、6、7、8、9、10 記錄點數(shù)和，并繼續(xù)擲色子<br/>
5、當(dāng)玩家擲出7 則本回合失敗 進行下一回合<br/>
6、當(dāng)玩家拋出的點數(shù)和與上一次的相同，本局勝利 進行下一回合<br/>
7、當(dāng)玩家拋出的點數(shù)和與上一次的不同，本局失敗，進行下一回合<br/>
后期擴展：<br/>
這個游戲有押注和積分的功能，尚無思路，所以沒有實現(xiàn)<br/>
</td>
</tr>
<tr>
<td colspan="2">
<div id="log"></div>
</td>
</tr>
</table>
<br/>
<script>
/**
游戲規(guī)則：
一個玩家、兩個色子，每個色子有1-6個點，點數(shù)隨機出現(xiàn)，點數(shù)是2-12中的任意數(shù)字
如果玩家第一次拋出 7 或者 11，則本回合勝利 進行下一回合
如果玩家拋出2、3、12 則回合失敗 進行下一回合
拋出其他數(shù)字4、5、6、7、8、9、10 記錄點數(shù)和，并繼續(xù)擲色子
當(dāng)玩家擲出7 則本回合失敗 進行下一回合
當(dāng)玩家拋出的點數(shù)和與上一次的相同，本局勝利 進行下一回合
當(dāng)玩家拋出的點數(shù)和與上一次的不同，本局失敗，進行下一回合
game:{游戲?qū)ο?
}
Stage={場景對象
add(thing) //添加一個物件
addEvent(type,handler)
redraw() //重繪所有thing對象
}
Thing = {//物件對象
draw(canvas)//傳入一個canvas畫板對象用于繪制thing
isScope(x,y) //傳入鼠標(biāo)相對于canvas的位置，返回boolean，
//用于判斷鼠標(biāo)是否在thing的范圍 true在，false不在
addEvent(type,handler) //公開方法 //給物件設(shè)置時間
}
定義我們自己的場景對象
擲色子的場景內(nèi)需要：
1、兩個色子 色子一號 色子二號
2、一個公告板 顯示本局信息
3、三個按鈕 重現(xiàn)開始
**/
function Stage(canvas){
this.canvas = document.getElementById(canvas);
this.ctx = this.canvas.getContext('2d');
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = 'rgb(255,0,0)';
this.width = this.canvas.width;
this.height = this.canvas.height;
this.things = [];
this.addEvent = [];
this.rule = {};
}
Stage.prototype.setings = function(){};
Stage.prototype.draw = function(){
for(var thing in this.things){
if(this.things[thing] instanceof Array){
for(var i=0;i<this.things[thing].length;i++){
this.things[thing][i].init();
}
}
}
}
Stage.prototype.add = function(thing){
if(!thing){return;}
if(this.things['disc'] == undefined){
this.things['disc'] = [];
}
if(this.things['callBoard'] == undefined){
this.things['callBoard'] = [];
}
if(thing instanceof Disc){
this.things['disc'].push(thing);
}
if(thing instanceof CallBoard){
this.things['callBoard'].push(thing);
}
}
Stage.prototype.play = function(){
this.clean();
for(var i=0;i<this.things['disc'].length;i++){
this.things['disc'][i].random_porints();
}
this.rule.init(this);
this.rule.run();
this.log();
if(!this.rule.hasNext){
var self = this;
document.getElementById('button').onclick = function(){
self.redraw();
}
document.getElementById('button').value = '重置游戲';
}else{
document.getElementById('button').value = '再拋一次';
}
}
Stage.prototype.redraw = function(){
this.clean();
this.things = {};
this.setings();
var self = this;
document.getElementById('button').onclick = function(){
self.play();
}
document.getElementById('button').value = '開始擲骰子';
}
Stage.prototype.log = function(){
var html = document.getElementById('log').innerHTML;
var tmp = this.rule.notice1.str +' '+ this.rule.notice2.str +' '+ this.rule.notice3.str +' ';
tmp += (this.rule.integral.length > 0 ? ('上一次點數(shù)[<font color="red">'+this.rule.integral.join(',')+'</font>]'):'')+this.rule.hasNext+'<br/>';
document.getElementById('log').innerHTML = html + tmp;
}
Stage.prototype.clean = function(){
for(var i=0;i<this.things['disc'].length;i++){
this.things['disc'][i].clean();
}
for(var i=0;i<this.things['callBoard'].length;i++){
this.things['callBoard'][i].clean();
}
}
function Disc(x,y,stage){
this.x = x;
this.y = y;
this.stage = stage;
this.init();
}
Disc.prototype.init = function(){
this.width = 170;
this.height = this.width;
this.porints = 1;
this.draw();
this.draw_porints();
}
Disc.prototype.draw = function(){
this.stage.ctx.beginPath();
this.stage.ctx.strokeRect(this.x,this.y,this.width,this.height);
this.stage.ctx.closePath();
this.stage.ctx.stroke();
}
Disc.prototype.random_porints = function(){
this.clean();
var tmp = 0;
do{
tmp = Math.floor(Math.random() * 7);
}while(tmp <= 0 || tmp > 6)
this.porints = tmp;
this.draw_porints();
}
Disc.prototype.draw_porints = function(){
var radius = this.width/7;
if(this.porints == 1){//當(dāng)只有1個點的時候，點位于正方形的正中間(width/2,height/2) 半徑為width/4
draw_porint(this.x + (this.width/2),this.y + (this.height/2),this.width/4,this.stage);
}else if(this.porints == 2){//當(dāng)有兩個點時，第一個點位于(width/2,(height/7)*2,第二個點位于(width/2,(height/7)*5)
draw_porint(this.x + (this.width/2),this.y + ((this.height/7)*2),radius,this.stage);
draw_porint(this.x + (this.width/2),this.y + ((this.height/7)*5),radius,this.stage);;
}else if(this.porints == 3){
draw_porint(this.x + ((this.width/10)*2),this.y + ((this.height/10)*2),radius,this.stage);
draw_porint(this.x + ((this.width/10)*5),this.y + ((this.height/10)*5),radius,this.stage);
draw_porint(this.x + ((this.width/10)*8),this.y + ((this.height/10)*8),radius,this.stage);
}else if(this.porints == 4){
draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/7)*2),radius,this.stage);
draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/7)*2),radius,this.stage);
draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/7)*5),radius,this.stage);
draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/7)*5),radius,this.stage);
}else if(this.porints == 5){
draw_porint(this.x + ((this.width/10)*2),this.y + ((this.height/10)*2),radius,this.stage);
draw_porint(this.x + ((this.width/10)*2),this.y + ((this.height/10)*8),radius,this.stage);
draw_porint(this.x + ((this.width/10)*5),this.y + ((this.height/10)*5),radius,this.stage);
draw_porint(this.x + ((this.width/10)*8),this.y + ((this.height/10)*2),radius,this.stage);
draw_porint(this.x + ((this.width/10)*8),this.y + ((this.height/10)*8),radius,this.stage);
}else if(this.porints == 6){
draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/10)*2),radius,this.stage);
draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/10)*2),radius,this.stage);
draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/10)*5),radius,this.stage);
draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/10)*5),radius,this.stage);
draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/10)*8),radius,this.stage);
draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/10)*8),radius,this.stage);
}
}
Disc.prototype.redraw = function(){
this.clean();
this.porints = 1;
this.draw_porints();
}
Disc.prototype.clean = function(){
this.stage.ctx.clearRect(this.x,this.y,this.width,this.height);
}
function draw_porint(x,y,radius,stage){
stage.ctx.beginPath();
stage.ctx.arc(x,y,radius,0,2*Math.PI,false);
stage.ctx.closePath();
stage.ctx.fill();
}
function CallBoard(x,y,stage){
this.x = x;
this.y = y;
this.width = 360;
this.height = 50;
this.stage = stage;
this.notices = [];
this.init();
}
CallBoard.prototype.init = function(){
this.stage.ctx.beginPath();
this.stage.ctx.strokeRect(this.x,this.y,this.width,this.height);
this.stage.ctx.closePath();
this.stage.ctx.stroke();
this.draw();
}
CallBoard.prototype.draw = function(){
for(var i =0;i<this.notices.length;i++){
this.notices[i].init();
}
}
CallBoard.prototype.redraw = function(){
this.clean();
this.init();
this.draw();
}
CallBoard.prototype.clean = function(){
this.stage.ctx.clearRect(this.x,this.y,this.width,this.height);
}
CallBoard.prototype.add = function(notice){
if(!notice){return;}
this.notices.push(notice);
}
function Notice(x,y,str,callBoard){
this.x = x;
this.y = y;
this.str = str;
this.width = 150;
this.height = 10;
this.stage = callBoard.stage;
if(str == undefined){
this.init();
}else{
this.init(str);
}
}
Notice.prototype.init = function(){
this.stage.ctx.fillText('暫無',this.x,this.y);
}
Notice.prototype.init = function(str){
if(str != ''){
this.str = str;
}
this.stage.ctx.fillText(this.str,this.x,this.y);
}
Notice.prototype.draw = function(str){
this.init(str);
}
Notice.prototype.redraw = function(str){
this.stage.ctx.clearRect(this.x,this.y-9,this.width,this.height);
this.draw(str);
}
function Rule(){
this.disc1 = {};
this.disc2 = {};
this.notice1 = {};
this.notice2 = {};
this.notice3 = {};
this.count = 0;
this.integral = [];
this.hasNext = false;
}
Rule.prototype.init = function(stage){
this.disc1 = stage.things['disc'][0];
this.disc2 = stage.things['disc'][1];
this.notice1 = stage.things['callBoard'][0].notices[0];
this.notice2 = stage.things['callBoard'][0].notices[1];
this.notice3 = stage.things['callBoard'][0].notices[2];
this.count = this.disc1.porints + this.disc2.porints;
this.notice1.redraw('色子1號當(dāng)前點數(shù)為: '+this.disc1.porints+' 點');
this.notice2.redraw('色子2號當(dāng)前點數(shù)為: '+this.disc2.porints+' 點');
this.notice3.redraw('當(dāng)前點數(shù)和為:'+this.count+'點。');
}
Rule.prototype.run = function(){
var str = this.notice3.str;
this.notice3.width = 348;
if(this.integral.length == 0){
if(this.count == 7 || this.count == 11){
str += '你的運氣真好一把就贏了，繼續(xù)加油哦！';
this.notice3.redraw(str);
this.hasNext = false;
return this;
}
if(this.count == 2 || this.count == 3 || this.count == 12){
str += '你也太衰了吧！第一把就輸了，再來一把試試！';
this.notice3.redraw(str)
this.hasNext = false;
return this;
}
if(this.count >=4 && this.count <= 10){
this.integral.push(this.count);
str += '請再拋一次骰子！';
this.notice3.redraw(str);
this.hasNext = true;
return this;
}
}else{
if(this.count == 7 || this.count != this.integral[this.integral.length - 1]){
str += '不好意思，你輸了……！';
this.notice3.redraw(str);
this.hasNext = false;
return this;
}
if(this.count == this.integral[this.integral.length - 1]){
str += '你太厲害了，竟然拋出和上一次一樣的點數(shù)！恭喜你贏了！';
this.notice3.redraw(str);
this.hasNext = false;
return this;
}
}
}
var stage = new Stage('game');
stage.setings = function(){
var x1 = 20,y1 = 20;
var x2 = 210,y2 = 20;
var callBoard = new CallBoard(20,200,stage);
callBoard.add(new Notice(30,220,'色子1號，尚無點數(shù)。',callBoard));
callBoard.add(new Notice(220,220,'色子2號，尚無點數(shù)。',callBoard));
callBoard.add(new Notice(30,240,'當(dāng)前尚無點數(shù)和。',callBoard));
stage.add(new Disc(x1,y1,stage));
stage.add(new Disc(x2,y2,stage));
stage.add(callBoard);
stage.rule = new Rule();
}
stage.setings();
</script>
</body>
</html>
演示圖片
以上所述就是本文的全部內(nèi)容了，希望能夠?qū)Υ蠹覍W(xué)習(xí)js+html5有所幫助。
相關(guān)文章
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼,學(xué)習(xí)js的朋友可以參考下。2011-06-06
基于chosen插件實現(xiàn)人員選擇樹搜索自動篩選功能
這篇文章主要介紹了基于chosen插件實現(xiàn)人員選擇樹搜索自動篩選功能的相關(guān)資料,需要的朋友可以參考下2016-09-09
動態(tài)創(chuàng)建的表格單元格中的事件實現(xiàn)代碼
好久沒有搞網(wǎng)頁了，今天重新弄了一個 ，做個動態(tài)表格，具體的實現(xiàn)代碼，大家可以自己寫吧2008-12-12
下面小編就為大家?guī)硪黄狫S正則替換掉小括號及內(nèi)容的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法
在平常的項目開發(fā)中肯定會遇到同步異步執(zhí)行的問題，這篇文章主要介紹了小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
JavaScript中將秒轉(zhuǎn)換為分鐘和秒,通過將秒數(shù)除以 60 得到整分鐘數(shù),獲取剩余的秒數(shù),本文通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-09-09
多瀏覽器的彈出層效果核心代碼。需要的朋友可以測試下這個是從正在使用的網(wǎng)站中扒下來的。2009-09-09
bootstrap可編輯下拉框jquery.editable-select
這篇文章主要介紹了bootstrap可編輯下拉框jquery.editable-select的相關(guān)資料，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)tab切換的四種方法，并且對每個方法進行了評價，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)瀑布流以及加載效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02