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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现贪吃蛇游戏
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 通过JavaScript,我们可以实现贪吃蛇游戏,具体功能如下: (1)通过按上下左右键来改变蛇的移动方向 (2)若蛇撞到自己,则游戏结束 (3)蛇移动出地图边缘时,会从地图的另一边进来 (4)长按方向键,蛇加速移动 (5)蛇吃到食物后,重新生成食物 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <met
-
JavaScript贪吃蛇的实现代码
本文实例为大家分享了JavaScript实现贪吃蛇的具体代码,供大家参考,具体内容如下 首先我们要确定贪吃蛇应有的功能 1.通过键盘的上下左右控制蛇的移动方向 2.边界判定,即蛇头超出边界则游戏结束 3.碰撞判定,即蛇头和食物块发生触碰 4.吃到食物积分加1 具体实现 一.html代码 <div class="container"> <!--小蛇移动的操场--> <div id="playground"> <!--小蛇--&
-
javascript实现贪吃蛇小游戏思路
javascript小游戏贪吃蛇实现思路讲解(完整代码实现),供大家参考,具体内容如下 效果流程 1.首先我们要操作的canvas <!doctype html> <html> <head> <meta charset="utf-8"> <title>贪吃蛇</title> </head> <body> <canvas id="canvas"></can
-
原生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实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 先上图 话不多说,代码奉上,喜欢的请留下你的小星星♥(ˆ◡ˆԅ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
-
js实现贪吃蛇游戏含注释
本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 两个小时完成的,有点简陋. 直接看效果.打开调试面板,在resource面板,新建snippet 粘贴以下代码,右键snippet,run. clearInterval(timer); document.body.innerHTML = ""; //每秒移动多少格 let speed = 10; let speedUpMul = 3; //是否能穿墙 let isThroughTheWall = true; /
-
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
-
JavaScript 精美贪吃蛇实现流程
目录 一.创建html结构 二.创建表格 三.创建蛇头.蛇身 四.创建食物 五.让蛇动起来 六.控制蛇的方向 七.完整代码 index.html Game.js Snake.js Food.js 八.图片 九.总结 这篇文章不简单!! 今天博主呕心沥血写了一个贪吃蛇的小游戏,整个过程从无到有简直扣人心弦. 接下来本博主就来好好说到说到这个过程!! 话不多说,我们还是先来看看最后的呈现效果吧. 看完了才知道什么叫做操作,简直传奇!! 接下来不吹牛来讲讲实际操作 ! 首先我们要知道所谓的贪吃蛇无非就
-
用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实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <!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