Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 157370
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
canvas实现贪吃蛇游戏

分类： JavaScript

2016-07-01 08:07:03



点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇</title>
  6.     <style>
  7.       *{
  8.           padding:0;
  9.           margin:0;
  10.       }
  11.       #myCanvas{
  12.           position: absolute;
  13.           top:50px;
  14.           left:200px;
  15.       }
  16.       #handle{
  17.         position: absolute;
  18.         top:50px;
  19.         width:400px;
  20.         height: 400px;
  21.         right:100px;
  22.       }
  23.       button{
  24.         position: absolute;
  25.         width: 50px;
  26.         height: 30px;
  27.         font-size: 16px;
  28.         line-height: 30px;
  29.         text-align: center;
  30.       }
  31.       #total{
  32.         color: red;
  33.         font-size: 20px;
  34.         width: 40px;
  35.         text-align: center;
  36.         display: inline-block;
  37.         height: 30px;
  38.         line-height: 30px;
  39.       }
  40.       #right{
  41.         left:100px;
  42.         top:80px;
  43.       }
  44.       #bottom{
  45.         top:110px;
  46.         left: 50px;
  47.       }
  48.       #left{
  49.         top:80px;
  50.       }
  51.       #top{
  52.         left: 50px;
  53.         top:50px;
  54.       }
  55.       #pause,#begin{
  56.         left: 50px;
  57.         top:80px;
  58.         border:1px solid #ccc;
  59.       }
  60.       #begin{
  61.         display: none;
  62.       }
  63.       #restart{
  64.         left: 200px;
  65.         width: 80px;
  66.         height: 30px;
  67.         line-height: 30px;
  68.         color: red;
  69.       }
  70.     </style>
  71. </head>
  72. <body>
  73.     <canvas id="myCanvas" width="600" height="600"></canvas>
  74.   <div id="handle">
  75.       <p>吃掉的数量:<span id="total">0</span><p>
  76.       <button id="left" onclick="keydown(37);">左</button>
  77.       <button id="right" onclick="keydown(39);">右</button>
  78.       <button id="top" onclick="keydown(38);">上</button>
  79.       <button id="bottom" onclick="keydown(40);">下</button>
  80.       <button id="pause">暂停</button>
  81.       <button id="begin">开始</button>
  82.       <button id="restart">重新开始</button>
  83.   </div>
  84.     <script>
  85.   <!--
  86. //思路：1、先画蛇身，再画随机出现的食物。2、蛇身的每一个矩形块的左上角坐标都放在一个数组中，运动中的第一个矩形就是数组的最后一个元素，通过push,unshift,shift操作数组来实现蛇身的绘制。3、判断蛇身是否撞到边界或者自身来判断游戏结束与否
  87.   -->
  88.       var c=document.getElementById('myCanvas');
  89.       var ctx=c.getContext('2d');
  90.       var RW=20,RH=20; //小方格的长宽
  91.       var CW=600,CH=600; //画布长宽
  92.       var cols=30,rows=30; //画布的行数,列数
  93.       var snackL=5; //开始时蛇的长度
  94.       var a=[]; //储存蛇身各个矩形块左上角坐标的数组,
  95.       var x,y; //蛇身的小矩形的左上角坐标
  96.       var goto=3; //蛇运动的方向 0:上，1：下，2：左，3：右
  97.       var foodX,foodY; //随机食物的左上角坐标
  98.       var timer; //游戏定时器
  99.       var total=0; //吃掉的总数
  100.       var speed=150; //蛇运动的速度
  101.       function draw(){
  102.         ctx.clearRect(0,0,CW,CH);
  103.           //画方格
  104.           for(var i=0;i<=rows;i++){
  105.               ctx.beginPath(); //没有beginPath,会重复线条导致线条变粗
  106.               ctx.moveTo(0,i*RH);
  107.               ctx.lineTo(CW,i*RH);
  108.               ctx.strokeStyle="gray";
  109.               ctx.stroke();
  110.           }
  111.           for(var i=0;i<=cols;i++){
  112.               ctx.beginPath();
  113.               ctx.moveTo(i*RW,0);
  114.               ctx.lineTo(i*RW,CH);
  115.               ctx.stroke();
  116.           }
  117.         
  118.         //画蛇
  119.         for(i=0;i<snackL;i++){
  120.           ctx.beginPath();
  121.             ctx.moveTo(a[i].x,a[i].y);
  122.           ctx.lineTo(a[i].x+RW,a[i].y);
  123.           ctx.lineTo(a[i].x+RW,a[i].y+RH);
  124.           ctx.lineTo(a[i].x,a[i].y+RH);
  125.           ctx.closePath(); //闭合路线画出矩形
  126.           ctx.strokeStyle="white";
  127.           ctx.stroke();
  128.           ctx.fillStyle="blue";
  129.           ctx.fillRect(a[i].x,a[i].y,RW,RH);
  130.         }

  132.           ctx.beginPath(); //画出随机食物
  133.           ctx.moveTo(foodX,foodY);
  134.           ctx.lineTo(foodX+RW,foodY);
  135.           ctx.lineTo(foodX+RW,foodY+RH);
  136.           ctx.lineTo(foodX,foodY+RH);
  137.           ctx.strokeStyle="green";
  138.           ctx.stroke();
  139.           ctx.closePath();
  140.           ctx.fillStyle="red";
  141.           ctx.fillRect(foodX,foodY,RW,RH);
  142.       }
  143.       function random(){ //产生随机食物坐标
  144.           foodX=Math.floor(Math.random()*30)*RW;
  145.           foodY=Math.floor(Math.random()*30)*RH;
  146.       }
  147.       function init(){
  148.         for(var i=0;i<snackL;i++){
  149.           a[i]={x:i*RW,y:0};
  150.         }
  151.           random();
  152.           draw();
  153.       }
  154.       init(); //游戏初始化
  155.       timer=setInterval(snackM,speed);
  156.       function snackM(){
  157.         switch(goto){
  158.           case 0: //上
  159.                 a.push({x:a[snackL-1].x,y:a[snackL-1].y-RH}); //向上移动时，a数组后面添加一个元素
  160.           break;
  161.           case 1: //下
  162.                 a.push({x:a[snackL-1].x,y:a[snackL-1].y+RH}); //向下移动时，a数组后面添加一个元素
  163.           break;
  164.           case 2: //左
  165.                a.push({x:a[snackL-1].x-RW,y:a[snackL-1].y}); //向左移动时,a数组后面添加一个元素(蛇运动的第一个为数组a中最后一个)
  166.           break;
  167.           case 3: //右
  168.                a.push({x:a[snackL-1].x+RW,y:a[snackL-1].y}); //向右移动时，a数组后面添加一个元素
  169.           break;
  170.         }
  171.         a.shift();
  172.         draw();
  173.         eat();
  174.         die();
  175.       }

  177.       document.onkeydown=function(e){ //键盘改变蛇运动方向
  178.          var e=e||window.event;
  179.          // if(e.keyCode==37){ //左
  180.          // if(goto!=3&&goto!=2){goto=2}
  181.          // }
  182.          // if(e.keyCode==39){ //右
  183.          // if(goto!=3&&goto!=2){goto=3};
  184.          // }
  185.          // if(e.keyCode==38){ //上
  186.          // if(goto!=1&&goto!=0){goto=0}
  187.          // }
  188.          // if(e.keyCode==40){ //下
  189.          // if(goto!=0&&goto!=1){goto=1}
  190.          // }
  191.          keydown(e.keyCode);
  192.       }
  193.       function keydown(keyCode){ //网页按钮事件
  194.         switch(keyCode){
  195.           case 37:if(goto!=3&&goto!=2){goto=2};break;
  196.           case 39:if(goto!=3&&goto!=2){goto=3};break;
  197.           case 38:if(goto!=1&&goto!=0){goto=0};break;
  198.           case 40: if(goto!=0&&goto!=1){goto=1};break;
  199.         }
  200.       }
  201.       function eat(){
  202.         if(a[snackL-1].x==foodX&&a[snackL-1].y==foodY){
  203.           total++;
  204.           document.getElementById("total").innerHTML=total;
  205.           snackL++;
  206.           a.unshift({x:1,y:1}) //添加的元素在下次执行snackM()时又被删除了，这里可以在头部添加任何值
  207.           random();
  208.         }
  209.       }
  210.       function die(){
  211.         if(a[snackL-1].x>CW-RW||a[snackL-1].x<0||a[snackL-1].y>CH-RH||a[snackL-1].y<0){
  212.           clearInterval(timer); //蛇撞到边界时
  213.           alert("游戏结束");
  214.           return;
  215.         }
  216.         for(var i=1;i<snackL-1;i++){ //蛇撞到除了第一个矩形外的其他矩形时
  217.           if(a[snackL-1].x==a[i].x&&a[snackL-1].y==a[i].y){
  218.             clearInterval(timer);
  219.             alert("游戏结束");
  220.             return;
  221.           }
  222.         }
  223.       }
  224.       document.getElementById('begin').onclick=function(){
  225.          this.style.display="none";
  226.          document.getElementById('pause').style.display="block";
  227.          timer=setInterval(snackM,speed);

  229.       }
  230.       document.getElementById('pause').onclick=function(){
  231.         this.style.display="none";
  232.         document.getElementById('begin').style.display="block";
  233.         clearInterval(timer);
  234.       }
  235.       document.getElementById('restart').onclick=function(){
  236.         window.history.go(0); //返回上一个网页
  237.       }
  238.     </script>
  239. </body>
  240. </html>


阅读(2228) | 评论(0) | 转发(0) |
0

上一篇：JS之call和apply用法二三例

下一篇：Jquery动画实现NBA2015-2016比赛回顾图

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6