JavaScript实现网页版贪吃蛇游戏

本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head><title>贪吃蛇</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var canv=document.getElementById("canvas");
var ctx=canv.getContext("2d");
var score=0;
//定义一个方块的构造函数
var Block=function(col,row,size)
{
  this.col=col;
  this.row=row;
  this.size=size;
    };
//定义Block函数的原型方法draw;
Block.prototype.draw =function()
{
  ctx.fillRect(this.col*this.size,this.row*this.size,this.size,this.size)
   }
//定义对象蛇
var snake ={
  body:[
    new Block(20,20,10),
    new Block(20,21,10),
    new Block(20,22,10)
   ],
  direction:"right",
  };

//定义画蛇的函数
snake.draw=function()
{
   for(var i=0;i<this.body.length;i++)
  {
     this.body[i].draw();
        }
   };

snake.move = function()
         {
          var head = this.body[0];

if(snake.direction=="right")
     {
     var newhead=new Block(head.col+1,head.row,head.size)
            }

  if(snake.direction =="left")

     {
     var newhead = new Block(head.col-1,head.row,head.size);
           }
 if(snake.direction=="up")
     {
     var newhead=new Block(head.col,head.row-1,head.size)
           }
    if(snake.direction=="down")
     {
     var newhead=new Block(head.col,head.row+1,head.size)
           }
          if(newhead.col<0 || newhead.col>39 )
          {
           clearInterval(intervalId);
           gameover();
          }

          if(newhead.row<0 || newhead.row>39 )
          {
           clearInterval(intervalId);
           gameover();
          }
 for(var i=0;i<this.body.length;i++)
{
    if(this.body[i].col==newhead.col &&this.body[i].row==newhead.row)
  {
    clearInterval(intervalId);
    gameover();
      }
          }
     this.body.unshift(newhead);
     if(newhead.col==apple.posX &&newhead.row==apple.posY)
{
    score=score+100;
    while(true)
  {
     var checkApple =false;
     apple.posX=Math.floor(Math.random()*40);
     apple.posY=Math.floor(Math.random()*40);
     for(var i=0; i<this.body.length;i++)
   {
     if(this.body[i].col==apple.posX &&this.body[i].row==apple.posY)
          checkApple=true;
                        }
       if(!checkApple)
       break;
      }
  }
else{
     this.body.pop();
        }
         };
//创建苹果对象
var apple={
    posX:Math.floor(Math.random()*40),
    posY:Math.floor(Math.random()*40),
    sizeR:5
}
//画苹果函数
apple.draw=function()
{
  ctx.fillStyle="Green";
  ctx.beginPath();
  ctx.arc(this.posX*10+5,this.posY*10+5,5,0,Math.PI*2,false);
  ctx.fill();
  ctx.fillStyle="Black";
     };
//结束
var gameover=function()
{
  ctx.font="60px Comic Sans MS";
  ctx.textAlign="center";
  ctx.textBaseline="middle";
  ctx.fillText("GAME OVER!",200,200)
    };
//定时功能
var intervalId=setInterval (function ()
{
   ctx.clearRect(0,0,400,400);
   ctx.font="20px Arial";
   ctx.fillText("Score:"+score,5,15);
   snake.draw();
   snake.move();
   apple.draw();
   ctx.strokeRect(0,0,400,400);
    },200);
//贪吃蛇的按键控制
$("body").keydown(function(event)
{
   console.log(event.keyCode);
    if(event.keyCode==37 &&snake.direction!="right")
     {
    snake.direction="left";
         }
    if(event.keyCode==38 &&snake.direction!="down")
     {
    snake.direction="up";
        }
    if(event.keyCode==39 &&snake.direction!="left")
     {
     snake.direction="right";
         }
     if(event.keyCode==40 &&snake.direction!="up")
     {
     snake.direction="down";
         }
              }
);
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript 精美贪吃蛇实现流程

    目录 一.创建html结构 二.创建表格 三.创建蛇头.蛇身 四.创建食物 五.让蛇动起来 六.控制蛇的方向 七.完整代码 index.html Game.js Snake.js Food.js 八.图片 九.总结 这篇文章不简单!! 今天博主呕心沥血写了一个贪吃蛇的小游戏,整个过程从无到有简直扣人心弦. 接下来本博主就来好好说到说到这个过程!! 话不多说,我们还是先来看看最后的呈现效果吧. 看完了才知道什么叫做操作,简直传奇!! 接下来不吹牛来讲讲实际操作 ! 首先我们要知道所谓的贪吃蛇无非就

  • 原生js实现简单贪吃蛇小游戏

    本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 先上图 话不多说,代码奉上,喜欢的请留下你的小星星♥(ˆ◡ˆԅ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial

  • JavaScript实现贪吃蛇游戏

    本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 通过JavaScript,我们可以实现贪吃蛇游戏,具体功能如下: (1)通过按上下左右键来改变蛇的移动方向 (2)若蛇撞到自己,则游戏结束 (3)蛇移动出地图边缘时,会从地图的另一边进来 (4)长按方向键,蛇加速移动 (5)蛇吃到食物后,重新生成食物 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <met

  • javascript实现贪吃蛇小游戏思路

    javascript小游戏贪吃蛇实现思路讲解(完整代码实现),供大家参考,具体内容如下 效果流程 1.首先我们要操作的canvas <!doctype html> <html> <head> <meta charset="utf-8"> <title>贪吃蛇</title> </head> <body> <canvas id="canvas"></can

  • JavaScript贪吃蛇的实现代码

    本文实例为大家分享了JavaScript实现贪吃蛇的具体代码,供大家参考,具体内容如下 首先我们要确定贪吃蛇应有的功能 1.通过键盘的上下左右控制蛇的移动方向 2.边界判定,即蛇头超出边界则游戏结束 3.碰撞判定,即蛇头和食物块发生触碰 4.吃到食物积分加1 具体实现 一.html代码 <div class="container"> <!--小蛇移动的操场--> <div id="playground"> <!--小蛇--&

  • 原生js编写贪吃蛇小游戏

    本文实例为大家分享了js编写贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 刚学完js模仿着教程,把自己写的js原生小程序. HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

  • 用js编写简单的贪吃蛇小游戏

    本文实例为大家分享了js编写简单的贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 代码如下: HTML 5 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n

  • JavaScript实现经典贪吃蛇游戏

    本文实例为大家分享了JavaScript实现经典贪吃蛇游戏的具体代码,供大家参考,具体内容如下 主要使用单例模式,所有元素动态创建: 1.创建地图 var Map; function map(){ this.mapp=null; this.makemap=function(){ this.mapp=document.createElement ("div"); this.mapp.className ="mymap"; document.body.appendChi

  • js实现贪吃蛇游戏含注释

    本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 两个小时完成的,有点简陋. 直接看效果.打开调试面板,在resource面板,新建snippet 粘贴以下代码,右键snippet,run. clearInterval(timer); document.body.innerHTML = ""; //每秒移动多少格 let speed = 10; let speedUpMul = 3; //是否能穿墙 let isThroughTheWall = true; /

  • JavaScript实现网页版贪吃蛇游戏

    本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head><title>贪吃蛇</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <s

  • js实现网页版贪吃蛇游戏

    使用原生 js 实现贪吃蛇小游戏,首先这个 小游戏的目录结构如下: 有 贪吃蛇 , 食物 ,地图 ,还有 游戏 当我们在浏览器打开 index.html 的时候,会出现 移动的小蛇 ,随机生成的食物(这里只有一个,当前食物被吃掉,才会初始化下一个),用户通过键盘上的方向键控制小蛇移动的方向 当小蛇触碰到了墙,即画布边缘的时候,游戏结束! 接下来就是代码实现啦 ~ 食物模块 //食物的自调用函数 (function(){ //创建一个数组 来存放元素 var elements=[]; //食物就是

  • javascript实现简单的贪吃蛇游戏

    javascript实现简单的贪吃蛇游戏,功能很简单,代码也很实用,就不多废话了,小伙伴们参考注释吧. <html> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8'> <title>贪吃蛇</title> <script type="text/javascript"> var map; //地图 var snake;

  • C语言实现控制台版贪吃蛇游戏

    用c语言写的期末作业:C语言实现控制台版贪吃蛇游戏的具体代码,供大家参考,具体内容如下 /* { conio.h 阻塞式: getch(): 从无回显的控制台获取字符.无缓冲区,只有当按下一个键才会执行后面的程序. 非阻塞式: kbhit() 检测缓冲区中是否有字符:执行该函数后程序不会停下,而是继续执行下面的代码 由于getch()和kbhit()已弃用, 在编译时会产生警告, 可以用_getch()和_kbhit()替换它们, 或者在包含头文件前加上#pragma warning(disab

  • Java实现简单版贪吃蛇游戏

    本文实例为大家分享了Java实现简单版贪吃蛇游戏的具体代码,供大家参考,具体内容如下 这是一个比较简洁的小游戏,主要有三个类,一个主类,一个食物类,一个贪吃蛇类. 1.首先定义主类,主类中主要用来创建窗口 public class Main { public static final int WIDTH=600; public static final int HEIGHT=600; public static void main(String[] args) { JFrame win =new

  • Python+OpenCV自制AI视觉版贪吃蛇游戏

    目录 介绍 1.安装工具包 2.检测手部关键点 3.蛇身移动 4.蛇进食增加身体长度 5.自身碰撞及界面的处理 介绍 各位同学好,今天和大家分享一下如何使用 mediapipe+opencv 自制贪吃蛇小游戏.先放张图看效果. 规则:食指指尖控制蛇头,指尖每接触到黄色方块,计数加一,蛇身变长,方块随机切换位置.如果指尖停止移动,或者移动过程中蛇头撞到蛇身,那么游戏结束.点击键盘上的R键重新开始游戏. 游戏进行时: 游戏结束界面: 1. 安装工具包 pip install opencv_pytho

  • JavaScript实现网页版的五子棋游戏

    本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码,供大家参考,具体内容如下 根据毕老师的HTML+CSS+JavaScript教程和下载的一些文档介绍自己在手机上写出来的一个简单五子棋,很简单的功能,许多功能都没有实现,写的过程中也遇到很多问题,现在的代码中也存在一些问题,比如电脑下棋时没有下到最右边和最下边,改来改去也还没试出电脑下最右边和最下边一排的情况,但每一个字符都是自己敲出来的,清楚他们的功能,还是很有成就感的!先看下概貌吧! 上代码 <html>   <

  • javaScript实现网页版的弹球游戏

    利用javeScript对象以及方法实现的网页弹球游戏,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球</title> </head> <body> <canvas id="canvas"width="400"height="400"></canvas> <scr

  • 用最少的JS代码写出贪吃蛇游戏

    曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用java实现太难,现在网页制作20行代码就做成一个简单的demo了,时代在进步啊 完整脚本代码: <!doctype html> <html> <body> <canvas id="can" width="400" height="400" style="background: Black"></canvas> <

  • JavaScript实现网页贪吃蛇游戏

    本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head><title>贪吃蛇</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <s

随机推荐