Rumah > hujung hadapan web > Tutorial H5 > [HTML5代码艺术]17行代码的贪吃蛇小游戏

[HTML5代码艺术]17行代码的贪吃蛇小游戏

黄舟
Lepaskan: 2017-03-02 13:19:35
asal
2384 orang telah melayarinya

一个贪吃蛇小游戏

javascrpt有效代码17行
加上html代码的话,共25行

运行方法chrome或者firefox

测试连接
http://lufylegend.com/html5/lufylegend/tcs.html

完整代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="240" height="240"

style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var ctx=document.getElementById("myCanvas").getContext("2d"),r = [{x:10,y:9},{x:10,y:8}],co=40,e=null;

ctx.shadowBlur=20,ctx.shadowColor="black";

setInterval(function(){

if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;

e!=null&&((co==40&&r[0].x==e.x&&r[0].y+1==e.y)||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)||

(co==37&&r[0].x-1==e.x&&r[0].y==e.y)||(co==39&&r[0].x+1==e.x&&r[0].y==e.y))?(r.unshift(e),e=null,r.unshift(r.pop())):

(r.unshift(r.pop()));

(co==40 || co==38)?(r[0].x=r[1].x,r[0].y=r[1].y+(co==40?1:-1)):(r[0].x=r[1].x+(co==39?1:-1),r[0].y=r[1].y);

ctx.clearRect(0,0,240,240);

if(e)ctx.fillRect(e.x*10,e.y*10,10,10);

for(var i=0;i<r.length;i++)ctx.fillRect(r[i].x*10,r[i].y*10,10,10);

while(e==null || check(e))e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};

if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)alert("game over\nYou get ["+(r.length-2)+"]");

},100);

document.onkeyup = function(event){co=event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)?event.keyCode:co;}

function check(e,j){

for(var i=0;i<r.length;i++)if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;

return false;

}

</script>

</body>

</html>

Salin selepas log masuk

有几个朋友想要注释,我添加了简单的注释说明,看下面

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>

//r数组表示蛇 ; co表示蛇前进的方向,默认向下 ; e表示食物

var ctx=document.getElementById("myCanvas").getContext("2d"),r = [{x:10,y:9},{x:10,y:8}],co=40,e=null;

//给蛇加上阴影效果

ctx.shadowBlur=20,ctx.shadowColor="black";

//循环,间隔为100毫秒

setInterval(function(){

//游戏是否已经结束

if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;

//如果有食物,则根据蛇前进的方向判断是否吃到了食物,并且将蛇数组中最后一个元素换到首部

e!=null&&((co==40&&r[0].x==e.x&&r[0].y+1==e.y)||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)||

(co==39&&r[0].x+1==e.x&&r[0].y==e.y))?(r.unshift(e),e=null,r.unshift(r.pop())):(r.unshift(r.pop()));

//根据方向,重新设定蛇数组首元素的坐标,从而进行移动

(co==40 || co==38)?(r[0].x=r[1].x,r[0].y=r[1].y+(co==40?1:-1)):(r[0].x=r[1].x+(co==39?1:-1),r[0].y=r[1].y);

//清空屏幕

ctx.clearRect(0,0,240,240);

//如果有食物,则绘制食物

if(e)ctx.fillRect(e.x*10,e.y*10,10,10);

//绘制蛇

for(var i=0;i<r.length;i++)ctx.fillRect(r[i].x*10,r[i].y*10,10,10);

//如果没有食物,则在随机位置上加入一粒食物

while(e==null || check(e))e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};

//判断游戏是否结束

if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)alert("game over\nYou get ["+(r.length-2)+"]");

},100);

//加入键盘事件,用方向键来控制蛇前进的方向

document.onkeyup = function(event){co=event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)?event.keyCode:co;}

//判断指定位置是否与蛇重叠

function check(e,j){

for(var i=0;i<r.length;i++)if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;

return false;

}

</script>

</body>

</html>

Salin selepas log masuk

鉴于有些朋友感觉代码读起来费劲,下面再提供一个经过格式调整后的代码,对应上面代码的各部分功能完全相同,只是写法不一样罢了

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var ctx=document.getElementById("myCanvas").getContext("2d");

var r = [{x:10,y:9},{x:10,y:8}];

var co=40;

var e=null;

ctx.shadowBlur=20;

ctx.shadowColor="black";

function onframe(){

    if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;

    if(e){

        if((co==40&&r[0].x==e.x&&r[0].y+1==e.y)

            ||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)

            ||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)

            ||(co==39&&r[0].x+1==e.x&&r[0].y==e.y)){

            r.unshift(e);

            e=null;

        }

    }

    r.unshift(r.pop());

    switch(co){

        case 37:

            r[0].x = r[1].x - 1;

            r[0].y = r[1].y;

            break;

        case 38:

            r[0].x = r[1].x;

            r[0].y = r[1].y - 1;

            break;

        case 39:

            r[0].x = r[1].x + 1;

            r[0].y = r[1].y;

            break;

        case 40:

            r[0].x = r[1].x;

            r[0].y = r[1].y + 1;

            break;

    }

    ctx.clearRect(0,0,240,240);

    if(e)ctx.fillRect(e.x*10,e.y*10,10,10);

    for(var i=0;i<r.length;i++){

        ctx.fillRect(r[i].x*10,r[i].y*10,10,10);

    }

    while(e==null || check(e)){

        e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};

    }

    if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){

        alert("game over\nYou get ["+(r.length-2)+"]");

    }

}

setInterval(onframe,100);

document.onkeyup = function(event){

    if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)){

        co = event.keyCode;

    }

}

function check(e,j){

    for(var i=0;i<r.length;i++){

        if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;

    }

    return false;

}

</script>

</body>

</html>

Salin selepas log masuk

 以上就是[HTML5代码艺术]17行代码的贪吃蛇小游戏的内容,更多相关内容请关注PHP中文网(www.php.cn)!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan