原生js+canvas实现贪吃蛇效果


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了canvas实现贪吃蛇效果的具体代码,供大家参考,具体内容如下

效果展示:

原生js+canvas实现贪吃蛇效果

源码展示:

页面布局展示:worm.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>贪吃蛇</title>
 <style type="text/css">
 canvas{
 border: 1px solid black;
 }
 div{
 width: 50px; height: 50px; 
 border: 1px solid black; cursor: pointer;
 text-align: center; line-height: 50px;
 }
 </style>
 <script type="text/javascript" src="Node.js" ></script>
 <script type="text/javascript" src="Worm.js" ></script>
 <script src="Stage.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 function load () {
 //创建一个舞台 调用print方法打印
 stage=new Stage();
 //获取ctx 
 var mCanvas=document.getElementById("mCanvas");
 ctx=mCanvas.getContext('2d');
 stage.print(ctx);
 startPrint();
 }
 
 function changeDir(dir){
 DIR=dir;
 }
 var task;
 var stage;
 var ctx;
 function startPrint () {
 task=window.setInterval(function () {
  stage.worm.step();
  stage.print(ctx);
 }, SPEED);
 }
 function endPrint () {
 window.clearInterval(task);
 }
 
 </script>
 </head>
 <body onload="load()">
 <canvas id="mCanvas" width="500" height="500">
 </canvas>
 
 <table>
 <tr>
 <td></td>
 <td>
  <div onclick="changeDir(UP)">UP</div>
 </td>
 <td></td>
 </tr>
 <tr>
 <td>
  <div onclick="changeDir(LEFT)">LEFT</div>
 </td>
 <td></td>
 <td>
  <div onclick="changeDir(RIGHT)">RIGHT</div>
 </td>
 </tr>
 <tr>
 <td></td>
 <td>
  <div onclick="changeDir(DOWN)">DOWN</div>
 </td>
 <td></td>
 </tr>
 </table>
 
 </body>
</html>

节点类的js  :Node.js

/* 节点类 */
function Node (x, y) {
 this.x=x;
 this.y=y;
 this.equals=function (i, j) {
 return this.x==i && this.y==j;
 };
 
}

舞台类js:Stage.js

/** 舞台类 */
function Stage () {
 this.width=50;
 this.height=50;
 this.worm=new Worm();
 
 /* 在canvas中绘制舞台的内容 */
 this.print=function (ctx) {
 for(i=0; i<this.width; i++){
 for(j=0; j<this.height; j++){
 //如果当前节点是蛇身子的一部分 
 //那么换一种颜色绘制
 if(this.worm.contains(i,j)){
  ctx.fillStyle="#ab55ff";
  ctx.fillRect(i*10, j*10, 10, 10);
 }else if(this.worm.food.equals(i, j)){
  ctx.fillStyle="#000000";
  ctx.fillRect(i*10, j*10, 10, 10);
 }else{
  ctx.fillStyle="#dddddd";
  ctx.fillRect(i*10, j*10, 10, 10);
 }
 }
 }
 //在舞台的左上角绘制分数
 ctx.font="30px Arial";
 ctx.fillStyle="#880000";
 ctx.fillText("score:"+SCORE, 10,40);
 };
}

蛇类js:Worm.js

/** 蛇类 */
var UP=0;
var DOWN=1;
var LEFT=2;
var RIGHT=3;
 
var DIR=UP;
 
var SCORE=0;
var SPEED=300;
//蛇类初始化的形状
function Worm () {
 this.nodes=[];
 this.nodes[this.nodes.length]=new Node(20,10);
 this.nodes[this.nodes.length]=new Node(20,11);
 this.nodes[this.nodes.length]=new Node(20,12);
 this.nodes[this.nodes.length]=new Node(20,13);
 this.nodes[this.nodes.length]=new Node(20,14);
 this.nodes[this.nodes.length]=new Node(20,15);
 this.nodes[this.nodes.length]=new Node(21,15);
 this.nodes[this.nodes.length]=new Node(22,15);
 this.nodes[this.nodes.length]=new Node(23,15);
 this.nodes[this.nodes.length]=new Node(24,15);
 this.nodes[this.nodes.length]=new Node(24,16);
 this.nodes[this.nodes.length]=new Node(24,17);
 this.nodes[this.nodes.length]=new Node(24,18);
 this.nodes[this.nodes.length]=new Node(24,19);
 
 /* 蛇会走一步 */
 this.step=function () {
 //计算出头结点 把头节点添加到nodes数组中
 var oldHead=this.nodes[0];
 var newHead;
 switch (DIR){
 case UP:
 if(oldHead.y-1<0){
  newHead=new Node(oldHead.x, 49);
 }else{
  newHead=new Node(oldHead.x, oldHead.y-1);
 }
 break;
 case DOWN:
 if(oldHead.y+1>49){
  newHead=new Node(oldHead.x, 0);
 }else{
  newHead=new Node(oldHead.x, oldHead.y+1);
 }
 break;
 case LEFT:
 if(oldHead.x-1<0){
  newHead=new Node(49, oldHead.y);
 }else{
  newHead=new Node(oldHead.x-1, oldHead.y);
 }
 break;
 case RIGHT:
 if(oldHead.x+1>49){
  newHead=new Node(0, oldHead.y);
 }else{
  newHead=new Node(oldHead.x+1, oldHead.y);
 }
 break;
 }
 this.nodes.unshift(newHead);
 
 if(!this.food.equals(newHead.x, newHead.y)){
 //把尾节点删掉 (在没有吃到食物的时候)
 this.nodes.pop();
 }else{
 //吃到了食物 重新生成食物
 this.food=this.randomFood();
 SCORE+=10;
 SPEED-=50;
 endPrint();
 startPrint();
 }
 };
 
 /* 判断i,j节点是否是当前蛇身子的一部分 */
 this.contains=function (i, j) {
 for(k=0; k<this.nodes.length; k++){
 var node=this.nodes[k];
 if(node.x==i && node.y==j){
 return true;
 }
 }
 return false;
 };
 
 //声明生成食物的方法
 this.randomFood=function () {
 var x;
 var y;
 do{
 x=Math.floor(Math.random()*50);
 y=Math.floor(Math.random()*50);
 }while(this.contains(x, y));
 return new Node(x, y);
 };
 
 //声明食物
 this.food=this.randomFood();
 
}

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

Javascript 相关文章推荐
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
package.json各个属性说明详解
Mar 11 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
js+canvas实现五子棋小游戏
Aug 02 #Javascript
js实现3D旋转相册
Aug 02 #Javascript
js实现双色球效果
Aug 02 #Javascript
js实现tab栏切换效果
Aug 02 #Javascript
原生js canvas实现鼠标跟随效果
Aug 02 #Javascript
原生js+canvas实现下雪效果
Aug 02 #Javascript
jQuery实现滑动开关效果
Aug 02 #jQuery
You might like
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
jquery常用特效方法使用示例
2014/04/25 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python实现视频下载功能
2017/03/14 Python
Python中extend和append的区别讲解
2019/01/24 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
文员自我评价怎么写
2013/09/19 职场文书
文秘大学生求职信
2014/02/25 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
班主任工作实习计划
2015/01/16 职场文书
小学班主任研修日志
2015/11/13 职场文书
团干部培训班心得体会
2016/01/06 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
MySQL 自定义变量的概念及特点
2021/05/13 MySQL