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 class=page1>
<p align="center" class="pageLink"></p>
</div>

<div 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 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">

学习交流