最简单的HTML5游戏——贪吃蛇

最新推荐文章于 2024-01-18 00:56:53 发布

零点五度

最新推荐文章于 2024-01-18 00:56:53 发布

阅读量5k

点赞数 4

分类专栏： web前端文章标签： javascript html 贪吃蛇

本文链接：https://blog.csdn.net/qpfjalzm123/article/details/47954969

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="UTF-8"/>
<title>贪吃蛇</title>
</head>

<body>
   <canvas id="canvas" width="1000" height="700"></canvas>
   <div>
       <input id="switch" type="button" value="开始" οnclick="clickSwitch()"></input><br/>
       <input id="content" type="text" value="0"></input>
   </div>
</body>

<script type="text/javascript">
   const WIDTH = 1000;
   const HEIGHT = 700;
   const SNACK_WIDTH = 20;
   const SNACK_HEIGHT = 20;
   //移动时间间隔
   const TIME_MOVE = 300;
   //食物刷新时间
   const TIME_FOOD = 5000;
   //食物总量
   const TOTAL_FOOD = 200;
   //石头刷新时间
   const TIME_STONE = 8000;
   //石头总量
   const TOTAL_STONE = 300;

   var switchStatus = 0;
   var changeMove = "right";
   var currentMove = "right";
   //所有被用的位置
   var points = new Array();
   var snacks = new Array();
   var foods = new Array();
   var stones = new Array();
   var moveing = false;
   var timeMoveId, timeFoodId, timeStoneId;

   window.onload = function () {
       createGround();
   };

   //捕获按的哪个键
   function keyDown(event) {
       if (event.keyCode == "87") {
           //按下W键
           changeMove = "up";
       } else if (event.keyCode == "68") {
           //按下D键
           changeMove = "right";
       } else if (event.keyCode == "83") {
           //按下S键
           changeMove = "down";
       } else if (event.keyCode == "65") {
           //按下A键
           changeMove = "left";
       }
    }

   function handlePoints(x, y, type) {
       if (0 == type) {
           points.push(x+y*WIDTH);
       } else {
           var index = points.indexOf(x+y*WIDTH);
           if (index != -1) {
               points.splice(index, 1);
           }
       }
   }

   //贪吃蛇
   function snack(x, y) {
       this.x = x;
       this.y = y;
   }

   //食物
   function food(x, y) {
       this.x = x;
       this.y = y;
   }

   //石头
   function stone(x, y) {
       this.x = x;
       this.y = y;
   }

   //开关操作
   function clickSwitch() {
       if (switchStatus == 0 || switchStatus == 2) {
           document.getElementById("switch").value = "暂停";
           if (switchStatus == 0) {
               //开始
               play();
           }
           switchStatus = 1;
       } else if (switchStatus == 1) {
           document.getElementById("switch").value = "继续";
           switchStatus = 2;
       }
   }

   //碰撞判定并操作
   function judge(x, y) {
       /*** 判断是否撞上边界 ***/
       if (x < 0 || x >= WIDTH || y < 0 || y >= HEIGHT) {
           end();
           return;
       }

       var i;
       /*** 判断是否撞上自己 ***/
       for (i = 1; i < snacks.length; i++) {
           if (snacks[0].x == snacks[i].x && snacks[0].y == snacks[i].y) {
               end();
               return;
           }
       }

       /*** 判断是否撞上石头 ***/
       for (i = 0; i < stones.length; i++) {
           if (snacks[0].x == stones[i].x && snacks[0].y == stones[i].y) {
               end();
               return;
           }
       }

       /*** 判断是否撞上食物 ***/
      var flag = false;
       for (i = 0; i < foods.length; i++) {
           if (x == foods[i].x && y == foods[i].y) {
               flag = true;
               foods.splice(i, 1);
           }
       }
       var newSnack = new snack(x, y);
       snacks.unshift(newSnack);
       if (!flag) {
           var p = snacks.pop();
           handlePoints(p.x, p.y, 1);
       }
       document.getElementById("content").value = "x:"+snacks[0].x+" y:"+snacks[0].y+" length:"+snacks.length;

       refresh();
   }

   //移动贪吃蛇
   function move() {
       if(moveing == false && switchStatus == 1) {
           moveing = true;
           if ((currentMove != "right" && changeMove == "left") || (currentMove == "left" && changeMove == "right")) {
               currentMove = "left";
               judge(snacks[0].x-SNACK_WIDTH, snacks[0].y);
           } else if ((currentMove != "down" && changeMove == "up") || (currentMove == "up" && changeMove == "down")) {
               currentMove = "up";
               judge(snacks[0].x, snacks[0].y-SNACK_HEIGHT);
           } else if ((currentMove != "left" && changeMove == "right") || (currentMove == "right" && changeMove == "left")) {
               currentMove = "right";
               judge(snacks[0].x+SNACK_WIDTH, snacks[0].y);
           } else if ((currentMove != "up" && changeMove == "down") || (currentMove == "down" && changeMove == "up")){
               currentMove = "down";
               judge(snacks[0].x, snacks[0].y+SNACK_HEIGHT);
           }
           changMove = currentMove;
       }
       moveing = false;
   }

   //创建地图
   function createGround() {
       var canvas = document.getElementById("canvas");
       var draw = canvas.getContext('2d');
       //清除原图形
       draw.clearRect(0, 0, WIDTH, HEIGHT);
       draw.strokeStyle = "red";
       draw.strokeRect(0, 0, WIDTH, HEIGHT);
   }

   //创建食物
   function createFood() {
       if (foods.length < TOTAL_FOOD) {
           var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
           var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
           if (points.indexOf(x+y*WIDTH) == -1) {
               var newFood = new food(x, y);
               //alert(newFood.x + "****" + newFood.y);
               var canvas = document.getElementById("canvas");
               var draw = canvas.getContext('2d');
               draw.fillStyle = "green";
               draw.fillRect(x, y, SNACK_WIDTH, SNACK_HEIGHT);
               foods.push(newFood);
               handlePoints(x, y, 0);
           }
       }
   }

   //创建石头
   function createStone() {
       if (stones.length < TOTAL_STONE) {
           var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
           var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
           if (points.indexOf(x+y*WIDTH) == -1) {
               var newStone = new stone(x, y);
               var canvas = document.getElementById("canvas");
               var draw = canvas.getContext('2d');
               draw.fillStyle = "#663300";
               draw.beginPath();
               draw.arc(x+SNACK_WIDTH*0.5, y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);
               draw.closePath();
               draw.fill();
               stones.push(newStone);
               handlePoints(x, y, 0);
           }
       }
   }

   //刷新场景
   function refresh() {
       var canvas = document.getElementById("canvas");
       var draw = canvas.getContext('2d');
       //清除原图形
       draw.clearRect(1, 1, WIDTH-2, HEIGHT-2);

       /*** 边界 ***/
       draw.strokeStyle = "red";
       draw.strokeRect(0, 0, WIDTH, HEIGHT);

       var i;
       /*** 食物   ***/
       draw.fillStyle = "green";
       for (i = 0; i < foods.length; i++) {
           draw.fillRect(foods[i].x, foods[i].y, SNACK_WIDTH, SNACK_HEIGHT);
       }

       /*** 石头 ***/
       draw.fillStyle = "#663300";
       for (i = 0; i < stones.length; i++) {
           draw.beginPath();
           draw.arc(stones[i].x+SNACK_WIDTH*0.5, stones[i].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);
           draw.closePath();
           draw.fill();
       }

       /*** 贪吃蛇    ***/
       draw.fillStyle = "blue";
       draw.beginPath();
       //圆心x坐标|圆心y坐标|半径|始|PI为圆周率，Math.PI*2为画圆|true为时针方向：逆时针，0为顺时针
       draw.arc(snacks[0].x+SNACK_WIDTH*0.5, snacks[0].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);
       draw.closePath();
       draw.fill();
       for (i = 1; i < snacks.length; i++) {
           draw.fillRect(snacks[i].x, snacks[i].y, SNACK_WIDTH, SNACK_HEIGHT);
       }
   }

   //游戏开始
   function play() {
       createGround();

       for (var i = 2; i > 0; i--) {
           var newSnack = new snack(SNACK_WIDTH*i, SNACK_HEIGHT);
           snacks.push(newSnack);
           handlePoints(newSnack.x, newSnack.y, 0);
       }
       refresh();

       document.onkeydown = keyDown;
       timeMoveId = setInterval(move, TIME_MOVE);
       timeFoodId = setInterval(createFood, TIME_FOOD);
       timeStoneId = setInterval(createStone, TIME_STONE);
   }

   //游戏结束
   function end() {
       clearInterval(timeMoveId);
       clearInterval(timeFoodId);
       clearInterval(timeStoneId);
       switchStatus = 0;
       changeMove = "right";
       currentMove = "right";
       points.length = 0;
       snacks.length = 0;
       foods.length = 0;
       stones.length = 0;
       moveing = false;
       document.getElementById("switch").value = "开始";
       document.getElementById("content").value = "游戏结束";
       alert("游戏结束");
   }

</script>

</html>

零点五度

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
最简单的HTML5游戏——贪吃蛇

贪吃蛇 const WIDTH = 1000; const HEIGHT = 700; const SNACK_WIDTH = 20; const SNACK_HEIGHT = 20; //移动时间间隔 const TIME_MOVE =
复制链接

扫一扫