自己用canvas写的贪吃蛇代码
<!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写的贪吃蛇代码的更多相关文章
- 以前写的canvas 小游戏 贪吃蛇代码
效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...
- 一步一步用Canvas写一个贪吃蛇
之前在慕课网看了几集Canvas的视频,一直想着写点东西练练手.感觉贪吃蛇算是比较简单的了,当年大学的时候还写过C语言字符版的,没想到还是遇到了很多问题. 最终效果如下(图太大的话 时间太长 录制gi ...
- JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 使用Python写一个贪吃蛇
参考代码http://blog.csdn.net/leepwang/article/details/7640880 我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的 ...
- Python写的贪吃蛇游戏例子
第一次用Python写这种比较实用且好玩的东西,权当练手吧 游戏说明: * P键控制“暂停/开始”* 方向键控制贪吃蛇的方向 源代码如下: 复制代码代码如下: from Tkinter import ...
- 如何用Python写一个贪吃蛇AI
前言 这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了. 问题的关键在于,图片中的贪吃蛇真的很贪吃XD, ...
- 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能（附源代码详解和下载）
C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...
- html 贪吃蛇代码
最近在搞自己的网站,维护的时候准备放个贪吃蛇上去,顶一下原有的页面. 这个贪吃蛇有一点毒.原来设定了100级:100级刚开局就挂了.后来改掉了选项菜单,修复了. 还有什么bug,欢迎点击侧边的QQ按钮 ...
随机推荐
- 基于idea的maven（一）Maven的安装
1.Maven前置依赖 检查电脑是是否安装java 2.下载maven 网址 www.apache.org 解压 maven 压缩包, 并创建相应的maven本地仓库的路径. 打开 conf文件夹中 ...
- SVN各种错误提示产生原因及处理方法大全
SVN各种错误提示产生原因及处理方法大全 SVN各种错误提示产生原因及处理方法大全 1. svn: Server sent unexpected return value (500 Internal ...
- Dubbo配置文件详解
为新项目练手,把项目中用到的web service.RMI的服务改用Dubbo+Zookeeper+Spring,网上找到几篇不错的配置详解 1.此篇博文主要从以下几种配置方式来讲 XML 配置文件方 ...
- 微信小程序没找到构建npm或者没找到node_modules目录以及如何在小程序中引入vant weapp组件
微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init ...
- VM删除快照失败，磁盘空间不足，只是删除了快照名字(全网唯一解决办法)
原创: 删除之前的快照,发现只是把名字删除了, 看着这么多文件也不知道怎么删,一顿百度google也是没找到答案 于是就自己琢磨 因为删除快照的时候,是先把快照删除,然后删除无效的文件 所以先让这个盘 ...
- json代码——json序列化，json-parse，JSONstringify格式化输出，虚拟DOM
JS对象转为类似json的字符串,对象->字符串叫序列化,字符串->对象 是反序列化 ㈠json序列化 <script> var shy = new Object() ...
- react 中的路由 Link 和Route和NavLink
route是配置,link是使用 https://blog.csdn.net/chern1992/article/details/77186118(copy) 嵌套路由一般使用Route,类似于vue ...
- 网页“console”输出图文信息
http://www.monmonkey.com/javascript/jiben2.html 参考以上链接中的转义字符使用. http://www.cnblogs.com/Wayou/p/chrom ...
- 51 Nod N^N的末位数字
1004 n^n的末位数字 题目来源: Author Ignatius.L (Hdu 1061) 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 给 ...
- Codeforces 1213D Equalizing by Division
cf题面 中文题意 给n个数,每次可以把其中一个数字位运算右移一位(即整除以二),问要至少操作几次才能让这n个数中有至少k个相等. 解题思路 这题还有个数据范围更小的简单版本,n和k是50,\(a_i ...