贪吃蛇

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>

<style type="text/css">
html {
margin:0;
padding: 0;
}
</style>

</head>
<body>

</body>

<script type="text/javascript">
//1.背景
function Map() {
var w = 800;
var h = 400;

//绘制地图
this.showmap = function () {
//创建div、设置css样式、追加给body
var tu = document.createElement('div');

tu.style.width = w + "px";
tu.style.height = h + "px";
tu.style.background = "#ccc";

document.body.appendChild(tu);
}
}

//2.绘制食物
function Food() {
var l = 20;
//把食物(权值)坐标声明为公开的，以便在外部访问
this.xFood = 0;
this.yFood = 0;
this.piece = null; 
//页面上唯一的食物对象
//绘制
this.showfood = function () {
//创建div、设置css样式、追加给body
if (this.piece === null) {
this.piece = document.createElement('div');
this.piece.style.width = this.piece.style.height = l + "px";
this.piece.style.backgroundColor = "red";
this.piece.style.position = "absolute";

document.body.appendChild(this.piece);
}
//食物设置绝对定位
//食物位置“随机”摆放
//移动步进值：20px
//食物“权值”坐标： X轴(0-39) Y轴(0-19) 
//食物真实坐标：权值坐标 * 步进值
this.xFood = Math.floor(Math.random() * 40); //0-39的随机数
this.yFood = Math.floor(Math.random() * 20); //0-19的随机数

this.piece.style.left = this.xFood * l + "px";
this.piece.style.top = this.yFood * l + "px";

}
}

//3.蛇
function Snake() {
var len = 20;
this.redirect = "right"; //默认向右边移动
//后期snakebody要变化，因此声明为公开的(每个蛇节：[x坐标，y坐标，颜色，蛇节对象])
this.snakebody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]];
//a.绘制蛇
this.showsnake = function () {
//遍历小蛇的各个蛇节，并依次创建即可
for (var i = 0; i < this.snakebody.length; i++) {
//this.snakebody[i]//代表每个蛇节
//创建蛇节div
if (this.snakebody[i][3] === null) {//判断没有创建对应的蛇节
this.snakebody[i][3] = document.createElement('div');
//设置css样式(宽度、高度、颜色)
this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + "px";
this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2];
//绝对定位及位置
this.snakebody[i][3].style.position = "absolute";
//把蛇节追加给body
document.body.appendChild(this.snakebody[i][3]);
}
this.snakebody[i][3].style.left = this.snakebody[i][0] * len + "px";
this.snakebody[i][3].style.top = this.snakebody[i][1] * len + "px";
}
}

//b.移动蛇
this.movesnake = function () {
//非蛇头蛇节(当前蛇节的新坐标 是"下个蛇节"的旧坐标)
for (var i = 0; i < this.snakebody.length - 1; i++) {
this.snakebody[i][0] = this.snakebody[i + 1][0];
this.snakebody[i][1] = this.snakebody[i + 1][1];
}
if (this.redirect == "right") {
//蛇头x坐标递增
this.snakebody[this.snakebody.length - 1][0] += 1;
}
if (this.redirect == "left") {
//蛇头x坐标递减
this.snakebody[this.snakebody.length - 1][0] -= 1;
}
if (this.redirect == "up") {
//蛇头y坐标递减
this.snakebody[this.snakebody.length - 1][1] -= 1;
}
if (this.redirect == "down") {
//蛇头y坐标递增
this.snakebody[this.snakebody.length - 1][1] += 1;
}

//判断蛇头碰到食物
//蛇头坐标
var xSnake = this.snakebody[this.snakebody.length - 1][0];
var ySnake = this.snakebody[this.snakebody.length - 1][1];
//食物坐标food.xFood/food.yFood;
if (xSnake == food.xFood && ySnake == food.yFood) {
//吃食物增加蛇节
var newjie = [this.snakebody[0][0], this.snakebody[0][1], 'green', null];
this.snakebody.unshift(newjie);//把newjie放到数组的第一个位置去

//原食物消失，重新生成一个食物
food.showfood();
}

//控制小蛇在地图范围内移动
if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {
alert('game over');
clearInterval(mytime);
return false;
}
//吃到自己判断(蛇头坐标与其他蛇节坐标一致)
for (var k = 0; k < this.snakebody.length - 1; k++) {
if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {
alert('game over kill you by yourself');
clearInterval(mytime);
return false;
}
}

//根据新坐标绘制小蛇
this.showsnake();
}
}

