自己用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运行web项目乱码
windows下idea中web项目乱码,主要原因是服务器端乱码(执行webservlet的时候,编码格式改变),导致客户端的编码格式与webservlet传递过的编码格式不一致. 前端网页的编码,通 ...
- eclipse springboot 官网demo启动 SpringApplication类找不到
网上有很多类似的,我这种情况是:maven的问题,,, 我自己下载了maven并集成到了eclipse上,导致java.lang.NoClassDefFoundError: org/springfra ...
- tomcat 搭建网站
基本概念 JDK(Java Development Kit)是Sun Microsystems针对Java开发人员的产品.自从Java推出以来,JDK已经成为使用最广泛的Java SDK.JDK 是整 ...
- vsto 将图片加入到word里面
private void AddPictoWord() { string folderpath = @"C:\Users\k0021213\Pictures\QQ浏览器截图"; D ...
- Axure案例：用中继器实现便捷好用的3级菜单--转载
提示1:本篇教程可能不太适合新手,以及不了解中继器.全局变量.系统变量等使用的…新手 提示2:文字其实不多,截图太多,所以看上去很长,也可直接翻到末尾查看所有的用例,其实并不多 之前有介绍过使用中继器 ...
- 同一域名对应多个IP时，PHP获取远程网页内容的函数
同一域名对应多个IP时,PHP获取远程网页内容的函数 [文章作者:张宴 本文版本:v1.0 最后修改:2008.12.15 转载请注明原文链接:http://blog.zyan.cc/post/389 ...
- 开始PHP，常量/变量与内存间的关系--传值
一.常见的PHP代码嵌入式方式,与html结合 要注意:文件名后缀必须形如xxx.php否则html将无法解析 二.php脱离html代码独立工作,没有其他代码 不需要借助Apache工作,只需要ph ...
- vue中使用echarts（vue+vue-cli+axios+jsonp+echarts）
一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...
- linux运维、架构之路-Kubernetes离线集群部署-无坑
一.部署环境介绍 1.服务器规划 系统 IP地址 主机名 CPU 内存 CentOS 7.5 192.168.56.11 k8s-node1 2C 2G CentOS 7.5 192.168.56 ...
- CSS之运算，Sass 之运算（加、减、乘、除）
1. 加减法 加减法不是重点,重点是在SassScript中用到的两种单位之间的转换:绝对单位:px, pt, pc, in, mm, cm...绝对单位都能运算:相对单位:ex, em, rem.. ...