<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#btn{

width: 200px;

height: 300px;

position: absolute;

left: 620px;top: 10px;

}

[type=button]{

width: 70px;

height: 50px;

margin-left: 20px;

margin-top: 20px;

background: lawngreen;

outline: none;

}

#score{

width: 50px;

height: 50px;

margin: 10px auto;

line-height: 50px;

font-size: 40px;

text-align: center;

}

</style>

</head>

<body>

<canvas id="board" width="601" height="601" style="background: #ccc;display: block;"></canvas>

<div id="btn">

<input type="button" name="start" id="start" value="开始" onclick="startBtn()"/>

<input type="button" name="end" id="end" value="暂停" onclick="endBtn()"/>

<br /><br /><br />

<p><center>得分:</center></p>

<div id="score"></div>

</div>

</body>

</html>

<script type="text/javascript">

var board = document.getElementById('board');

var score = document.getElementById('score');

var context = board.getContext('2d');

//主要类

var num = 0;

score.innerHTML = num;//定义一个分数记录器

var snakeArray = [];//定义一个存储每一节身体的数组;

var aSnake = new Snake(20,0,'yellow')//游戏开始一节身体;

snakeArray.push(aSnake)

aSnake.drwaSnake(context);

var aFood = new Food(200,400)//定义一个食物

var aboard = new canvasBoard();//定义一个画布

aboard.drwaCanvas();

aFood.drawFood();//定义一个食物;

//控制方向和前进像素个数

var speedX = 20;

var speedY = 0;

var x = 0;

var y = 0;

var timer = null;

var lock = false;

//游戏开始函数

function startGame(t){

var t = t;

timer = setInterval(function(){

context.clearRect(0,0,board.width,board.height);//清除画布

var aboard = new canvasBoard();//定义一个画布

aboard.drwaCanvas();

aFood.drawFood();//定义一个食物;

var FoodHit = FoodHitCheck(snakeArray[0],aFood);//检测和食物碰撞

if(FoodHit){

clearInterval(timer);

timer = null;

num++;

score.innerHTML = num;//分数;

aFood.x = randPlace();//改变随机位置

aFood.y = randPlace();

aFood.drawFood();

addSnake(snakeArray);

t -=10

if(t <= 100){

t=100;

}

startGame(t);

}

//操作上下左右

document.onkeydown = function(event){

var ev = event || window.event;

Handle(ev);

}

var len = snakeArray.length;//缓存数组的长度

snakeArray[len-1].x = snakeArray[0].x+speedX;

snakeArray[len-1].y = snakeArray[0].y+speedY;

var a = snakeArray.pop();

snakeArray.unshift(a);

for(var i = 0;i < snakeArray.length;i++){

snakeArray[i].drwaSnake(context)

}

//判断和墙壁碰撞

var isHit = HitCheck(snakeArray[0],board);

if(isHit){

clearInterval(timer)

timer = null;

alert('GAMEOVER');

}

//判断和身体相撞;

for(var i = 2;i < snakeArray.length;i++){

var selfHit = FoodHitCheck(snakeArray[0],snakeArray[i]);

if(selfHit){

clearInterval(timer)

timer = null;

alert('GAMEOVER');

}

}

},t)

}

//开始按钮

function startBtn(){

if(!lock){

startGame(200);

lock = true;

}

}

function endBtn(){

clearInterval(timer);

lock = false;

}

//操作类

function Handle(ev){

var evKeyCode = ev.keyCode;

switch(evKeyCode){

case 65:{

if(speedX <= 0){speedX = -20;speedY = 0;}

break;

}

case 87:{

if(speedY <= 0){speedX = 0;speedY = -20;}

break;

}

case 68:{

if(speedX >= 0){speedX = 20;speedY = 0;}

break;

}

case 83:{

if(speedY >= 0){speedX = 0;speedY = 20;}

break;

}

}

}

//加长身体;

function addSnake(snakeArray){

var l = snakeArray.length;

var sX = snakeArray[l-1].x;

var sY = snakeArray[l-1].y;

var snake = new Snake(sX,sY,'red');

snakeArray.push(snake);

}

//检测碰撞墙壁

function HitCheck(snake,board){

if(snake.x < 0 || snake.x > board.width || snake.y < 0 || snake.y > board.height){

return true

}

return false;

}

//检测碰撞食物

function FoodHitCheck(snake,food){

if(!(snake.x < food.x || snake.x > food.x+18 || snake.y < food.y || snake.y > food.y+18)){

return true

}

return false;

}

//随机位置

function randPlace(){

return (parseInt(Math.random()*30))*20;

}

//画布类

function canvasBoard(){

this.x = 20;//间距

this.y = 20;//

this.drwaCanvas = function(){

context.beginPath();

context.strokeStyle = '#ddd';

context.lineWidth = 1;

for(var i = 0;i < board.width/this.x;i++){

context.moveTo(i*this.x+0.5,0);

context.lineTo(i*this.x+0.5,board.height);

}

for(var i = 0;i < board.height/this.y;i++){

context.moveTo(0,i*this.y+0.5);

context.lineTo(board.width,i*this.y+0.5);

}

context.stroke();

}

}

