JavaScript中用画布canvans做贪吃蛇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei";
}
#page {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
height: 600px;
width: 980px;
}
#yard {
width: 800px;
border: 1px solid gray;
box-shadow: 0 0 10px black;
float: right;
}
#mark {
font-weight: 800;
}
#mark_con {
color: red;
}
button {
width: 50px;
}
a {
text-decoration: none;
}
</style>
<script type="text/javascript">
//伪常量
var BLOCK_SIZE = 20; //格子大小
var COLS = 40; //列数
var ROWS = 30; //行数
//变量
var snakes = []; //保存蛇坐标
var c = null; //绘图对象
var toGo = 3; //行进方向
var snakecount = 4; //蛇身数量
var interval = null; //计时器
var foodX = 0; //食物X轴坐标
var foodY = 0; //食物Y轴坐标
var oMark = null; //分数显示框
var isPause = false; //是否暂停
// 绘图函数
function draw() {
c.clearRect(0, 0, BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS);
//画出横线
for (var i = 1; i <= ROWS; i++) {
c.beginPath();
c.moveTo(0, i * BLOCK_SIZE);
c.lineTo(BLOCK_SIZE * COLS, i * BLOCK_SIZE);
c.strokeStyle = "gray";
c.stroke();
}
//画出竖线
for (var i = 1; i <= COLS; i++) {
c.beginPath();
c.moveTo(i * BLOCK_SIZE, 0);
c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS);
c.stroke();
}
//画出蛇
for (var i = 0; i < snakes.length; i++) {
c.beginPath();
c.fillStyle = "green";
c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
c.moveTo(snakes[i].x, snakes[i].y);
c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
c.closePath();
c.strokeStyle = "white";
c.stroke();
}
//画出食物
c.beginPath();
c.fillStyle = "yellow";
c.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE);
c.moveTo(foodX, foodY);
c.lineTo(foodX + BLOCK_SIZE, foodY);
c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE);
c.lineTo(foodX, foodY + BLOCK_SIZE);
c.closePath();
c.strokeStyle = "red";
c.stroke();
}
//游戏初始化
function start() {
for (var i = 0; i < snakecount; i++) {
snakes[i] = {
x: i * BLOCK_SIZE,
y: 0
};
}
addFood();
draw();
oMark.innerHTML = 0;
}
//移动函数
function move() {
switch (toGo) {
case 1: //左边
snakes.push({
x: snakes[snakecount - 1].x - BLOCK_SIZE,
y: snakes[snakecount - 1].y
});
break;
case 2: //上边
snakes.push({
x: snakes[snakecount - 1].x,
y: snakes[snakecount - 1].y - BLOCK_SIZE
});
break;
case 3: //右边
snakes.push({
x: snakes[snakecount - 1].x + BLOCK_SIZE,
y: snakes[snakecount - 1].y
});
break;
case 4: //下边
snakes.push({
x: snakes[snakecount - 1].x,
y: snakes[snakecount - 1].y + BLOCK_SIZE
});
break;
default:
;
}
snakes.shift();
isEat();
isDie();
draw();
}
//吃到食物判断
function isEat() {
if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) {
oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString();
addFood();
addSnake();
}
}
//添加蛇身
function addSnake() {
snakecount++;
snakes.unshift({
x: BLOCK_SIZE * COLS,
y: BLOCK_SIZE * ROWS
});
}
//交互响应函数
function keydown(keyCode) {
switch (keyCode) {
case 37: //左边
if (toGo != 1 && toGo != 3) toGo = 1;
break;
case 38: //上边
if (toGo != 2 && toGo != 4) toGo = 2;
break;
case 39: //右边
if (toGo != 3 && toGo != 1) toGo = 3;
break;
case 40: //下的
if (toGo != 4 && toGo != 2) toGo = 4;
break;
case 80: //开始/暂停
if (isPause) {
interval = setInterval(move, 100);
isPause = false;
document.getElementById('pause').innerHTML = "Pause";
} else {
clearInterval(interval);
isPause = true;
document.getElementById('pause').innerHTML = "Start";
}
break;
}
}
//制造食物
function addFood() {
foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE;
foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE;
// console.log(foodX + " -- " + foodY);
}
//死亡判断
function isDie() {
if (snakes[snakecount - 1].x == -20 || snakes[snakecount - 1].x == BLOCK_SIZE * COLS ||
snakes[snakecount - 1].y == -20 || snakes[snakecount - 1].y == BLOCK_SIZE * ROWS) {
alert("Game Over!");
clearInterval(interval);
}
更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118540838
JavaScript中用画布canvans做贪吃蛇的更多相关文章
- JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
- easyx图形库做贪吃蛇游戏
编程总是对着一个黑窗口,可以说是非常乏味了,于是喵喵就翻出来了以前用easyx图形库做图形界面的贪吃蛇游戏. 不过大家只是当做提高编程的乐趣来学习吧,想进一步做的话可以学习QT,还有其他的框架. 这是 ...
- JavaScript面向对象编程小游戏---贪吃蛇
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. 2 这个demo是采用了 ...
- 使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...
- JavaScript 实现简易版贪吃蛇（Day_13）
时光永远在变迁,你始终要丢下过去. 使用语言 JavaScript 概述 运用JavaScript 实现简易版<贪吃蛇>. Html 页面 1 <!DOCTYPE htm ...
- 用Js写贪吃蛇
使用Javascript做贪吃蛇小游戏, 1.自定义地图宽高,蛇的初始速度 2.食物随机出现 3.蛇的样式属性 4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,) <!DOCTYPE ht ...
- C语言 小游戏之贪吃蛇
还记得非常久曾经听群里人说做贪吃蛇什么的,那时候大一刚学了C语言,认为非常难,根本没什么思路. 前不久群里有些人又在谈论C语言贪吃蛇的事了,看着他们在做,我也打算做一个出来. 如今大三,经过了这一年半 ...
- 人生就像一条加速奔向死亡的贪吃蛇【winform版】
群里聊天的时候,一个学妹说她在做贪吃蛇的小作业,于是昨晚(5.20无聊只好撸代码/(ㄒoㄒ)/~~)花了2个小时撸了一个出来,早上又花了些时间完善功能,就有了这个还算比较完善的版本,当然代码结构比较混 ...
- Cocos2d-JS实现的贪吃蛇
一.前言 相信贪吃蛇大家都玩儿过,我对贪吃蛇的印象就是在电子词典上,一只像素蛇在屏幕游走,饥渴难耐,看着豆子就要去吃,吃到豆子就会长一节,当蛇的身体越来越长的时候,它才发现这个世界变了,每走一步,都是 ...
随机推荐
- java class 文件格式解析
前言 大约5年前,想研究javaassistant,cglib等字节码操作的相关类库,来对class进行增强,当要到要操作字节码的时候,发现无法继续下去了,只能放弃. 学习jvm字码,需要理解clas ...
- async异步函数的执行顺序
1 async function async1(){ 2 console.log('async1 start') //2 3 await async2() 4 //await async2()后面的内 ...
- Book2Notion：将豆瓣图书信息同步到Notion的Chrome插件
背景 前几天写了一个python脚本从豆瓣爬数据然后保存到Notion,被身边同学吐槽使用起来太麻烦,而且也不是所有人都会Python(原话是充满了码农版"何不食肉糜").正好最近 ...
- k8s入门之pod(四)
pod是k8s项目中的最小编排单位,它是运行中的一组(一个或多个)容器,这些容器共享存储.网络.调度等资源,pod是一个逻辑概念,同一个名称空间下不同pod可以通过ip互相访问. 一.通过命令行方式管 ...
- 数据传输POST心法分享，做前端的你还解决不了这个bug？
背景 随时随地给大家提供技术支持的葡萄又来了.这次的事情是这样的,提供demo属于是常规操作,但是前两天客户突然反馈压缩传输模块抛出异常,具体情况是压缩内容传输到服务端后无法解压. 由于代码没有发生任 ...
- CV技术指南免费版知识星球
最近公众号的交流群满了,我们决定搞一个免费的知识星球,让大家在里面交流.以往都是我们写原创,大家阅读,读者之间没什么交流.与此同时,在CV技术指南交流群里,大部分问题都得到了很好地解决,但从来没有 ...
- CA周记 - 带你进⼊ OpenAI 的世界
2021年11月的 Microsoft Ignite , 微软带来了全新的 Azure OpenAI Service,通过新的 Azure 认知服务能够访问 OpenAI 强大的 GPT-3 模型 . ...
- XCTF练习题---MISC---stegano
XCTF练习题---MISC---stegano flag:flag{1nv151bl3m3554g3} 解题步骤: 1.观察题目,下载附件 2.打开发现是一张PDF图片,尝试转换word无果后,想到 ...
- 【架构视角】一篇文章带你彻底吃透Spring
框架的意义 对于程序员来说,我们通常知道很多概念,例如组件.模块.系统.框架.架构等,而本文我们重点说 框架. 框架,本质上是一些实用经验集合.即是前辈们在实际开发过程中积攒下来的实战经验,累积成一套 ...
- IP地址的格式和分类，你都清楚吗？
一个执着于技术的公众号 在网际层中,利用 IP 地址将数据传输到目的地.为了能够使数据正确地发送到目标主机上,网络上的 IP 地址必须有一定的规则来识别主机的位置. IP地址的基本构成 为了便于寻址, ...