Maison > Article > interface Web > JS implémente une version simple du jeu Snake
JS implémente une version simple du jeu Snake
- jackloveoriginal
- 2018-06-11 23:42:151924parcourir
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<script type="text/javascript">
//① 绘制地图
function Map() {
//私有成员(不会随便发生变化)
var w = 800;
var h = 400;
//成员方法，绘制地图
this.showmap = function () {
//创建p、设置css样式、追加给body
var tu = document.createElement('p');
tu.style.width = w + "px";
tu.style.height = h + "px";
tu.style.backgroundImage = "url(./12.jpg)";
document.body.appendChild(tu);
}
}
//② 绘制食物
function Food() {
var len = 20;
//把食物(权值)坐标声明为公开的，以便在外部访问
this.xFood = 0;
this.yFood = 0;
this.piece = null; //页面上唯一的食物对象
//绘制
this.showfood = function () {
//创建p、设置css样式、追加给body
if (this.piece === null) {
this.piece = document.createElement('p');
this.piece.style.width = this.piece.style.height = len + "px";
this.piece.style.backgroundColor = "green";
this.piece.style.position = "absolute";
document.body.appendChild(this.piece);
}
//食物设置绝对定位(position/left/top)
//食物位置“随机”摆放
//移动步进值：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 * len + "px";
this.piece.style.top = this.yFood * len + "px";
}
}
//③ 小蛇
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]//代表每个蛇节
//创建蛇节p
if (this.snakebody[i][3] === null) {//判断没有创建对应的蛇节
this.snakebody[i][3] = document.createElement('p');
//设置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>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body></body>
</html>Cet article montre le code JS pertinent pour implémenter une version simple du jeu Snake Pour plus de contenu connexe, veuillez faire attention au site Web chinois de Inkjet PHP.
Recommandations associées :
Classe de pagination PHP+MySQL simple
Convertir le HTML en Excel et réaliser des fonctions d'impression et de téléchargement
Deux constructeurs de tableaux arborescents sans récursion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utilisation de base du swiperArticle suivant：Utilisation de base du swiper