【移動(dòng)應(yīng)用開發(fā)技術(shù)】javascript和HTML5利用canvas構(gòu)建猜牌游戲_第1頁(yè)
【移動(dòng)應(yīng)用開發(fā)技術(shù)】javascript和HTML5利用canvas構(gòu)建猜牌游戲_第2頁(yè)
【移動(dòng)應(yīng)用開發(fā)技術(shù)】javascript和HTML5利用canvas構(gòu)建猜牌游戲_第3頁(yè)
全文預(yù)覽已結(jié)束

付費(fèi)下載

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

【移動(dòng)應(yīng)用開發(fā)技術(shù)】javascript和HTML5利用canvas構(gòu)建猜牌游戲

/upload/information/20200310/42/108938.jpg<!DOCTYPE

html>

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/>

<title></title>

<script

type="text/javascript">

var

data

=

new

Array(27);

var

canvas;

var

context;

var

time

=

0;

var

random

=

new

Array(5);//自定義二維亂序表

random[0]

=

[5,

2,

8,

7,

1,

3,

4,

6,

0];

random[1]

=

[2,

5,

8,

0,

4,

6,

3,

7,

1];

random[2]

=

[6,

7,

2,

8,

0,

1,

5,

3,

4];

random[3]

=

[2,

1,

6,

3,

5,

4,

7,

0,

8];

random[4]

=

[0,

1,

2,

3,

4,

5,

6,

7,

8];

function

start()

{

var

guess

=

new

Array();

var

count

=

0;

while

(count

<

27)

{//生成隨機(jī)的27張牌

var

temp

=

parseInt(Math.random()

*

54)

+

1;

for

(var

i

=

0;

i

<

count

+

1;

i++)

{

if

(temp

==

guess[i])

{//如果重復(fù)就不要

temp

=

100;

break;

}

}

if

(temp

!=

100)

{

guess[count]

=

temp;

data[count]

=

new

Image();

data[count].src

=

"p_w_picpaths/"

+

temp

+

".gif";

count++;

}

}

}

function

draw()

{

canvas

=

document.getElementById("canvas");

context

=

canvas.getContext("2d");

var

temp1

=

parseInt(Math.random()

*

5);

var

temp2

=

parseInt(Math.random()

*

5);

var

temp3

=

parseInt(Math.random()

*

5);

for

(var

i

=

0;

i

<

9;

i++)

{//亂序排序方法

context.drawImage(data[random[temp1][i]

*

3

+

0],

20,

i

*

30

+

40);

context.drawImage(data[random[temp2][i]

*

3

+

1],

20

+

100,

i

*

30

+

40);

context.drawImage(data[random[temp3][i]

*

3

+

2],

20

+

200,

i

*

30

+

40);

}

}

function

play(index)

{

if

(time

>=

3)

alert("請(qǐng)點(diǎn)擊再來一次");

for

(var

i

=

0;

i

<

(3

-

time)

*

3;

i++)

{

var

temp

=

data[i];

data[i]

=

data[i

*

3

+

index

-

1];

data[i

*

3

+

index

-

1]

=

temp;

}

time++;

if

(time

>=

3)

{

context.drawImage(data[0],

400,

50);

return;

}

draw();

}

start();

</script>

<style

type="text/css">

input

{

margin-right:

60px;

}

</style>

</head>

<body

onload="draw()">

<p>

讓我猜猜你心中的牌<br

/>

首先從列表中選擇一張你心目中的牌，并且記住它，然后選擇它所在的列，點(diǎn)擊三次我將會(huì)猜出你心目中的牌。<br

/>

來試試吧，我懂你的！<br

/>

如果遇到牌無(wú)法顯示，或者顯示不全，請(qǐng)刷新.如果你的瀏覽器不支持HTML5，請(qǐng)更換瀏覽器，例如chrome，火狐等

</p>

<canvas

width="700"

height="400"

id="canvas">你的瀏覽器不支持HTML5，請(qǐng)更換瀏覽器，例如chrome，火狐等</canvas>

<br

/>

<input

type="button"

value="第一列"

onclick="play(1)"

/>

<input

type="button"

value="第二列"

onclick

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論