HTML5 貪吃蛇 Snake Game代碼

2024-09-05 12:21:09

字體：大中小

來源：轉載

供稿：網友

基于HTML5的網頁貪吃蛇游戲—— Snake Game代碼，較之前的在技術上延伸至HTML5，可作為一個很不錯的HTML5網頁游戲編程實例。當然了，JavaScript在本代碼中也起到了關鍵作用，二者共同合力實現了這款貪吃蛇。

<!documentTYPE html><html lang="en"><head><meta charset="utf-8" /><title>HTML5 貪吃蛇 Snake Game</title><style type="text/css">body {text-align:center;}canvas { border:5px dotted #ccc; }h1 { font-size:50px; text-align: center; margin: 0; padding-bottom: 25px;}</style><script type="text/javascript">    var snake_x;//記錄當前蛇的各元素的x坐標數組    var snake_y; //記錄當前蛇的各元素的y坐標數組    var snake_x2=[];//用于克隆snake_x，記錄上一步蛇的位置    var snake_y2=[];//用于克隆snake_y，記錄上一步蛇的位置    var snake_len;//蛇長度    var eleWidth=10;//蛇的每一個元素的長度    var food_x;//食物的x坐標    var food_y;//食物的y坐標    var can;//畫布    var context;    var cur_dir;//蛇的運行方向    var move1,move2;//蛇的初始定時器,用于清除    var timeOut=200;//定時器的時長    var score;//顯示分數的元素    function play_game() //開始游戲    {        can=document.getElementById("playArea");        context=can.getContext("2d");        score=document.getElementById("span_score");        span_score.innerText="0";        snake_x=[10,9,8,7,6,5,4,3,2,1];        snake_y=[10,10,10,10,10,10,10,10,10,10];        snake_len=snake_x.length;        cur_dir=2;        context.clearRect(0,0,300,300);	clearInterval(move1);        moveSnake(cur_dir);        placeFood();        move1=setInterval("moveSnake("+cur_dir+")",timeOut);    }    //畫蛇    function drawSnake()    {        if(snake_x[0]==300/eleWidth||snake_x[0]==-1||snake_y[0]==300/eleWidth||snake_y[0]==-1)        {            clearInterval(move1);            snake_x.length=snake_y.length=0;            alert("YOU ARE OVER!");            return;        }        context.fillStyle="black";        context.strokeStyle="white";        for(var i=0;i<snake_len;i++)        {            context.clearRect(snake_x2[i]*eleWidth,snake_y2[i]*eleWidth,eleWidth,eleWidth);            context.strokeRect(snake_x[i]*eleWidth,snake_y[i]*eleWidth,eleWidth,eleWidth);            context.fillRect(snake_x[i]*eleWidth,snake_y[i]*eleWidth,eleWidth,eleWidth);        }    }    //移動蛇    function moveSnake(curDir)//移動蛇    {        var add_x,add_y;//吃了食物之后需要在尾部追加的坐標        snake_x2=snake_x.concat();        snake_y2=snake_y.concat();        switch(curDir){            case 1 :   //上                snake_y.pop();                snake_y.splice(0,0,snake_y2[0]-1);                snake_x.pop();                snake_x.splice(0,0,snake_x2[0]);                break;            case 2 : //右                snake_x.pop();                snake_x.splice(0,0,snake_x[0]+1);                snake_y.pop();                snake_y.splice(0,0,snake_y2[0]);                break;            case 3 : //下                snake_y.pop();                snake_y.splice(0,0,snake_y2[0]+1);                snake_x.pop();                snake_x.splice(0,0,snake_x2[0]);                break;            case 0 : //左                snake_x.pop();                snake_x.splice(0,0,snake_x[0]-1);                snake_y.pop();                snake_y.splice(0,0,snake_y2[0]);                break;        }        addSnake();        drawSnake();    }    document.onkeydown = function(e) {  //改變蛇方向        clearInterval(move1);        clearInterval(move2);        var code = e.keyCode - 37;        switch(code){            case 1 ://上                cur_dir=1;                break;            case 2 ://右                cur_dir=2;                break;            case 3 ://下                cur_dir=3;                break;            case 0 ://左                cur_dir=0;                break;        }        move1=setInterval("moveSnake("+cur_dir+")",timeOut);    }    //擺放食物    function placeFood()    {        food_x=Math.floor(Math.random()*300/eleWidth);//食物的x軸坐標        food_y=Math.floor(Math.random()*300/eleWidth);//食物的y軸坐標        if(snake_x.indexOf(food_x)==-1&&snake_y.indexOf(food_y)==-1)        {            context.fillStyle="black";            context.strokeStyle="white";            context.strokeRect(food_x*eleWidth,food_y*eleWidth,eleWidth,eleWidth);            context.fillRect(food_x*eleWidth,food_y*eleWidth,eleWidth,eleWidth);        }        else        {            placeFood();        }    }    //吃到食物，追加蛇的長度    function addSnake()    {        if(snake_x[0]==food_x&&snake_y[0]==food_y)        {            snake_x.push(snake_x2[snake_len-1]);            snake_y.push(snake_y2[snake_len-1]);            context.clearRect(food_x*eleWidth,food_y*eleWidth,eleWidth,eleWidth)            placeFood();            snake_len++;            span_score.innerText=parseInt(span_score.innerText)+100;        }    }    function stop_game()    {        clearInterval(move1);    }    function continue_game()    {        move1=setInterval("moveSnake("+cur_dir+")",timeOut);    }</script></head><body><h1>HTML5貪吃蛇 Snake Game</h1><canvas id="playArea" width="300" height="300">不好意思，您的瀏覽器不支持 HTML5</canvas><div style="text-align: center"><input type="button" value="開始" onclick="play_game()" style="font-weight: bold"/><input type="button" value="停止" onclick="stop_game()" style="font-weight: bold"/><input type="button" value="繼續" onclick="continue_game()" style="font-weight: bold"/><span style="font-weight: bold">得分:</span><span style="color:red" id="span_score"></SPAN>
</div>
</div>
<div   id="70qarhlowxag"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="70qarhlowxag"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557816.html'>HTML5 Canvas API實現拼圖游戲</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557818.html'>網頁24點游戲</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="70qarhlowxag"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流