//蛇类

function Snake(x,y,color){

this.x = x;

this.y = y;

this.width = 20;

this.height = 20;

this.color = color;

this.drwaSnake = function(context){

context.beginPath();

context.strokeStyle = "#ccc";

context.strokeRect(this.x,this.y,this.width,this.height);

context.fillStyle = this.color;

context.fillRect(this.x,this.y,this.width,this.height)

context.save();

}

}

//食物类

function Food(x,y){

this.x = x;

this.y = y;

this.w = 20;

this.h = 20;

this.color = 'green';

this.drawFood = function(){

context.beginPath();

context.fillStyle = this.color;

context.fillRect(this.x,this.y,this.w,this.h)

context.save();

}

}

</script>

效果如下图

原理是将每一节身体视为一个对象,将对象放入一个数组里,用定时器每次改变最后一节身体的位置放在最前面,同时改变数组里对象的位置,从而实现向前走的动画

自己用canvas写的贪吃蛇代码的更多相关文章

  1. 以前写的canvas 小游戏 贪吃蛇代码

    效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...

  2. 一步一步用Canvas写一个贪吃蛇

    之前在慕课网看了几集Canvas的视频,一直想着写点东西练练手.感觉贪吃蛇算是比较简单的了,当年大学的时候还写过C语言字符版的,没想到还是遇到了很多问题. 最终效果如下(图太大的话 时间太长 录制gi ...

  3. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

  4. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  5. 使用Python写一个贪吃蛇

    参考代码http://blog.csdn.net/leepwang/article/details/7640880 我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的 ...

  6. Python写的贪吃蛇游戏例子

    第一次用Python写这种比较实用且好玩的东西,权当练手吧 游戏说明: * P键控制“暂停/开始”* 方向键控制贪吃蛇的方向 源代码如下: 复制代码代码如下: from Tkinter import ...

  7. 如何用Python写一个贪吃蛇AI

    前言 这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了. 问题的关键在于,图片中的贪吃蛇真的很贪吃XD, ...

  8. 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能（附源代码详解和下载）

    C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...

  9. html 贪吃蛇代码

    最近在搞自己的网站,维护的时候准备放个贪吃蛇上去,顶一下原有的页面. 这个贪吃蛇有一点毒.原来设定了100级:100级刚开局就挂了.后来改掉了选项菜单,修复了. 还有什么bug,欢迎点击侧边的QQ按钮 ...

随机推荐

  1. cudaDeviceProp结构体

    struct cudaDeviceProp {char name[256];         //器件的名字size_t totalGlobalMem;    //Global Memory 的byt ...

  2. phpMyAdmin无法缓存模板文件，所以会运行缓慢。

    出现这个的原因是 phpmyadmin的安装目录, tmp目录不存在,或者存在但是权限不对.这是个缓存目录,可以加快phpmyadmin的运行,即使不理睬这个警告信息,也不会影响程序的执行. 解决的方 ...

  3. [LeetCode 92] Reverse Linked List II 翻转单链表II

    对于链表的问题,根据以往的经验一般都是要建一个dummy node,连上原链表的头结点,这样的话就算头结点变动了,我们还可以通过dummy->next来获得新链表的头结点.这道题的要求是只通过一 ...

  4. Elasticsearch在Centos 7上的安装与配置

    https://segmentfault.com/a/1190000011899522 https://blog.csdn.net/xxxxxx91116/article/details/171362 ...

  5. vue cli3.0快速搭建项目详解（强烈推荐）

    这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...

  6. Tarjan求点双连通分量

    概述 在一个无向图中,若任意两点间至少存在两条“点不重复”的路径,则说这个图是点双连通的(简称双连通,biconnected) 在一个无向图中,点双连通的极大子图称为点双连通分量(简称双连通分量,Bi ...

  7. 性能优化（1+N，list与iterator，缓存，事务）

    1.注意session.clear()的运用,尤其是不断分页循环的时候 A 在一个大集合中进行遍历,取出其中含有敏感字的对象 B 另一种形式的内存泄露. 2.1+N问题 问题描述:如@ManyToOn ...

  8. 【leetcode】1235. Maximum Profit in Job Scheduling

    题目如下: We have n jobs, where every job is scheduled to be done from startTime[i] to endTime[i], obtai ...

  9. js-点击+加关注变成已关注，已关注状态时，鼠标滑动上的状态时取消关注

    效果: HTML: <div class="rightBtn cur">+关注</div> CSS: .rightBtn{ width: 80px; hei ...

  10. Python天天学_04_基础四

    Python_day_04 金角大王: http://www.cnblogs.com/alex3714/articles/5765046.html ------Python是一个优雅的大姐姐 学习方式 ...