window.onload = function () {
var map = new Map();
map.showmap();

food = new Food();
//声明为全局的以便在该加载事件函数外部访问
food.showfood();

snake = new Snake();
//声明为全局的snake对象
snake.showsnake();

//移动小蛇
//setInterval(全局变量，时间)
mytime = setInterval("snake.movesnake()", 200);

//设置键盘事件，控制器小蛇移动方向
document.onkeydown = function (evt) {
var num = evt.keyCode;
//通过事件对象获得数值码，进而知道被触发键子
if (num == 38) {
snake.redirect = "up";
}
if (num == 40) {
snake.redirect = "down";
}
if (num == 37) {
snake.redirect = "left";
}
if (num == 39) {
snake.redirect = "right";
}
}
}

</script>
</html>

效果图：

JavaScript 小游戏 贪吃蛇的更多相关文章

  1. JavaScript面向对象编程小游戏---贪吃蛇

    1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. ​ 2 这个demo是采用了 ...

  2. 第一个windows 小游戏 贪吃蛇

    最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...

  3. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  4. 用Canvas制作小游戏——贪吃蛇

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...

  5. python【控制台】小游戏--贪吃蛇

    传统贪吃蛇相信大家都玩过,也是一款很老很经典的游戏,今天我们用python控制台实现 项目有很多bug没有解决,因为本人一时兴起写的一个小游戏,所以只是实现可玩部分功能,并没有花较多的时间和精力去维护 ...

  6. 手把手教学h5小游戏 - 贪吃蛇

    简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...

  7. Win32小游戏--贪吃蛇

    近日里学习了关于win32编程的相关知识,利用这些知识制作了一款贪吃蛇小游戏,具体细节还是分模块来叙述 前期准备:在网上找到一些贪吃蛇的游戏素材图片,以及具体的逻辑框图 在正式写功能之前,先把一系列环 ...

  8. Java_GUI小游戏--贪吃蛇

    贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...

  9. Java经典小游戏——贪吃蛇简单实现（附源码）

    一.使用知识 Jframe GUI 双向链表 线程 二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备 首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...

随机推荐

  1. PowerDesigner添加唯一键(mysql)

    1.打开Columns选项卡 2.选中要添加唯一键的字段 3.点击工具栏Create Key按钮,如图 4.打开创建key窗口,根据情况修改约束名称,不修改也可以 5.切换到mysql选项卡,选中“U ...

  2. Java 求字符串中出现频率最高字符

    前段时间接触的这个题目,大体理解了,还有些小地方仍待进一步品味,暂且记下. import java.util.ArrayList; import java.util.Arrays; import ja ...

  3. 启动Eclipse提示找不到虚拟机

    由于硬盘坏了,把所有东西都清光了,今天重新安装Eclipse,出现了一点小插曲 安装的时候出现了这个画面,以前安装也是照着[软件安装管家]的发布装的,幸好还懂得几个英文单词,看了一下提示信息,直译:[ ...

  4. c#链接数据库，查找数据信息

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  5. spring cloud stream 经验总结

    ---恢复内容开始--- 基本概念 spring: cloud: stream: kafka: binder: brokers: cloudTest:19092 zk-nodes: cloudTest ...

  6. C++这么难，为什么还要学习C++呢？如何学？

    在大多数开发或者准开发人员的认识中,C/C++ 是一门非常难的编程语言,很多人知道它的强大,但因为认为“难”造成的恐惧让很多人放弃. 这个世界本来就是残酷的,所以你不能怪C++向你展示了世界的本质 大 ...

  7. ssh的执行流畅

    SSH运行流程 1. 服务器启动,创建Struts2的Filter控制器,创建Spring容器对象. 实例化Struts2控制器时,加载struts.xml,struts-default.xml,de ...

  8. sleep(),yield(),join(),wait()

    sleep(),yield(),join(),wait() sleep() sleep是Thread类的静态方法,在指定的时间内让当前线程暂停执行,但不会释放锁标志 也就是使线程进入阻塞状态 wait ...

  9. 通过Blazor使用C#开发SPA单页面应用程序(3)

    今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...

  10. （三十三）c#Winform自定义控件-日期控件

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...